React使用Context的一些優(yōu)化建議

更新時(shí)間：2024年04月10日 08:57:57 作者：奇舞精選

Context?提供了一個(gè)無需為每層組件手動(dòng)添加?props,就能在組件樹間進(jìn)行數(shù)據(jù)傳遞的方法,本文為大家整理了React使用Context的一些優(yōu)化建議,希望對(duì)大家有所幫助

常用 API

React.createContext

const MyContext = React.createContext(defaultValue);

創(chuàng)建一個(gè) Context 對(duì)象。當(dāng) React 渲染一個(gè)訂閱了這個(gè) Context 對(duì)象的組件，這個(gè)組件會(huì)從組件樹中離自身最近的那個(gè)匹配的 Provider 中讀取到當(dāng)前的 context 值。

Context.Provider

<MyContext.Provider value={/* 某個(gè)值 */}>

每個(gè) Context 對(duì)象都會(huì)返回一個(gè) Provider React 組件，它允許消費(fèi)組件訂閱 context 的變化。

Provider 接收一個(gè) value 屬性，傳遞給消費(fèi)組件。一個(gè) Provider 可以和多個(gè)消費(fèi)組件有對(duì)應(yīng)關(guān)系。多個(gè) Provider 也可以嵌套使用，里層的會(huì)覆蓋外層的數(shù)據(jù)。

useContext

const store = useContext(MyContext)

接收一個(gè) context 對(duì)象（React.createContext 的返回值）并返回該 context 的當(dāng)前值。當(dāng)前的 context 值由上層組件中距離當(dāng)前組件最近的 <MyContext.Provider> 的 value prop 決定。

當(dāng) Provider 的 value 值發(fā)生變化時(shí)，它內(nèi)部的所有消費(fèi)組件都會(huì)重新渲染

了解了 API 后，我們來看一個(gè)簡單的例子。

示例

index.js

const MyContext = React.createContext(null);

function reducer(state, action) {
  switch (action.type) {
    case 'addCount': {
      return {
        ...state,
        count: state.count + 1
      }
    }
    case 'addNum': {
      return {
        ...state,
        num: state.num + 1
      }
    }
    default: return state;
  }
}

const MyProvider = ({ children }) => {
  const [store, dispatch] = useReducer(reducer, { count: 0, num: 0 })
  return <MyContext.Provider value={{store, dispatch}}>{children}</MyContext.Provider>
};

export default () => {
  return (
    <MyProvider>
      <ChildCount />
      <ChildNum />
      <Child  />
    </MyProvider>
  );
}

ChildCount.js

export default () => {
    const { state, dispatch } = React.useContext(MyContext);
    console.log('re-render ChildCount', state.count)
    return (
      <>
        <div>count is: {state.count}</div>
        <button onClick={() => dispatch({ type: 'addCount' })}> AddCount </button>
      </>
    )
}

ChildNum.js

export default () => {
    const { state, dispatch } = React.useContext(MyContext);
    console.log('re-render ChildNum', state.num)
    return (
      <>
        <div>num is: {state.num}</div>
        <button onClick={() => dispatch({ type: 'addNum' })}> AddNum </button>
      </>
    )
}

Child.js

export default () => {
  console.log('re-render Child')
  return <div>Child</div>
}

點(diǎn)擊 AddCount 按鈕，輸出：

re-render ChildCount 1re-render ChildNum 0

點(diǎn)擊 AddNum 按鈕，輸出：

re-render ChildCount 1re-render ChildNum 1

我們可以發(fā)現(xiàn)，Context.Provider 下的所有消費(fèi)組件，在 Provider.value 變化后，都會(huì) re-render

改變 count 、num 任意一個(gè)值，ChildCount，ChildNum 都會(huì) re-render

針對(duì)以上 re-render 情況，有以下方案可以優(yōu)化

優(yōu)化

針對(duì)子組件做函數(shù)記憶

React.memo

我們?nèi)缦滦薷乃械?Child 組件

export default React.memo(() => {
    const { state, dispatch } = React.useContext(MyContext);
    console.log('re-render ChildCount', state.count)
    return (
      <>
        <div>count is: {state.count}</div>
        <button onClick={() => dispatch({ type: 'addCount' })}> AddCount </button>
      </>
    )
})

點(diǎn)擊 AddCount 后發(fā)現(xiàn)，依然打印出

re-render ChildCount 1
re-render ChildNum 0

我們重新認(rèn)識(shí)下 React.memo

React.memo 默認(rèn)情況下僅僅對(duì)傳入的 props 做淺比較，如果是內(nèi)部自身狀態(tài)更新(useState, useContext等)，依然會(huì)重新渲染，在上面的例子中，useContext 返回的 state 一直在變化，導(dǎo)致就算被 memo 包裹的組件依然觸發(fā)更新了。

useMemo

我們?nèi)缦滦薷乃械?Child 組件

export default () => {
    const { state, dispatch } = React.useContext(MyContext);
    return useMemo(() => {
      console.log('re-render ChildCount', state.count)
      return (
          <>
            <div>count is: {state.count}</div>
            <button onClick={() => dispatch({ type: 'addCount' })}> AddCount </button>
          </>
      )
    }, [state.count, dispatch])
}

點(diǎn)擊 addCount 后發(fā)現(xiàn)，只打印出了

re-render ChildCount 1

點(diǎn)擊 addNum 后發(fā)現(xiàn)，只打印出了

re-render ChildNum 1

useMemo 可以做更細(xì)粒度的緩存，我們可以在依賴數(shù)組里來管理組件是否更新

我們可以思考一下，有沒有一種辦法，不用 useMemo 也可以做到按需渲染。就像 react-redux 中 useSelector 一樣實(shí)現(xiàn)按需渲染

動(dòng)手實(shí)現(xiàn) useSelector

我們先想一下，在上面的例子中，觸發(fā)子組件re-render的原因是什么？

沒錯(cuò)就是因?yàn)?Provider.value 的值一直在變更，那我們要想個(gè)辦法讓子組件感知不到 value 的變更，同時(shí)在 value 的某個(gè)值發(fā)生變更的時(shí)候，能夠觸發(fā)消費(fèi) value 的子組件 re-render

我們使用觀察者模式實(shí)現(xiàn)

1、我們使用 useMemo 緩存首次的 value，讓子組件感知不到 value 的變化

2、如果 value 不變化，那子組件就不會(huì)re-render，此時(shí)我們需要在真正 value 變化的時(shí)候，re-render 子組件，我們需要一個(gè) hooks（useSelector） 幫助我們實(shí)現(xiàn)子組件 re-render

3、子組件在初始化時(shí)，useSelector 要幫助其訂閱 state 變更的回調(diào)函數(shù)，并返回最新的 state（函數(shù)內(nèi)部獲取前后兩次的 state 做對(duì)比，不一樣則強(qiáng)制更新組件）

4、在 Context.Provider 中創(chuàng)建一個(gè)收集子組件訂閱state變更回調(diào)的集合，在其內(nèi)部監(jiān)聽 state（value），如果變更則遍歷集合，執(zhí)行所有回調(diào)函數(shù)

基于以上，我們依次實(shí)現(xiàn)了Context.Provider, useSelector, useDispatch

Context.Provider

const MyProvider = ({children}) => {
  const [state, dispatch] = useReducer(reducer, initState);
  
  // ref state
  const stateRef = useRef(null);
  stateRef.current = state;

  // ref 訂閱回調(diào)數(shù)組
  const subscribersRef = useRef([]);

  // state 變化，遍歷執(zhí)行回調(diào)
  useEffect(() => {
    subscribersRef.current.forEach(sub => sub());
  }, [state]);

  // 緩存 value， 利用 ref 拿到最新的 state, subscribe 狀態(tài)
  const value = useMemo(
    () => ({
      dispatch,
      subscribe: cb => {
        subscribersRef.current.push(cb);
        return () => {
          subscribersRef.current = subscribersRef.current.filter(item => item !== cb);
        };
      },
      getState: () => stateRef.current
    }),
    []
  )

  return <MyContext.Provider children={children} value={value} />;
}

useSelector

export const useSelector = selector => {
  // 強(qiáng)制更新
  const [, forceRender] = useReducer(v => v + 1, 0);
  const store = useContext(MyContext);

  // 獲取當(dāng)前使用的 state
  const selectedStateRef = useRef(null)
  selectedStateRef.current = selector(store.getState());

  // 對(duì)比更新回調(diào)
  const checkForUpdates = useCallback(() => {
    // 獲取變更后的 state
    const newState = selector(store.getState());
    // 對(duì)比前后兩次 state
    if (newState !== selectedStateRef.current) forceRender({});
  }, [store]);
  
  // 訂閱 state
  useEffect(() => {
    const subscription = store.subscribe(checkForUpdates);
    return () => subscription();
  }, [store, checkForUpdates]);
  
  // 返回需要的 state
  return selectedStateRef.current;
}

useDispatch

export const useDispatch = () => {
  const store = useContext(MyContext);
  return store.dispatch
}

我們用上面重寫的 API，改寫下剛開始的例子

index.js

export default () => {
    return (
      <MyProvider>
        <ChildCount />
        <ChildNum />
        <Child />
      </Provider>
    );
}

ChildCount.js

export default () => {
    const dispatch = useDispatch();
    const count = useSelector(state => state.count);
    console.log('re-render ChildCount', count)
    return (
      <>
        <div>count is: {count}</div>
        <button onClick={() => dispatch({ type: 'addCount' });}> AddCount </button>
      </>
    )
};

ChildNum.js

export default () => {
    const dispatch = useDispatch();
    const num = useSelector(state => state.num);
    console.log('re-render ChildNum', num)
    return (
      <>
        <div>num is: {num}</div>
        <button onClick={() => dispatch({ type: 'addNum' });}> AddNum </button>
      </>
    )
}

Child.js

export default () => {
    console.log('re-render Child')
    return <div>Child</div>
}

點(diǎn)擊AddCount: 只打印了 re-render ChildCount 1

點(diǎn)擊AddNum: 只打印了 re-render ChildNum 1

以上通過對(duì) Context 使用中的一些思考，我們簡單的實(shí)現(xiàn)了 useSelector，實(shí)現(xiàn)了 Context 組件的按需渲染

總結(jié)

在使用 Context API 的時(shí)候，要避免不必要的re-render，可以使用 useMemo 做細(xì)粒度更新，也可以使用 useSelector 實(shí)現(xiàn)按需渲染

以上就是React使用Context的一些優(yōu)化建議的詳細(xì)內(nèi)容，更多關(guān)于React Context的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React使用Context的一些優(yōu)化建議

目錄

常用 API

React.createContext

Context.Provider

useContext

示例

優(yōu)化

針對(duì)子組件做函數(shù)記憶

動(dòng)手實(shí)現(xiàn) useSelector

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具