你應該知道的Hooks知識

Hooks

Hooks 是 React16.8 的新增特性，能夠在不寫 class 的情況下使用 state 以及其他特性。

動機

  • 在組件之間復用狀態(tài)邏輯很難
  • 復雜組件變得難以理解
  • 難以理解的 class

Hooks 規(guī)則

  • 只有在最頂層使用 Hooks不要再循環(huán)/條件/嵌套函數(shù)中使用`
  • 只有在 React 函數(shù)中調(diào)用 Hooks

函數(shù)組件和類組件的不同

函數(shù)組件能夠捕獲到當前渲染的所用的值。

點擊查看示例

對于類組件來說，雖然 props是一個不可變的數(shù)據(jù)，但是 this是一個可變的數(shù)據(jù)，在我們渲染組件的時候 this 發(fā)生了改變，所以 this.props 發(fā)生了改變，因此在 this.showMessage 中會拿到最新的 props 值。

對于函數(shù)組件來說捕獲了渲染所使用的值，當我們使用 hooks 時，這種特性也同樣的試用于 state 上。

點擊查看示例

const showMessage = () => {
    alert("寫入：" + message);
};

const handleSendClick = () => {
    setTimeout(showMessage, 3000);
};

const handleMessageChange = (e) => {
    setMessage(e.target.value);
};

如果我們想跳出'函數(shù)組件捕獲當前渲染的所用值‘這個特性，我們可以采用 ref 來追蹤某些數(shù)據(jù)。通ref.current可以獲取到最新的值

const showMessage = () => {
    alert("寫入：" + ref.current);
};

const handleSendClick = () => {
    setTimeout(showMessage, 3000);
};

const handleMessageChange = (e) => {
    setMessage(e.target.value);
    ref.current = e.target.value;
};

useEffect

useEffect 能夠在函數(shù)組件中執(zhí)行副作用操作(數(shù)據(jù)獲取/涉及訂閱)，其實可以把 useEffect 看作是 componentDidMount / componentDidUpdate / componentWillUnMount 的組合

  • 第一個參數(shù)是一個 callback，返回 destory。destory 作為下一個 callback 執(zhí)行前調(diào)用，用于清除上一次 callback 產(chǎn)生的副作用
  • 第二個參數(shù)是依賴項，一個數(shù)組，可以有多個依賴項。依賴項改變，執(zhí)行上一個 callback 返回的 destory，和執(zhí)行新的 effect 第一個參數(shù) callback

對于 useEffect 的執(zhí)行，React 處理邏輯是采用異步調(diào)用的，對于每一個 effect 的 callback 會像 setTimeout 回調(diào)函數(shù)一樣，放到任務隊列里面，等到主線程執(zhí)行完畢才會執(zhí)行。所以 effect 的回調(diào)函數(shù)不會阻塞瀏覽器繪制視圖

  1. 相關(guān)的生命周期替換方案
  • componentDidMount 替代方案
React.useEffect(()=>{
    //請求數(shù)據(jù)，事件監(jiān)聽，操縱DOM
},[]) //dep=[]，只有在初始化執(zhí)行
/* 
  因為useEffect會捕獲props和state，
  所以即使是在回調(diào)函數(shù)中我們拿到的還是最初的props和state
*/
  • componentDidUnmount 替代方案
React.useEffect(()=>{
    /* 請求數(shù)據(jù) ， 事件監(jiān)聽 ， 操縱dom ， 增加定時器，延時器 */
    return function componentWillUnmount(){
        /* 解除事件監(jiān)聽器 ，清除定時器，延時器 */
    }
},[])/* 切記 dep = [] */

//useEffect第一個函數(shù)的返回值可以作為componentWillUnmount使用
  • componentWillReceiveProps 替代方案
    其實兩者的執(zhí)行時機是完全不同的，一個在 render 階段，一個在 commit 階段，useEffect 會初始化執(zhí)行一次，但是 componentWillReceiveProps 只會在 props 變化時執(zhí)行更新
React.useEffect(()=>{
    console.log('props變化：componentWillReceiveProps')
},[ props ])
  • componentDidUpdate 替代方案
    useEffect 和 componentDidUpdate 在執(zhí)行時期雖然有點差別，useEffect 是異步執(zhí)行，componentDidUpdate 是同步執(zhí)行 ，但都是在 commit 階段
React.useEffect(()=>{
    console.log('組件更新完成：componentDidUpdate ')     
}) //沒有dep依賴項，沒有第二個參數(shù)，那么每一次執(zhí)行函數(shù)組件，都會執(zhí)行該 effect。
  1. 在 useEffect 中[]需要處理什么

React 官網(wǎng) FAQ這樣說：

只有當函數(shù)(以及它所調(diào)用的函數(shù))不引用 props、state 以及由它們衍生而來的值時，你才能放心地把它們從依賴列表中省略，使用 eslint-plugin-react-hooks 幫助我們的代碼做一個校驗

點擊查看詳細示例

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

  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{count}</h1>;
}
//只會做一次更新，然后定時器不再轉(zhuǎn)動
  1. 是否應該把函數(shù)當做 effect 的依賴
const loadResourceCatalog = async () => {
    if (!templateType) return
    const reqApi = templateType === TEMPLATE_TYPE.STANDARD ? 'listCatalog' : 'getCodeManageCatalog'
    const res: any = await API[reqApi]()
    if (!res.success) return
    setCatalog(res.data)
}

useEffect(() => {
    loadResourceCatalog();
}, [])
//在函數(shù)loadResourceCatalog中使用了templateType這樣的一個state
//在開發(fā)的過程中可能會忘記函數(shù)loadResourceCatalog依賴templateType值

第一個簡單的解法，對于某些只在 useEffect 中使用的函數(shù)，直接定義在 effect 中，以至于能夠直接依賴某些 state

useEffect(() => {
    const loadResourceCatalog = async () => {
        if (!templateType) return
        const reqApi = templateType === TEMPLATE_TYPE.STANDARD ? 'listCatalog' : 'getCodeManageCatalog'
        const res: any = await API[reqApi]()
        if (!res.success) return
        setCatalog(res.data)
    }
    loadResourceCatalog();
}, [templateType])

假如我們需要在很多地方用到我們定義的函數(shù)，不能夠把定義放到當前的 effect 中，并且將函數(shù)放到了第二個的依賴參數(shù)中，那這個代碼將就進入死循環(huán)。因為函數(shù)在每一次渲染中都返回一個新的引用

const Template = () => {
    const getStandardTemplateList = async () => {
        const res: any = await API.getStandardTemplateList()
      if (!res.success) return;
        const { data } = res;
        setCascaderOptions(data);
        getDefaultOption(data[0])
    }
    useEffect(()=>{
        getStandardTemplateList()
    }, [])
}

針對這種情況，如果當前函數(shù)沒有引用任何組件內(nèi)的任何值，可以將該函數(shù)提取到組件外面去定義，這樣就不會組件每次 render 時不會再次改變函數(shù)引用。

const getStandardTemplateList = async () => {
    const res: any = await API.getStandardTemplateList()
  if (!res.success) return;
    const { data } = res;
    setCascaderOptions(data);
    getDefaultOption(data[0])
}

const Template = () => {
    useEffect(()=>{
        getStandardTemplateList()
    }, [])
}

如果說當前函數(shù)中引用了組件內(nèi)的一些狀態(tài)值，可以采用 useCallBack 對當前函數(shù)進行包裹

const loadResourceCatalog = useCallback(async () => {
    if (!templateType) return
    const reqApi = templateType === TEMPLATE_TYPE.STANDARD ? 'listCatalog' : 'getCodeManageCatalog'
    const res: any = await API[reqApi]()
    if (!res.success) return
    setCatalog(res.data)
}, [templateType])

useEffect(() => {
    loadResourceCatalog();
}, [loadResourceCatalog])
//通過useCallback的包裹，如果templateType保持不變，那么loadResourceCatalog也會保持不變，所以useEffect也不會重新運行
//如果templateType改變，那么loadResourceCatalog也會改變，所以useEffect也會重新運行

useCallback

React 官網(wǎng)定義

useCallback(fn, deps)

返回一個 memoized 回調(diào)函數(shù)，該回調(diào)函數(shù)僅在某個依賴項改變時才會更新

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

const CallBackTest = () => {
  const [count, setCount] = useState(0);
  const [total, setTotal] = useState(0);
  const handleCount = () => setCount(count + 1);
  //const handleCount = useCallback(() => setCount(count + 1), [count]);
  const handleTotal = () => setTotal(total + 1);

  return (
    <div>
      <div>Count is {count}</div>
      <div>Total is {total}</div>
      

      <div>
        <Child onClick={handleCount} label="Increment Count" />
        <Child onClick={handleTotal} label="Increment Total" />
      </div>
    </div>
  );
};

const Child = React.memo(({ onClick, label }) => {
  console.log(`${label} Child Render`);
  return <button onClick={onClick}>{label}</button>;
});

export default CallBackTest;

點擊查看詳細示例

React.memo 是通過記憶組件渲染結(jié)果的方式來提高性能，memo 是 react16.6 引入的新屬性，通過淺比較(源碼通過 Object.is 方法比較)當前依賴的 props 和下一個 props 是否相同來決定是否重新渲染；如果使用過類組件方式，就能知道 memo 其實就相當于 class 組件中的 React.PureComponent，區(qū)別就在于 memo 用于函數(shù)組件。useCallback 和 React.memo 一定要結(jié)合使用才能有效果。

使用場景

  • 作為 props，傳遞給子組件，為避免子元素不必要的渲染，需要配合 React.Memo 使用，否則無意義
  • 作為 useEffect 的依賴項，需要進行比較的時候才需要加上 useCallback

useMemo

React 官網(wǎng)定義

返回一個 memoized 值

僅會在某個依賴項改變時才重新計算 memoized 值，這種優(yōu)化有助于避免在每次渲染時都進行高開銷的計算 useCallback(fn, deps) 相當于useMemo(() => fn, deps)，對于實現(xiàn)上，基本上是和 useCallback 相似，只是略微有些不同

使用場景

  • 避免在每次渲染時都進行高開銷的計算

兩個 hooks 內(nèi)置于 React 都有特別的原因：

1.引用相等

當在 React 函數(shù)組件中定義一個對象時，它跟上次定義的相同對象，引用是不一樣的（即使它具有所有相同值和相同屬性）

  • 依賴列表
  • React.memo

大多數(shù)時候，你不需要考慮去優(yōu)化不必要的重新渲染，因為優(yōu)化總會帶來成本。

  1. 昂貴的計算
    計算成本很高的同步計算值的函數(shù)

總結(jié)

本文介紹了 hooks 產(chǎn)生動機、函數(shù)組件和類組件的區(qū)別以及 useEffect / useCallback / useMemo 等內(nèi)容。重點介紹了 useEffect 的生命周期替換方案以及是否把函數(shù)作為 useEffect 的第二參數(shù)。

參考鏈接

When to useMemo and useCallback

How to fetch data with React Hooks

A Complete Guide to useEffect

How Are Function Components Different from Classes?

useCallback、useMemo 分析 & 差別

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容