React 中的重新渲染
緣起
React 重新渲染，指的是在類函數中，會重新執行 render 函數，類似 Flutter 中的 build 函數，函數組件中，會重新執行這個函數
React 組件在組件的狀態 state 或者組件的屬性 props 改變的時候，會重新渲染，條件簡單，但是實際上稍不注意，會引起災難性的重新渲染
類組件
爲什麼拿類組件先說，怎麼說呢，更好理解？還有前幾年比較流行的一些常見面試題
React中的setState什麼時候是同步的，什麼時候是異步的
ReactsetState怎麼獲取最新的state
以下代碼的輸出值是什麼，頁面展示是怎麼變化的
test = () => {
// s1 = 1
const { s1 } = this.state;
this.setState({ s1: s1 + 1});
this.setState({ s1: s1 + 1});
this.setState({ s1: s1 + 1});
console.log(s1)
};
render() {
return (
<div>
<button onClick={this.test}>按鈕</button>
<div>{this.state.s1}</div>
</div>
);
}看到這些類型的面試問題，熟悉
React事務機制的你一定能答出來，畢竟不難嘛，哈？你不知道React的事務機制？百度 | 谷歌 | 360 | 搜狗 | 必應 React 事務機制
React 合成事件
在 React 組件觸發的事件會被冒泡到 document(在 react v17 中是 react 掛載的節點，例如 document.querySelector('#app'))，然後 React 按照觸發路徑上收集事件回調，分發事件。
-
這裏是不是突發奇想，如果禁用了，在觸發事件的節點，通過原生事件禁止事件冒泡，是不是
React事件就沒法觸發了？確實是這樣，沒法冒泡了，React都沒法收集事件和分發事件了，注意這個冒泡不是React合成事件的冒泡。 -
發散一下還能想到的另外一個點，
React，就算是在合成捕獲階段觸發的事件，依舊在原生冒泡事件觸發之後
reactEventCallback = () => {
// s1 s2 s3 都是 1
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1 });
this.setState({ s2: s2 + 1 });
this.setState({ s3: s3 + 1 });
console.log('after setState s1:', this.state.s1);
// 這裏依舊輸出 1， 頁面展示 2，頁面僅重新渲染一次
};
<button
onClick={this.reactEventCallback}
onClickCapture={this.reactEventCallbackCapture}
>
React Event
</button>
<div>
S1: {s1} S2: {s2} S3: {s3}
</div>定時器回調後觸發 setState
定時器回調執行 setState 是同步的，可以在執行 setState 之後直接獲取，最新的值，例如下面代碼
timerCallback = () => {
setTimeout(() => {
// s1 s2 s3 都是 1
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1 });
console.log('after setState s1:', this.state.s1);
// 輸出 2 頁面渲染 3 次
this.setState({ s2: s2 + 1 });
this.setState({ s3: s3 + 1 });
});
};異步函數後調觸發 setState
異步函數回調執行 setState 是同步的，可以在執行 setState 之後直接獲取，最新的值，例如下面代碼
asyncCallback = () => {
Promise.resolve().then(() => {
// s1 s2 s3 都是 1
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1 });
console.log('after setState s1:', this.state.s1);
// 輸出 2 頁面渲染 3 次
this.setState({ s2: s2 + 1 });
this.setState({ s3: s3 + 1 });
});
};原生事件觸發
原生事件同樣不受 React 事務機制影響，所以 setState 表現也是同步的
componentDidMount() {
const btn1 = document.getElementById('native-event');
btn1?.addEventListener('click', this.nativeCallback);
}
nativeCallback = () => {
// s1 s2 s3 都是 1
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1 });
console.log('after setState s1:', this.state.s1);
// 輸出 2 頁面渲染 3 次
this.setState({ s2: s2 + 1 });
this.setState({ s3: s3 + 1 });
};
<button id="native-event">Native Event</button>setState 修改不參與渲染的屬性
setState 調用就會引起就會組件重新渲染，即使這個狀態沒有參與頁面渲染，所以，請不要把非渲染屬性放 state 裏面，即使放了 state，也請不要通過 setState 去修改這個狀態，直接調用 this.state.xxx = xxx 就好，這種不參與渲染的屬性，直接掛在 this 上就好，參考下圖
// s1 s2 s3 爲渲染的屬性，s4 非渲染屬性
state = {
s1: 1,
s2: 1,
s3: 1,
s4: 1,
};
s5 = 1;
changeNotUsedState = () => {
const { s4 } = this.state;
this.setState({ s4: s4 + 1 });
// 頁面會重新渲染
// 頁面不會重新渲染
this.state.s4 = 2;
this.s5 = 2;
};
<div>
S1: {s1} S2: {s2} S3: {s3}
</div>;只是調用 setState，頁面會不會重新渲染
幾種情況，分別是：
-
直接調用
setState，無參數 -
setState，新state和老state完全一致，也就是同樣的state
sameState = () => {
const { s1 } = this.state;
this.setState({ s1 });
// 頁面會重新渲染
};
noParams = () => {
this.setState({});
// 頁面會重新渲染
};這兩種情況，處理起來和普通的修改狀態的 setState 一致，都會引起重新渲染的
多次渲染的問題
爲什麼要提上面這些，仔細看，這裏提到了很多次渲染的 3 次，比較契合我們日常寫代碼的，異步函數回調，畢竟在定時器回調或者給組件綁定原生事件（沒事找事是吧？），挺少這麼做的吧，但是異步回調就很多了，比如網絡請求啥的，改變個 state 還是挺常見的，但是渲染多次，就是不行！不過利用 setState 實際上是傳一個新對象合併機制，可以把變化的屬性合併在新的對象裏面，一次性提交全部變更，就不用調用多次 setState 了
asyncCallbackMerge = () => {
Promise.resolve().then(() => {
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 });
console.log('after setState s1:', this.state.s1);
// 輸出 2 頁面渲染1次
});
};這樣就可以在非 React 的事務流中避開多次渲染的問題
測試代碼
import React from 'react';
interface State {
s1: number;
s2: number;
s3: number;
s4: number;
}
// eslint-disable-next-line @iceworks/best-practices/recommend-functional-component
export default class TestClass extends React.Component<any, State> {
renderTime: number;
constructor(props: any) {
super(props);
this.renderTime = 0;
this.state = {
s1: 1,
s2: 1,
s3: 1,
s4: 1,
};
}
componentDidMount() {
const btn1 = document.getElementById('native-event');
const btn2 = document.getElementById('native-event-async');
btn1?.addEventListener('click', this.nativeCallback);
btn2?.addEventListener('click', this.nativeCallbackMerge);
}
changeNotUsedState = () => {
const { s4 } = this.state;
this.setState({ s4: s4 + 1 });
};
reactEventCallback = () => {
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1 });
this.setState({ s2: s2 + 1 });
this.setState({ s3: s3 + 1 });
console.log('after setState s1:', this.state.s1);
};
timerCallback = () => {
setTimeout(() => {
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1 });
console.log('after setState s1:', this.state.s1);
this.setState({ s2: s2 + 1 });
this.setState({ s3: s3 + 1 });
});
};
asyncCallback = () => {
Promise.resolve().then(() => {
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1 });
console.log('after setState s1:', this.state.s1);
this.setState({ s2: s2 + 1 });
this.setState({ s3: s3 + 1 });
});
};
nativeCallback = () => {
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1 });
console.log('after setState s1:', this.state.s1);
this.setState({ s2: s2 + 1 });
this.setState({ s3: s3 + 1 });
};
timerCallbackMerge = () => {
setTimeout(() => {
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 });
console.log('after setState s1:', this.state.s1);
});
};
asyncCallbackMerge = () => {
Promise.resolve().then(() => {
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 });
console.log('after setState s1:', this.state.s1);
});
};
nativeCallbackMerge = () => {
const { s1, s2, s3 } = this.state;
this.setState({ s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 });
console.log('after setState s1:', this.state.s1);
};
sameState = () => {
const { s1, s2, s3 } = this.state;
this.setState({ s1 });
this.setState({ s2 });
this.setState({ s3 });
console.log('after setState s1:', this.state.s1);
};
withoutParams = () => {
this.setState({});
};
render() {
console.log('renderTime', ++this.renderTime);
const { s1, s2, s3 } = this.state;
return (
<div class>
<button onClick={this.reactEventCallback}>React Event</button>
<button onClick={this.timerCallback}>Timer Callback</button>
<button onClick={this.asyncCallback}>Async Callback</button>
<button id="native-event">Native Event</button>
<button onClick={this.timerCallbackMerge}>Timer Callback Merge</button>
<button onClick={this.asyncCallbackMerge}>Async Callback Merge</button>
<button id="native-event-async">Native Event Merge</button>
<button onClick={this.changeNotUsedState}>Change Not Used State</button>
<button onClick={this.sameState}>React Event Set Same State</button>
<button onClick={this.withoutParams}>
React Event SetState Without Params
</button>
<div>
S1: {s1} S2: {s2} S3: {s3}
</div>
</div>
);
}
}函數組件
函數組件重新渲染的條件也和類組件一樣，組件的屬性 Props 和組件的狀態 State 有修改的時候，會觸發組件重新渲染，所以類組件存在的問題，函數組件同樣也存在，而且因爲函數組件的 state 不是一個對象，情況就更糟糕
React 合成事件
const reactEventCallback = () => {
// S1 S2 S3 都是 1
setS1((i) => i + 1);
setS2((i) => i + 1);
setS3((i) => i + 1);
// 頁面只會渲染一次， S1 S2 S3 都是 2
};定時器回調
const timerCallback = () => {
setTimeout(() => {
// S1 S2 S3 都是 1
setS1((i) => i + 1);
setS2((i) => i + 1);
setS3((i) => i + 1);
// 頁面只會渲染三次， S1 S2 S3 都是 2
});
};異步函數回調
const asyncCallback = () => {
Promise.resolve().then(() => {
// S1 S2 S3 都是 1
setS1((i) => i + 1);
setS2((i) => i + 1);
setS3((i) => i + 1);
// 頁面只會渲染三次， S1 S2 S3 都是 2
});
};原生事件
useEffect(() => {
const handler = () => {
// S1 S2 S3 都是 1
setS1((i) => i + 1);
setS2((i) => i + 1);
setS3((i) => i + 1);
// 頁面只會渲染三次， S1 S2 S3 都是 2
};
containerRef.current?.addEventListener('click', handler);
return () => containerRef.current?.removeEventListener('click', handler);
}, []);更新沒使用的狀態
const [s4, setS4] = useState<number>(1);
const unuseState = () => {
setS4((s) => s + 1);
// s4 === 2 頁面渲染一次 S4 頁面上沒用到
};總結
以上的全部情況，在 React Hook 中表現的情況和類組件表現完全一致，沒有任何差別，但是也有表現不一致的地方
不同的情況 設置同樣的 State
在 React Hook 中設置同樣的 State，並不會引起重新渲染，這點和類組件不一樣，但是這個不一定的，引用 React 官方文檔說法
如果你更新 State Hook 後的 state 與當前的 state 相同時，React 將跳過子組件的渲染並且不會觸發 effect 的執行。（React 使用 Object.is 比較算法 來比較 state。）
需要注意的是，React 可能仍需要在跳過渲染前渲染該組件。不過由於 React 不會對組件樹的 “深層” 節點進行不必要的渲染，所以大可不必擔心。如果你在渲染期間執行了高開銷的計算，則可以使用 useMemo 來進行優化。
官方穩定有提到，新舊 State 淺比較完全一致是不會重新渲染的，但是有可能還是會導致重新渲染
// React Hook
const sameState = () => {
setS1((i) => i);
setS2((i) => i);
setS3((i) => i);
console.log(renderTimeRef.current);
// 頁面並不會重新渲染
};
// 類組件中
sameState = () => {
const { s1, s2, s3 } = this.state;
this.setState({ s1 });
this.setState({ s2 });
this.setState({ s3 });
console.log('after setState s1:', this.state.s1);
// 頁面會重新渲染
};這個特性存在，有些時候想要獲取最新的 state，又不想給某個函數添加 state 依賴或者給 state 添加一個 useRef，可以通過這個函數去或者這個 state 的最新值
const sameState = () => {
setS1((i) => {
const latestS1 = i;
// latestS1 是當前 S1 最新的值，可以在這裏處理一些和 S1 相關的邏輯
return latestS1;
});
};React Hook 中避免多次渲染
React Hook 中 state 並不是一個對象，所以不會自動合併更新對象，那怎麼解決這個異步函數之後多次 setState 重新渲染的問題？
將全部 state 合併成一個對象
const [state, setState] = useState({ s1: 1, s2: 1, s3: 1 });
setState((prevState) => {
setTimeout(() => {
const { s1, s2, s3 } = prevState;
return { ...prevState, s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 };
});
});參考類的的 this.state 是個對象的方法，把全部的 state 合併在一個組件裏面，然後需要更新某個屬性的時候，直接調用 setState 即可，和類組件的操作完全一致，這是一種方案
使用 useReducer
雖然這個 hook 的存在感確實低，但是多狀態的組件用這個來替代 useState 確實不錯
const initialState = { s1: 1, s2: 1, s3: 1 };
function reducer(state, action) {
switch (action.type) {
case 'update':
return { s1: state.s1 + 1, s2: state.s2 + 1, s3: state.s3 + 1 };
default:
return state;
}
}
const [reducerState, dispatch] = useReducer(reducer, initialState);
const reducerDispatch = () => {
setTimeout(() => {
dispatch({ type: 'update' });
});
};具體的用法不展開了，用起來和 redux 差別不大
狀態直接用 Ref 聲明，需要更新的時候調用更新的函數（不推薦）
// S4 不參與渲染
const [s4, setS4] = useState<number>(1);
// update 就是 useReducer 的 dispatch，調用就更更新頁面，比定義一個不渲染的 state 好多了
const [, update] = useReducer((c) => c + 1, 0);
const state1Ref = useRef(1);
const state2Ref = useRef(1);
const unRefSetState = () => {
// 優先更新 ref 的值
state1Ref.current += 1;
state2Ref.current += 1;
setS4((i) => i + 1);
};
const unRefSetState = () => {
// 優先更新 ref 的值
state1Ref.current += 1;
state2Ref.current += 1;
update();
};
<div>
state1Ref: {state1Ref.current} state2Ref: {state2Ref.current}
</div>;這樣做，把真正渲染的 state 放到了 ref 裏面，這樣有個好處，就是函數里面不用聲明這個 state 的依賴了，但是壞處非常多，更新的時候必須說動調用 update，同時把 ref 用來渲染也比較奇怪
自定義 Hook
自定義 Hook 如果在組件中使用，任何自定義 Hook 中的狀態改變，都會引起組件重新渲染，包括組件中沒用到的，但是定義在自定義 Hook 中的狀態
簡單的例子，下面的自定義 hook，有 id 和 data 兩個狀態， id 甚至都沒有導出，但是 id 改變的時候，還是會導致引用這個 Hook 的組件重新渲染
// 一個簡單的自定義 Hook，用來請求數據
const useDate = () => {
const [id, setid] = useState<number>(0);
const [data, setData] = useState<any>(null);
useEffect(() => {
fetch('請求數據的 URL')
.then((r) => r.json())
.then((r) => {
// 組件重新渲染
setid((i) => i + 1);
// 組件再次重新渲染
setData(r);
});
}, []);
return data;
};
// 在組件中使用，即使只導出了 data，但是 id 變化，同時也會導致組件重新渲染，所以組件在獲取到數據的時候，組件會重新渲染兩次
const data = useDate();測試代碼
// use-data.ts
const useDate = () => {
const [id, setid] = useState<number>(0);
const [data, setData] = useState<any>(null);
useEffect(() => {
fetch('數據請求地址')
.then((r) => r.json())
.then((r) => {
setid((i) => i + 1);
setData(r);
});
}, []);
return data;
};
import { useEffect, useReducer, useRef, useState } from 'react';
import useDate from './use-data';
const initialState = { s1: 1, s2: 1, s3: 1 };
function reducer(state, action) {
switch (action.type) {
case 'update':
return { s1: state.s1 + 1, s2: state.s2 + 1, s3: state.s3 + 1 };
default:
return state;
}
}
const TestHook = () => {
const renderTimeRef = useRef<number>(0);
const [s1, setS1] = useState<number>(1);
const [s2, setS2] = useState<number>(1);
const [s3, setS3] = useState<number>(1);
const [s4, setS4] = useState<number>(1);
const [, update] = useReducer((c) => c + 1, 0);
const state1Ref = useRef(1);
const state2Ref = useRef(1);
const data = useDate();
const [state, setState] = useState({ s1: 1, s2: 1, s3: 1 });
const [reducerState, dispatch] = useReducer(reducer, initialState);
const containerRef = useRef<HTMLButtonElement>(null);
const reactEventCallback = () => {
setS1((i) => i + 1);
setS2((i) => i + 1);
setS3((i) => i + 1);
};
const timerCallback = () => {
setTimeout(() => {
setS1((i) => i + 1);
setS2((i) => i + 1);
setS3((i) => i + 1);
});
};
const asyncCallback = () => {
Promise.resolve().then(() => {
setS1((i) => i + 1);
setS2((i) => i + 1);
setS3((i) => i + 1);
});
};
const unuseState = () => {
setS4((i) => i + 1);
};
const unRefSetState = () => {
state1Ref.current += 1;
state2Ref.current += 1;
setS4((i) => i + 1);
};
const unRefReducer = () => {
state1Ref.current += 1;
state2Ref.current += 1;
update();
};
const sameState = () => {
setS1((i) => i);
setS2((i) => i);
setS3((i) => i);
console.log(renderTimeRef.current);
};
const mergeObjectSetState = () => {
setTimeout(() => {
setState((prevState) => {
const { s1: prevS1, s2: prevS2, s3: prevS3 } = prevState;
return { ...prevState, s1: prevS1 + 1, s2: prevS2 + 1, s3: prevS3 + 1 };
});
});
};
const reducerDispatch = () => {
setTimeout(() => {
dispatch({ type: 'update' });
});
};
useEffect(() => {
const handler = () => {
setS1((i) => i + 1);
setS2((i) => i + 1);
setS3((i) => i + 1);
};
containerRef.current?.addEventListener('click', handler);
return () => containerRef.current?.removeEventListener('click', handler);
}, []);
console.log('render Time Hook', ++renderTimeRef.current);
console.log('data', data);
return (
<div class>
<button onClick={reactEventCallback}>React Event</button>
<button onClick={timerCallback}>Timer Callback</button>
<button onClick={asyncCallback}>Async Callback</button>
<button id="native-event" ref={containerRef}>
Native Event
</button>
<button onClick={unuseState}>Unuse State</button>
<button onClick={sameState}>Same State</button>
<button onClick={mergeObjectSetState}>Merge State Into an Object</button>
<button onClick={reducerDispatch}>Reducer Dispatch</button>
<button onClick={unRefSetState}>useRef As State With useState</button>
<button onClick={unRefSetState}>useRef As State With useReducer</button>
<div>
S1: {s1} S2: {s2} S3: {s3}
</div>
<div>
Merge Object S1: {state.s1} S2: {state.s2} S3: {state.s3}
</div>
<div>
reducerState Object S1: {reducerState.s1} S2: {reducerState.s2} S3:{' '}
{reducerState.s3}
</div>
<div>
state1Ref: {state1Ref.current} state2Ref: {state2Ref.current}
</div>
</div>
);
};
export default TestHook;規則記不住怎麼辦？
上面羅列了一大堆情況，但是這些規則難免會記不住，React 事務機制導致的兩種完全截然不然的重新渲染機制，確實讓人覺得有點噁心，React 官方也注意到了，既然在事務流的中 setState 可以合併，那不在 React 事務流的回調，能不能也合併，答案是可以的，React 官方其實在 React V18 中， setState 能做到合併，即使在異步回調或者定時器回調或者原生事件綁定中，可以把測試代碼直接丟 React V18 的環境中嘗試，就算是上面列出的會多次渲染的場景，也不會重新渲染多次
具體可以看下這個地址
Automatic batching for fewer renders in React 18[1]
但是，有了 React V18 最好也記錄一下以上的規則，對於減少渲染次數還是很有幫助的
參考資料
[1]
Automatic batching for fewer renders in React 18: https://github.com/reactwg/react-18/discussions/21
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/ADx8PuNvg4xVVLBeh265kw