useState

(類似Vue里面的data)

用于在函數(shù)組件中添加狀態(tài)。

返回一個(gè)包含當(dāng)前狀態(tài)值和更新狀態(tài)值的數(shù)組。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useEffect 

(類似Vue里面的mounted、destroyed)

用于在函數(shù)組件中執(zhí)行副作用操作（如數(shù)據(jù)獲取、訂閱、手動(dòng)DOM操作等）。

接收一個(gè)函數(shù)，該函數(shù)包含副作用邏輯，可以返回一個(gè)清理函數(shù)用于處理cleanup。

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();

    // Cleanup 函數(shù)（可選）
    return () => {
      // 清理邏輯...
    };
  }, []); // 依賴項(xiàng)為空數(shù)組表示僅在組件掛載和卸載時(shí)運(yùn)行
}

依賴項(xiàng)

useEffect的第二個(gè)參數(shù)是一個(gè)依賴項(xiàng)數(shù)組，用于指定哪些變量的變化會(huì)觸發(fā) useEffect 中的副作用函數(shù)的重新執(zhí)行。這個(gè)依賴項(xiàng)數(shù)組的目的是幫助 Reac t優(yōu)化性能，確保副作用函數(shù)僅在依賴項(xiàng)發(fā)生變化時(shí)執(zhí)行，而不是在每次渲染時(shí)都執(zhí)行。 

為什么需要依賴項(xiàng)數(shù)組？

避免重復(fù)執(zhí)行： 如果沒有依賴項(xiàng)數(shù)組，副作用函數(shù)會(huì)在每次組件重新渲染時(shí)都被調(diào)用，這可能導(dǎo)致不必要的性能開銷。

處理異步操作和副作用： 在 useEffect 中，我們可能會(huì)涉及異步操作、訂閱事件等副作用，而這些副作用可能與組件的狀態(tài)或?qū)傩韵嚓P(guān)。使用依賴項(xiàng)數(shù)組可以確保我們?cè)诟弊饔煤瘮?shù)中訪問到的狀態(tài)和屬性是最新的。

依賴項(xiàng)數(shù)組的不同情況

空數(shù)組

如果依賴項(xiàng)數(shù)組為空，副作用函數(shù)僅在組件掛載和卸載時(shí)執(zhí)行，相當(dāng)于類似于類組件中的componentDidMount和componentWillUnmount。

 useEffect(() => {
   // 在組件掛載時(shí)執(zhí)行
   return () => {
     // 在組件卸載時(shí)執(zhí)行
   };
 }, []);

有依賴項(xiàng)

如果依賴項(xiàng)數(shù)組不為空，副作用函數(shù)將在組件掛載時(shí)執(zhí)行一次，并在依賴項(xiàng)發(fā)生變化時(shí)執(zhí)行。

    useEffect(() => {
      // 在組件掛載時(shí)執(zhí)行
      // 在依賴項(xiàng)發(fā)生變化時(shí)執(zhí)行
      return () => {
        // 在組件卸載時(shí)執(zhí)行
      };
    }, [dependency1, dependency2]);

沒有依賴項(xiàng)數(shù)組 

如果省略依賴項(xiàng)數(shù)組，副作用函數(shù)將在每次組件重新渲染時(shí)都執(zhí)行，這可能導(dǎo)致性能問題和不必要的副作用。

    useEffect(() => {
      // 在每次組件重新渲染時(shí)執(zhí)行
      return () => {
        // 在每次組件重新渲染時(shí)執(zhí)行清理邏輯
      };
    });

注意事項(xiàng)

避免無限循環(huán)： 當(dāng)使用依賴項(xiàng)數(shù)組時(shí)，確保依賴項(xiàng)數(shù)組中的變量不會(huì)在useEffect中被修改，否則可能導(dǎo)致無限循環(huán)。

不要濫用空依賴項(xiàng)數(shù)組： 雖然空依賴項(xiàng)數(shù)組可以確保useEffect僅在組件掛載和卸載時(shí)執(zhí)行，但在一些情況下，可能需要仔細(xì)考慮是否真的需要空依賴項(xiàng)數(shù)組。

useMemo

(類似Vue里面computed)

useMemo用于記憶（緩存）計(jì)算結(jié)果，并在依賴項(xiàng)變化時(shí)重新計(jì)算。

這有助于避免不必要的重復(fù)計(jì)算，提高性能。

    import React, { useMemo } from 'react';

    function ExpensiveComponent({ prop1, prop2 }) {
      // 使用 useMemo 緩存計(jì)算結(jié)果
      const result = useMemo(() => {
        // 進(jìn)行昂貴的計(jì)算或處理
        return prop1 + prop2;
      }, [prop1, prop2]); // 依賴項(xiàng)數(shù)組

      return <p>Result: {result}</p>;
    }

useCallback

(類似Vue里面watch)

用于緩存回調(diào)函數(shù)，避免在每次渲染時(shí)重新創(chuàng)建。

接收一個(gè)回調(diào)函數(shù)和依賴項(xiàng)數(shù)組，返回緩存后的回調(diào)函數(shù)。

useCallback的依賴項(xiàng)參數(shù)用于指定哪些變量的變化會(huì)導(dǎo)致生成新的回調(diào)函數(shù)。

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

   function MemoizedComponent() {
     const [count, setCount] = useState(0);

     const handleClick = useCallback(() => {
       // 使用 count 進(jìn)行邏輯處理
       console.log(count);
     }, [count]);

     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => setCount(count + 1)}>Increment</button>
         <ChildComponent onClick={handleClick} />
       </div>
     );
   }

   function ChildComponent({ onClick }) {
     // 使用緩存后的回調(diào)函數(shù)
     return <button onClick={onClick}>Click me</button>;
   }

在這個(gè)例子中，useCallback緩存了handleClick回調(diào)函數(shù)，并且指定了依賴項(xiàng)數(shù)組為[count]。這意味著只有當(dāng)count發(fā)生變化時(shí)，handleClick才會(huì)生成新的回調(diào)函數(shù)。 

依賴項(xiàng)

為什么需要依賴項(xiàng)數(shù)組？

避免不必要的重新創(chuàng)建： 如果沒有依賴項(xiàng)數(shù)組，每次組件重新渲染時(shí)都會(huì)生成新的回調(diào)函數(shù)，即使函數(shù)體內(nèi)的邏輯不依賴于任何變量的變化。通過指定依賴項(xiàng)數(shù)組，可以控制在什么情況下生成新的回調(diào)函數(shù)。

確保閉包內(nèi)的值是最新的： 如果回調(diào)函數(shù)內(nèi)部引用了某些狀態(tài)或?qū)傩?，確保依賴項(xiàng)數(shù)組包含這些狀態(tài)或?qū)傩?，以確保閉包內(nèi)的值是最新的。

注意事項(xiàng)

空依賴項(xiàng)數(shù)組： 與useEffect類似，如果依賴項(xiàng)數(shù)組為空，表示回調(diào)函數(shù)不依賴于任何外部變量，它將永遠(yuǎn)只生成一次。

    const handleClick = useCallback(() => {
      // 處理點(diǎn)擊事件
    }, []); // 空依賴項(xiàng)數(shù)組

謹(jǐn)慎處理依賴項(xiàng)： 確保依賴項(xiàng)數(shù)組中的變量是正確的，否則可能導(dǎo)致回調(diào)函數(shù)不會(huì)在預(yù)期的時(shí)候重新生成。

性能考慮： 在大型應(yīng)用中，使用useCallback可能有助于性能優(yōu)化，但不要濫用。只有在明確存在性能問題時(shí)，才應(yīng)該考慮使用useCallback。

useReducer

(Vuex 中的 mutations)

雖然 useReducer 和 mutations 有一些區(qū)別，但它們都是用于管理組件狀態(tài)的工具。

狀態(tài)管理： useReducer 用于在函數(shù)組件中管理復(fù)雜的狀態(tài)邏輯。它可以替代 useState，特別適用于處理具有復(fù)雜更新邏輯或依賴前一個(gè)狀態(tài)的狀態(tài)。

 import React, { useReducer } from 'react';
    const initialState = { count: 0 };

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

    function Counter() {
      const [state, dispatch] = useReducer(reducer, initialState);

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

useContext

(類似Vue里面的Provider)

用于在函數(shù)組件中訪問上下文（context）。

上下文允許在組件樹中直接傳遞數(shù)據(jù)，而不必通過逐層傳遞 props。

useContext 使得在組件中獲取上下文數(shù)據(jù)變得非常方便。

創(chuàng)建上下文對(duì)象

首先，需要?jiǎng)?chuàng)建一個(gè)上下文對(duì)象，通過 React.createContext：

    import React, { createContext } from 'react';

    const MyContext = createContext();

這將創(chuàng)建一個(gè)包含 Provider 和 Consumer 的上下文對(duì)象。Provider 用于提供上下文數(shù)據(jù)，而 Consumer 用于消費(fèi)該數(shù)據(jù)。

使用 useContext 獲取上下文數(shù)據(jù)

在組件中使用 useContext 鉤子，傳入上下文對(duì)象，即可獲取上下文數(shù)據(jù)。

    import React, { useContext } from 'react';

    const MyComponent = () => {
      const contextValue = useContext(MyContext);

      return <p>{contextValue}</p>;
    };

在這個(gè)例子中，contextValue 就是從 MyContext 上下文中獲取的值。

提供上下文數(shù)據(jù)

使用 Provider 組件來提供上下文數(shù)據(jù)。Provider 接收一個(gè) value 屬性，該屬性的值將成為整個(gè)組件樹中使用該上下文的組件能夠獲取的值。

    const App = () => {
      return (
        <MyContext.Provider value="Hello, Context!">
          <MyComponent />
        </MyContext.Provider>
      );
    };

useRef

(類似Vue里面的ref)

用于在函數(shù)組件中獲取對(duì) DOM 元素或自定義組件實(shí)例的引用。

import React, { useRef, useEffect } from 'react';
 
function MyComponent() {
  // 創(chuàng)建一個(gè) ref 對(duì)象
  const myRef = useRef(null);
 
  // 使用 ref 對(duì)象引用 DOM 元素
  useEffect(() => {
    myRef.current.focus();
  }, []);
 
  return <input ref={myRef} />;
}

以上就是React中常用的一些鉤子函數(shù)總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于React鉤子函數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論