React 中的 Hooks 是什么？

Hooks 是讓開(kāi)發(fā)人員“掛鉤”功能組件中的 React 狀態(tài)和生命周期功能的函數(shù)。它們?cè)?React 16.8 中引入，允許開(kāi)發(fā)人員在功能組件中使用狀態(tài)、上下文和其他 React 功能，而無(wú)需將它們轉(zhuǎn)換為類組件。在 hooks 之前，類組件是 React 中處理狀態(tài)、生命周期方法和其他功能的唯一方法。

Hooks 提供了一種更簡(jiǎn)潔、可讀且可重用的方式來(lái)管理功能組件中的狀態(tài)和生命周期邏輯。通過(guò)利用鉤子，React 開(kāi)發(fā)人員可以編寫(xiě)更簡(jiǎn)單、更模塊化、更易于測(cè)試的組件。

---

1. Hook 的主要類型

1.1。 useState Hook

useState 鉤子是最基本的鉤子，它允許您向功能組件添加狀態(tài)。它返回一個(gè)包含當(dāng)前狀態(tài)值的數(shù)組和一個(gè)更新該值的函數(shù)。

示例：

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

• useState 將初始狀態(tài)值作為參數(shù)（在本例中為 0），并返回一個(gè)包含狀態(tài)變量 (count) 和更新它的函數(shù) (setCount) 的數(shù)組。

1.2。 useEffect Hook

useEffect 掛鉤可讓您在函數(shù)組件中執(zhí)行副作用。這些副作用可能包括獲取數(shù)據(jù)、訂閱事件或手動(dòng)修改 DOM 等操作。它取代了類組件的生命周期方法，如 componentDidMount、componentDidUpdate 和 componentWillUnmount。

示例：

import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(timer);
  }, []); // Empty dependency array means this effect runs once, like componentDidMount

  return <p>Timer: {seconds} seconds</p>;
};

• useEffect 默認(rèn)情況下在每次渲染后運(yùn)行。但是，您可以傳遞第二個(gè)參數(shù) - 一個(gè) 依賴數(shù)組 - 來(lái)控制效果何時(shí)運(yùn)行。如果依賴數(shù)組為空，則該效果僅在組件掛載時(shí)運(yùn)行一次。

1.3。 useContext 鉤子

useContext 掛鉤允許您訪問(wèn)給定 Context 對(duì)象的上下文值。這對(duì)于通過(guò)組件樹(shù)傳遞數(shù)據(jù)非常有用，而無(wú)需在每個(gè)級(jí)別手動(dòng)傳遞 props。

示例：

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

• useContext 用于訪問(wèn) ThemedComponent 內(nèi) ThemeContext 的值，無(wú)需手動(dòng)傳遞 theme 屬性。

1.4。使用Reducer Hook

當(dāng)您需要管理更復(fù)雜的狀態(tài)邏輯時(shí)，尤其是當(dāng)下一個(gè)狀態(tài)依賴于前一個(gè)狀態(tài)時(shí)，useReducer 鉤子是 useState 的替代方案。它的工作原理與 Redux 中的減速器類似。

示例：

import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(timer);
  }, []); // Empty dependency array means this effect runs once, like componentDidMount

  return <p>Timer: {seconds} seconds</p>;
};

• useReducer 將一個(gè)reducer 函數(shù)和一個(gè)初始狀態(tài)作為參數(shù)，它返回當(dāng)前狀態(tài)和一個(gè)調(diào)度函數(shù)以將操作發(fā)送到reducer。

1.5。 useCallback 鉤子

useCallback 掛鉤返回函數(shù)的記憶版本，該函數(shù)僅在依賴項(xiàng)之一發(fā)生更改時(shí)才會(huì)更改。這可以通過(guò)防止不必要的函數(shù)重新創(chuàng)建來(lái)幫助優(yōu)化性能，特別是在將它們作為 props 傳遞給子組件時(shí)。

示例：

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);
  return <div>The current theme is {theme}</div>;
};

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
};

• useCallback 防止在每次渲染時(shí)重新創(chuàng)建handleClick 函數(shù)，從而優(yōu)化性能，尤其是在大型應(yīng)用程序中。

1.6。 useMemo Hook

useMemo 鉤子類似于 useCallback，但它返回一個(gè)記憶值而不是記憶函數(shù)。它僅在必要時(shí)重新計(jì)算值，有助于優(yōu)化性能。

示例：

import React, { useReducer } from 'react';

// Reducer function
const counterReducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

• useMemo 通過(guò)記住計(jì)算結(jié)果直到相關(guān)依賴項(xiàng)（在本例中為計(jì)數(shù)）發(fā)生變化，有助于避免昂貴的計(jì)算。

---

2. Hooks 的優(yōu)點(diǎn)

1.更簡(jiǎn)單、更簡(jiǎn)潔的代碼

掛鉤允許您在功能組件中使用狀態(tài)和其他功能，而無(wú)需編寫(xiě)基于類的組件，從而減少樣板代碼并提高組件的可讀性。

2.更好的可重用性

使用鉤子，您可以將組件邏輯提取到自定義鉤子中，從而更輕松地在不同組件之間共享邏輯，而無(wú)需重復(fù)代碼。

3.不再有“this”關(guān)鍵字

由于函數(shù)式組件中使用了鉤子，因此無(wú)需擔(dān)心 this 關(guān)鍵字，它是類組件中常見(jiàn)的混淆源。

4.改進(jìn)的代碼組織

鉤子允許您將相關(guān)邏輯保持在一起。例如，您可以使用 useEffect 來(lái)產(chǎn)生副作用，使用 useState 來(lái)管理狀態(tài)，所有這些都在同一個(gè)組件中，從而更容易推理。

---

3.結(jié)論

Hooks 是 React 的一項(xiàng)強(qiáng)大功能，它允許開(kāi)發(fā)人員在功能組件中使用狀態(tài)、生命周期方法和其他 React 功能。通過(guò)使用 useState、useEffect、useContext 和 useReducer 等鉤子，React 開(kāi)發(fā)人員可以編寫(xiě)更干凈、更易于維護(hù)和模塊化的代碼。鉤子使功能組件更加強(qiáng)大，并且可以使用狀態(tài)和副作用等現(xiàn)代功能，而無(wú)需類組件的復(fù)雜性。

---

以上是了解 React Hooks：現(xiàn)代 React 開(kāi)發(fā)指南的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！