快捷導(dǎo)航

React實(shí)現(xiàn)控制減少useContext導(dǎo)致非必要的渲染詳解

更新時(shí)間：2022年11月10日 14:02:29 作者：CBDxin

這篇文章主要介紹了React如何有效減少使用useContext導(dǎo)致的不必要渲染,使用useContext在改變一個(gè)數(shù)據(jù)時(shí)，是通過自己逐級(jí)查找對(duì)比改變的數(shù)據(jù)然后渲染，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

在我們使用useContext來進(jìn)行數(shù)據(jù)流管理時(shí)，每當(dāng)context更新時(shí)，所有使用到該context的組件都會(huì)重新渲染。如果我們的context的數(shù)據(jù)是由多個(gè)部分組成的，但只有其中一兩個(gè)字段會(huì)頻繁更新，但其他的數(shù)據(jù)都比較穩(wěn)定時(shí)，這時(shí)，即使組件值使用到了比較穩(wěn)定的那部分?jǐn)?shù)據(jù)，但它依然會(huì)頻繁渲染，這就很容易會(huì)導(dǎo)致性能問題。我們一般會(huì)使用拆分context或者結(jié)合useMemo來減少組件渲染的次數(shù)：

1.拆分context

我們可以通過將context拆分為承載不穩(wěn)定數(shù)據(jù)的instableContext和承載穩(wěn)定數(shù)據(jù)的stableContext。

const InstableStateContext = React.createContext();
const StableStateContext = React.createContext();
function Provider({children}) {
  const [instableState, instableDispatch] = React.useState();
  const [stableState, stableDispatch] = React.useState();
return (
    <StableStateContext.Provider value={{state:stableState, dispatch:stableDispatch}}>
      <InstableStateContext.Provider value={{state:instableState, dispatch:instableDispatch}}>
        {children}
      </InstableStateContext.Provider>  
    </StableStateContext.Provider>
  )
}

在只使用穩(wěn)定數(shù)據(jù)的組件中，我們只去使用stableContext，

//stableComponent.js
function stableComponent() {
  const {state} = React.useContext(StableStateContext);
  return ...;
}

這能夠讓stableComponent.js只有在StableStateContext中的數(shù)據(jù)更新時(shí)，才會(huì)觸發(fā)渲染，而不需要關(guān)心InstableStateContext

2.使用useMemo包裹函數(shù)

useMemo可以傳入一個(gè)數(shù)據(jù)生成函數(shù)和依賴項(xiàng)，它可以使數(shù)據(jù)生成函數(shù)當(dāng)且僅當(dāng)依賴性發(fā)生變化時(shí)，才會(huì)重新計(jì)算要生成的數(shù)據(jù)的值。我們可以將組件的返回值使用useMemo進(jìn)行包裹，把要使用的數(shù)據(jù)作為依賴項(xiàng)傳入

const {state}= useContext(AppContext);
return useMemo(() => <span>data:{state.depData}</span>, [state.depData]);

在上面的例子中，當(dāng)且僅當(dāng)depData發(fā)生變化時(shí)，該組件才會(huì)重新渲染。

雖然上面兩種方法都可以減少一些不必要的渲染，但寫起來總覺得不夠優(yōu)雅（很麻煩）。下面我們來講講另一種減少使用useContext導(dǎo)致的不必要渲染的方法。

使用發(fā)布訂閱減少使用useContext導(dǎo)致的不必要渲染

我們有沒有辦法做到只有在我們使用到的context數(shù)據(jù)發(fā)生變化時(shí)，才去觸發(fā)渲染，而不需要使用useMemo進(jìn)行繁瑣的包裹呢。
我們可以創(chuàng)建這么一個(gè)store，它擁有一個(gè)getState方法可以用來獲取context中存儲(chǔ)的數(shù)據(jù)。

const [state, dispatch] = useReducer(this.reducer, initState);
const store = {
        getState: () => state,
        dispatch,
      }

我們使用useMemo對(duì)store的值進(jìn)行包裹，且deps為空數(shù)組：

const [state, dispatch] = useReducer(this.reducer, initState);
const store =useMemo(() => ({
        getState: () => state,
        dispatch,
      }),[]);

這樣store的值的引用便不會(huì)發(fā)生改變，如果把store作為context.Provider的value值進(jìn)行傳遞：

  Provider = (props: ProviderProps) => {
    const { children, initState = {} } = props;
    const [state, dispatch] = useReducer(this.reducer, initState);
    //store值不會(huì)更新，所以不會(huì)觸發(fā)渲染
    const store = useMemo(
      () => ({
        getState: () => cloneDeep(state),
        dispatch,
      }),
      [],
    );
    return <this.context.Provider value={store}>{children}</this.context.Provider>;
  };

這樣Provider下的組件便不會(huì)因?yàn)閟tate的變化而觸發(fā)渲染。但這樣的話，因?yàn)閟tore的值沒有發(fā)生變化，provider內(nèi)的組件便沒有辦法得知該何時(shí)去渲染了。這時(shí)我們引入發(fā)布訂閱模式，來通知組件該何時(shí)渲染。當(dāng)state發(fā)生變化時(shí)，我們會(huì)觸發(fā)stageChange事件：

  Provider = (props: ProviderProps) => {
    const { children, initState = {} } = props;
    const [state, dispatch] = useReducer(this.reducer, initState);
    useEffect(() => {
      //告知useSelector，state已更新，讓它觸發(fā)forceUpdate
      this.emit('stateChange');
    }, [state]);
    //store值不會(huì)更新，所以不會(huì)觸發(fā)渲染
    const store = useMemo(
      () => ({
        getState: () => cloneDeep(state),
        dispatch,
      }),
      [],
    );
    return <this.context.Provider value={store}>{children}</this.context.Provider>;

在下面講到的useSelector中會(huì)訂閱此事件來告知組件需要重新渲染了。
接下來我們會(huì)實(shí)現(xiàn)一個(gè)useSelector方法，作為我們?cè)诮M件內(nèi)獲取state中的數(shù)據(jù)的橋梁，他接收一個(gè)selector函數(shù)作為參數(shù)，如：

const a = useSelector(state=>state.a)

這樣，我們就可以獲取到state中的a。接下來我們要做的就是如何使得當(dāng)state.a更新時(shí)，組件能夠觸發(fā)渲染，同時(shí)獲取到最新的a。
上面說到，在useSelector中，我們會(huì)訂閱stageChange事件，這時(shí)，我們會(huì)檢查selector選中的數(shù)據(jù)有沒有發(fā)生變化，有的話便使用forceUpdate進(jìn)行強(qiáng)制渲染；

  useSelector: UseSelector = (selector) => {
    const forceUpdate = useForceUpdate();
    const store = useContext<any>(this.context);
    const latestSelector = useRef(selector);
    const latestSelectedState = useRef(selector(store.getState()));
    if (!store) {
      throw new Error('必須在Provider內(nèi)使用useSelector');
    }
    latestSelector.current = selector;
    latestSelectedState.current = selector(store.getState());
    useEffect(() => {
      const checkForUpdates = () => {
        const newSelectedState = latestSelector.current(store.getState());
        //state發(fā)生變化時(shí)，檢查當(dāng)前selectedState和更新后的SelectedState是否一致，不一致則觸發(fā)渲染
        if (!isEqual(newSelectedState, latestSelectedState.current)) {
          forceUpdate();
        }
      };
      this.on('stateChange', checkForUpdates);
      return () => {
        this.off('stateChange', checkForUpdates);
      };
    }, [store]);
    return latestSelectedState.current;
  };

forceUpdate的原理也很簡(jiǎn)單，通過變更一個(gè)無用的狀態(tài)來觸發(fā)組件更新：

const useForceUpdate = () => {
  const [_, setState] = useState(false);
  return () => setState((val) => !val);
};

就這樣，當(dāng)我們?cè)诮M件時(shí)使用useSelector時(shí)獲取數(shù)據(jù)時(shí)，只有在selector選中的數(shù)據(jù)被更新時(shí)，組件才會(huì)重新渲染。

到此這篇關(guān)于React實(shí)現(xiàn)控制減少useContext導(dǎo)致非必要的渲染詳解的文章就介紹到這了,更多相關(guān)React useContext內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: