React實現(xiàn)控制減少useContext導(dǎo)致非必要的渲染詳解
前言
在我們使用useContext來進行數(shù)據(jù)流管理時，每當(dāng)context更新時，所有使用到該context的組件都會重新渲染。如果我們的context的數(shù)據(jù)是由多個部分組成的，但只有其中一兩個字段會頻繁更新，但其他的數(shù)據(jù)都比較穩(wěn)定時，這時，即使組件值使用到了比較穩(wěn)定的那部分數(shù)據(jù)，但它依然會頻繁渲染，這就很容易會導(dǎo)致性能問題。我們一般會使用拆分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ù)更新時，才會觸發(fā)渲染，而不需要關(guān)心InstableStateContext
2.使用useMemo包裹函數(shù)
useMemo可以傳入一個數(shù)據(jù)生成函數(shù)和依賴項，它可以使數(shù)據(jù)生成函數(shù)當(dāng)且僅當(dāng)依賴性發(fā)生變化時，才會重新計算要生成的數(shù)據(jù)的值。我們可以將組件的返回值使用useMemo進行包裹，把要使用的數(shù)據(jù)作為依賴項傳入
const {state}= useContext(AppContext);
return useMemo(() => <span>data:{state.depData}</span>, [state.depData]);
在上面的例子中，當(dāng)且僅當(dāng)depData發(fā)生變化時，該組件才會重新渲染。
雖然上面兩種方法都可以減少一些不必要的渲染，但寫起來總覺得不夠優(yōu)雅（很麻煩）。下面我們來講講另一種減少使用useContext導(dǎo)致的不必要渲染的方法。
使用發(fā)布訂閱減少使用useContext導(dǎo)致的不必要渲染
我們有沒有辦法做到只有在我們使用到的context數(shù)據(jù)發(fā)生變化時，才去觸發(fā)渲染，而不需要使用useMemo進行繁瑣的包裹呢。
我們可以創(chuàng)建這么一個store，它擁有一個getState方法可以用來獲取context中存儲的數(shù)據(jù)。
const [state, dispatch] = useReducer(this.reducer, initState);
const store = {
getState: () => state,
dispatch,
}
我們使用useMemo對store的值進行包裹，且deps為空數(shù)組：
const [state, dispatch] = useReducer(this.reducer, initState);
const store =useMemo(() => ({
getState: () => state,
dispatch,
}),[]);
這樣store的值的引用便不會發(fā)生改變，如果把store作為context.Provider的value值進行傳遞：
Provider = (props: ProviderProps) => {
const { children, initState = {} } = props;
const [state, dispatch] = useReducer(this.reducer, initState);
//store值不會更新，所以不會觸發(fā)渲染
const store = useMemo(
() => ({
getState: () => cloneDeep(state),
dispatch,
}),
[],
);
return <this.context.Provider value={store}>{children}</this.context.Provider>;
};
這樣Provider下的組件便不會因為state的變化而觸發(fā)渲染。但這樣的話，因為store的值沒有發(fā)生變化，provider內(nèi)的組件便沒有辦法得知該何時去渲染了。這時我們引入發(fā)布訂閱模式，來通知組件該何時渲染。當(dāng)state發(fā)生變化時，我們會觸發(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值不會更新，所以不會觸發(fā)渲染
const store = useMemo(
() => ({
getState: () => cloneDeep(state),
dispatch,
}),
[],
);
return <this.context.Provider value={store}>{children}</this.context.Provider>;在下面講到的useSelector中會訂閱此事件來告知組件需要重新渲染了。
接下來我們會實現(xiàn)一個useSelector方法，作為我們在組件內(nèi)獲取state中的數(shù)據(jù)的橋梁，他接收一個selector函數(shù)作為參數(shù)，如：
const a = useSelector(state=>state.a)
這樣，我們就可以獲取到state中的a。接下來我們要做的就是如何使得當(dāng)state.a更新時，組件能夠觸發(fā)渲染，同時獲取到最新的a。
上面說到，在useSelector中，我們會訂閱stageChange事件，這時，我們會檢查selector選中的數(shù)據(jù)有沒有發(fā)生變化，有的話便使用forceUpdate進行強制渲染；
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ā)生變化時，檢查當(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的原理也很簡單，通過變更一個無用的狀態(tài)來觸發(fā)組件更新：
const useForceUpdate = () => {
const [_, setState] = useState(false);
return () => setState((val) => !val);
};
就這樣，當(dāng)我們在組件時使用useSelector時獲取數(shù)據(jù)時，只有在selector選中的數(shù)據(jù)被更新時，組件才會重新渲染。
到此這篇關(guān)于React實現(xiàn)控制減少useContext導(dǎo)致非必要的渲染詳解的文章就介紹到這了,更多相關(guān)React useContext內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React中hook函數(shù)與useState及useEffect的使用
這篇文章主要介紹了React中hook函數(shù)與useState及useEffect的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
詳解webpack + react + react-router 如何實現(xiàn)懶加載
這篇文章主要介紹了詳解webpack + react + react-router 如何實現(xiàn)懶加載,具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-11-11
本篇文章主要介紹了在React 組件中使用Echarts的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了React+CSS?實現(xiàn)繪制豎狀柱狀圖，文章圍繞主題展開詳細的內(nèi)容介紹。具有一定的參考價值，需要的朋友可以參考一下2022-09-09
這篇文章主要介紹了React 添加引用路徑時如何使用@符號作為src文件,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
React-Native中禁用Navigator手勢返回的示例代碼
本篇文章主要介紹了React-Native中禁用Navigator手勢返回的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-09-09
本文主要介紹了React里的Fragment標(biāo)簽的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了react中使用video.js的踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
本篇文章主要介紹了React-router v4 路由配置方法小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
jsoneditor二次封裝實時預(yù)覽json編輯器組件react版
這篇文章主要為大家介紹了jsoneditor二次封裝實時預(yù)覽json編輯器組件react版示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10