Hooks簡介

誕生背景：
在React 16.8之前的版本中，組件主要分為函數組件和類組件兩大類。函數組件簡單輕量，但不支持狀態（state）和生命周期方法；而類組件雖然功能強大，但編寫和維護起來相對復雜。Hooks的引入旨在解決這一痛點，讓函數組件也能擁有狀態和其他React特性。

目的：
Hooks的主要目的是在不增加復雜性的前提下，增強函數組件的能力。它們提供了一種將組件的邏輯封裝成可重用代碼塊的方式，使得代碼更加清晰和簡潔。

優勢：

????????復用邏輯：通過自定義Hooks，可以輕松復用組件間的邏輯。

????????簡潔的組件樹：Hooks使得組件更加輕量級，有助于構建更簡潔的組件樹。

????????易于理解和維護：Hooks的語法更加直觀，使得代碼更易于閱讀和維護。

常用Hooks解析

1.?useState

? ? ?useState是React中最常用的Hook之一，它允許你在函數組件中添加狀態。

import React, { useState } from 'react';  function Counter() {  const [count, setCount] = useState(0);  return (  <div>  <p>You clicked {count} times</p>  <button onClick={() => setCount(count + 1)}>  Click me  </button>  </div>  );  
}

2.?useEffect

????useEffect讓你能夠在函數組件中執行副作用操作（如數據獲取、訂閱或手動更改React組件中的DOM）。

import React, { useEffect, useState } from 'react';  function FetchData() {  const [data, setData] = useState(null);  useEffect(() => {  fetch('https://api.example.com/data')  .then(response => response.json())  .then(data => setData(data));  }, []); // 空數組表示這個effect只在組件掛載時運行  if (data === null) {  return <div>Loading...</div>;  }  return <div>{JSON.stringify(data)}</div>;  
}

3.?useContext

?????useContext允許你在組件樹中共享數據，而無需手動將props一層層傳遞下去。

import React, { createContext, useContext, useState } from 'react';  const ThemeContext = createContext(null);  function ThemeProvider({ children }) {  const [theme, setTheme] = useState('light');  return (  <ThemeContext.Provider value={{ theme, setTheme }}>  {children}  </ThemeContext.Provider>  );  
}  function ThemedButton() {  const { theme, setTheme } = useContext(ThemeContext);  return (  <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>  The button is {theme}  </button>  );  
}

4.?useReducer

????????當組件中的狀態邏輯變得復雜時，使用useReducer可以使得狀態管理更加清晰。

import React, { useReducer } from 'react';  function counterReducer(state, action) {  switch (action.type) {  case 'increment':  return { count: state.count + 1 };  case 'decrement':  return { count: state.count - 1 };  default:  throw new Error();  }  
}  function Counter() {  const [state, dispatch] = useReducer(counterReducer, { count: 0 });  return (  <>  <p>{state.count}</p>  <button onClick={() => dispatch({ type: 'increment' })}>  Increment  </button>  <button onClick={() => dispatch({ type: 'decrement' })}>  Decrement  </button>  </>  );  
}

自定義Hooks

????????自定義Hooks的創建非常直接，它本質上就是一個函數，它的名字以use開頭，并且可以在這個函數內部調用其他的Hooks。通過自定義Hooks，你可以將組件邏輯抽象成可復用的函數，從而提高代碼的可維護性和復用性。

示例：

import React, { useState, useEffect } from 'react';  // 自定義Hooks：useFetch  
function useFetch(url) {  const [data, setData] = useState(null);  const [error, setError] = useState(null);  const [isLoading, setIsLoading] = useState(false);  useEffect(() => {  const fetchData = async () => {  setIsLoading(true);  try {  const response = await fetch(url);  if (!response.ok) {  throw new Error('Network response was not ok');  }  const json = await response.json();  setData(json);  } catch (error) {  setError(error);  }  setIsLoading(false);  };  fetchData();  }, [url]); // 依賴項數組中包含url，表示當url變化時重新執行effect  return { data, error, isLoading };  
}  // 使用自定義Hooks的組件  
function UserProfile({ userId }) {  const { data: userData, error, isLoading } = useFetch(`https://api.example.com/users/${userId}`);  if (error) {  return <div>Error: {error.message}</div>;  }  if (isLoading) {  return <div>Loading...</div>;  }  return (  <div>  <h1>{userData.name}</h1>  <p>{userData.email}</p>  </div>  );  
}

????????在這個例子中，useFetch是一個自定義Hooks，它接收一個URL作為參數，并返回一個對象，該對象包含加載的數據（data）、錯誤信息（error）和加載狀態（isLoading）。UserProfile組件使用這個自定義Hooks來異步加載用戶數據，并根據加載狀態和數據內容渲染不同的UI。

????????自定義Hooks的優勢在于它們能夠封裝復雜的邏輯，使得組件更加簡潔和易于理解。同時，由于Hooks的復用性，你可以在不同的組件中重復使用相同的邏輯，而不必每次都重寫相同的代碼。