React重新渲染指的是什么
緣起
React 重新渲染，指的是在類函數(shù)中，會(huì)重新執(zhí)行 render 函數(shù)，類似 Flutter 中的 build 函數(shù)，函數(shù)組件中，會(huì)重新執(zhí)行這個(gè)函數(shù)
React 組件在組件的狀態(tài) state 或者組件的屬性 props 改變的時(shí)候，會(huì)重新渲染，條件簡(jiǎn)單，但是實(shí)際上稍不注意，會(huì)引起災(zāi)難性的重新渲染
類組件
為什么拿類組件先說，怎么說呢，更好理解？還有前幾年比較流行的一些常見面試題
React 中的 setState 什么時(shí)候是同步的，什么時(shí)候是異步的
React setState 怎么獲取最新的 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(
按鈕
{this.state.s1}
);
}
看到這些類型的面試問題，熟悉 React 事務(wù)機(jī)制的你一定能答出來，畢竟不難嘛，哈？你不知道 React 的事務(wù)機(jī)制？百度|谷歌|360|搜狗|必應(yīng) React 事務(wù)機(jī)制
React 合成事件
在 React 組件觸發(fā)的事件會(huì)被冒泡到 document(在 react v17 中是 react 掛載的節(jié)點(diǎn)，例如 document.querySelector('#app'))，然后 React 按照觸發(fā)路徑上收集事件回調(diào)，分發(fā)事件。
這里是不是突發(fā)奇想，如果禁用了，在觸發(fā)事件的節(jié)點(diǎn)，通過原生事件禁止事件冒泡，是不是 React 事件就沒法觸發(fā)了？確實(shí)是這樣，沒法冒泡了，React 都沒法收集事件和分發(fā)事件了，注意這個(gè)冒泡不是 React 合成事件的冒泡。
發(fā)散一下還能想到的另外一個(gè)點(diǎn)，React ，就算是在合成捕獲階段觸發(fā)的事件，依舊在原生冒泡事件觸發(fā)之后
reactEventCallback=()=>{
//s1s2s3都是1
const{s1,s2,s3}=this.state;
this.setState({s1:s1+1});
this.setState({s2:s2+1});
this.setState({s3:s3+1});
console.log('aftersetStates1:',this.state.s1);
//這里依舊輸出1，頁面展示2，頁面僅重新渲染一次
};
S1:{s1}S2:{s2}S3:{s3}
定時(shí)器回調(diào)后觸發(fā) setState
定時(shí)器回調(diào)執(zhí)行 setState 是同步的，可以在執(zhí)行 setState 之后直接獲取，最新的值，例如下面代碼
timerCallback=()=>{ setTimeout(()=>{ //s1s2s3都是1 const{s1,s2,s3}=this.state; this.setState({s1:s1+1}); console.log('aftersetStates1:',this.state.s1); //輸出2頁面渲染3次 this.setState({s2:s2+1}); this.setState({s3:s3+1}); }); };
異步函數(shù)后調(diào)觸發(fā) setState
異步函數(shù)回調(diào)執(zhí)行 setState 是同步的，可以在執(zhí)行 setState 之后直接獲取，最新的值，例如下面代碼
asyncCallback=()=>{
Promise.resolve().then(()=>{
//s1s2s3都是1
const{s1,s2,s3}=this.state;
this.setState({s1:s1+1});
console.log('aftersetStates1:',this.state.s1);
//輸出2頁面渲染3次
this.setState({s2:s2+1});
this.setState({s3:s3+1});
});
};
原生事件觸發(fā)
原生事件同樣不受 React 事務(wù)機(jī)制影響，所以 setState 表現(xiàn)也是同步的
componentDidMount(){
constbtn1=document.getElementById('native-event');
btn1?.addEventListener('click',this.nativeCallback);
}
nativeCallback=()=>{
//s1s2s3都是1
const{s1,s2,s3}=this.state;
this.setState({s1:s1+1});
console.log('aftersetStates1:',this.state.s1);
//輸出2頁面渲染3次
this.setState({s2:s2+1});
this.setState({s3:s3+1});
};
NativeEvent
setState 修改不參與渲染的屬性
setState 調(diào)用就會(huì)引起就會(huì)組件重新渲染，即使這個(gè)狀態(tài)沒有參與頁面渲染，所以，請(qǐng)不要把非渲染屬性放 state 里面，即使放了 state，也請(qǐng)不要通過 setState 去修改這個(gè)狀態(tài)，直接調(diào)用 this.state.xxx = xxx 就好，這種不參與渲染的屬性，直接掛在 this 上就好，參考下圖
//s1s2s3為渲染的屬性，s4非渲染屬性
state={
s1:1,
s2:1,
s3:1,
s4:1,
};
s5=1;
changeNotUsedState=()=>{
const{s4}=this.state;
this.setState({s4:s4+1});
//頁面會(huì)重新渲染
//頁面不會(huì)重新渲染
this.state.s4=2;
this.s5=2;
};
S1:{s1}S2:{s2}S3:{s3}
;
只是調(diào)用 setState，頁面會(huì)不會(huì)重新渲染
幾種情況，分別是：
直接調(diào)用 setState，無參數(shù)
setState，新 state 和老 state 完全一致，也就是同樣的 state
sameState=()=>{
const{s1}=this.state;
this.setState({s1});
//頁面會(huì)重新渲染
};
noParams=()=>{
this.setState({});
//頁面會(huì)重新渲染
};
這兩種情況，處理起來和普通的修改狀態(tài)的 setState 一致，都會(huì)引起重新渲染的
多次渲染的問題
為什么要提上面這些，仔細(xì)看，這里提到了很多次渲染的 3 次，比較契合我們?nèi)粘懘a的，異步函數(shù)回調(diào)，畢竟在定時(shí)器回調(diào)或者給組件綁定原生事件（沒事找事是吧？），挺少這么做的吧，但是異步回調(diào)就很多了，比如網(wǎng)絡(luò)請(qǐng)求啥的，改變個(gè) state 還是挺常見的，但是渲染多次，就是不行！不過利用 setState 實(shí)際上是傳一個(gè)新對(duì)象合并機(jī)制，可以把變化的屬性合并在新的對(duì)象里面，一次性提交全部變更，就不用調(diào)用多次 setState 了
asyncCallbackMerge=()=>{
Promise.resolve().then(()=>{
const{s1,s2,s3}=this.state;
this.setState({s1:s1+1,s2:s2+1,s3:s3+1});
console.log('aftersetStates1:',this.state.s1);
//輸出2頁面渲染1次
});
};
這樣就可以在非 React 的事務(wù)流中避開多次渲染的問題
測(cè)試代碼
importReactfrom'react';
interfaceState{
s1:number;
s2:number;
s3:number;
s4:number;
}
//eslint-disable-next-line@iceworks/best-practices/recommend-functional-component
exportdefaultclassTestClassextendsReact.Component{
renderTime:number;
constructor(props:any){
super(props);
this.renderTime=0;
this.state={
s1:1,
s2:1,
s3:1,
s4:1,
};
}
componentDidMount(){
constbtn1=document.getElementById('native-event');
constbtn2=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('aftersetStates1:',this.state.s1);
};
timerCallback=()=>{
setTimeout(()=>{
const{s1,s2,s3}=this.state;
this.setState({s1:s1+1});
console.log('aftersetStates1:',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('aftersetStates1:',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('aftersetStates1:',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('aftersetStates1:',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('aftersetStates1:',this.state.s1);
});
};
nativeCallbackMerge=()=>{
const{s1,s2,s3}=this.state;
this.setState({s1:s1+1,s2:s2+1,s3:s3+1});
console.log('aftersetStates1:',this.state.s1);
};
sameState=()=>{
const{s1,s2,s3}=this.state;
this.setState({s1});
this.setState({s2});
this.setState({s3});
console.log('aftersetStates1:',this.state.s1);
};
withoutParams=()=>{
this.setState({});
};
render(){
console.log('renderTime',++this.renderTime);
const{s1,s2,s3}=this.state;
return(
ReactEvent
TimerCallback
AsyncCallback
NativeEvent
TimerCallbackMerge
AsyncCallbackMerge
NativeEventMerge
ChangeNotUsedState
ReactEventSetSameState
ReactEventSetStateWithoutParams
S1:{s1}S2:{s2}S3:{s3}
函數(shù)組件
函數(shù)組件重新渲染的條件也和類組件一樣，組件的屬性 Props 和組件的狀態(tài) State 有修改的時(shí)候，會(huì)觸發(fā)組件重新渲染，所以類組件存在的問題，函數(shù)組件同樣也存在，而且因?yàn)楹瘮?shù)組件的 state 不是一個(gè)對(duì)象，情況就更糟糕
React 合成事件
constreactEventCallback=()=>{
//S1S2S3都是1
setS1((i)=>i+1);
setS2((i)=>i+1);
setS3((i)=>i+1);
//頁面只會(huì)渲染一次，S1S2S3都是2
};
定時(shí)器回調(diào)
consttimerCallback=()=>{
setTimeout(()=>{
//S1S2S3都是1
setS1((i)=>i+1);
setS2((i)=>i+1);
setS3((i)=>i+1);
//頁面只會(huì)渲染三次，S1S2S3都是2
});
};
異步函數(shù)回調(diào)
constasyncCallback=()=>{
Promise.resolve().then(()=>{
//S1S2S3都是1
setS1((i)=>i+1);
setS2((i)=>i+1);
setS3((i)=>i+1);
//頁面只會(huì)渲染三次，S1S2S3都是2
});
};
原生事件
useEffect(()=>{
consthandler=()=>{
//S1S2S3都是1
setS1((i)=>i+1);
setS2((i)=>i+1);
setS3((i)=>i+1);
//頁面只會(huì)渲染三次，S1S2S3都是2
};
containerRef.current?.addEventListener('click',handler);
return()=>containerRef.current?.removeEventListener('click',handler);
},[]);
更新沒使用的狀態(tài)
const[s4,setS4]=useState(1); constunuseState=()=>{ setS4((s)=>s+1); //s4===2頁面渲染一次S4頁面上沒用到 };
總結(jié)
以上的全部情況，在 React Hook 中表現(xiàn)的情況和類組件表現(xiàn)完全一致，沒有任何差別，但是也有表現(xiàn)不一致的地方
不同的情況 設(shè)置同樣的 State
在 React Hook 中設(shè)置同樣的 State，并不會(huì)引起重新渲染，這點(diǎn)和類組件不一樣，但是這個(gè)不一定的，引用 React 官方文檔說法
如果你更新 State Hook 后的 state 與當(dāng)前的 state 相同時(shí)，React 將跳過子組件的渲染并且不會(huì)觸發(fā) effect 的執(zhí)行。（React 使用 Object.is 比較算法 來比較 state。）
需要注意的是，React 可能仍需要在跳過渲染前渲染該組件。不過由于 React 不會(huì)對(duì)組件樹的“深層”節(jié)點(diǎn)進(jìn)行不必要的渲染，所以大可不必?fù)?dān)心。如果你在渲染期間執(zhí)行了高開銷的計(jì)算，則可以使用 useMemo 來進(jìn)行優(yōu)化。
官方穩(wěn)定有提到，新舊 State 淺比較完全一致是不會(huì)重新渲染的，但是有可能還是會(huì)導(dǎo)致重新渲染
//ReactHook
constsameState=()=>{
setS1((i)=>i);
setS2((i)=>i);
setS3((i)=>i);
console.log(renderTimeRef.current);
//頁面并不會(huì)重新渲染
};
//類組件中
sameState=()=>{
const{s1,s2,s3}=this.state;
this.setState({s1});
this.setState({s2});
this.setState({s3});
console.log('aftersetStates1:',this.state.s1);
//頁面會(huì)重新渲染
};
這個(gè)特性存在，有些時(shí)候想要獲取最新的 state，又不想給某個(gè)函數(shù)添加 state 依賴或者給 state 添加一個(gè) useRef，可以通過這個(gè)函數(shù)去或者這個(gè) state 的最新值
constsameState=()=>{
setS1((i)=>{
constlatestS1=i;
//latestS1是當(dāng)前S1最新的值，可以在這里處理一些和S1相關(guān)的邏輯
returnlatestS1;
});
};
React Hook 中避免多次渲染
React Hook 中 state 并不是一個(gè)對(duì)象，所以不會(huì)自動(dòng)合并更新對(duì)象，那怎么解決這個(gè)異步函數(shù)之后多次 setState 重新渲染的問題？
將全部 state 合并成一個(gè)對(duì)象
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 是個(gè)對(duì)象的方法，把全部的 state 合并在一個(gè)組件里面，然后需要更新某個(gè)屬性的時(shí)候，直接調(diào)用 setState 即可，和類組件的操作完全一致，這是一種方案
使用 useReducer
雖然這個(gè) hook 的存在感確實(shí)低，但是多狀態(tài)的組件用這個(gè)來替代 useState 確實(shí)不錯(cuò)
constinitialState={s1:1,s2:1,s3:1};
functionreducer(state,action){
switch(action.type){
case'update':
return{s1:state.s1+1,s2:state.s2+1,s3:state.s3+1};
default:
returnstate;
}
}
const[reducerState,dispatch]=useReducer(reducer,initialState);
constreducerDispatch=()=>{
setTimeout(()=>{
dispatch({type:'update'});
});
};
具體的用法不展開了，用起來和 redux 差別不大
狀態(tài)直接用 Ref 聲明，需要更新的時(shí)候調(diào)用更新的函數(shù)（不推薦）
//S4不參與渲染 const[s4,setS4]=useState(1); //update就是useReducer的dispatch，調(diào)用就更更新頁面，比定義一個(gè)不渲染的state好多了 const[,update]=useReducer((c)=>c+1,0); conststate1Ref=useRef(1); conststate2Ref=useRef(1); constunRefSetState=()=>{ //優(yōu)先更新ref的值 state1Ref.current+=1; state2Ref.current+=1; setS4((i)=>i+1); }; constunRefSetState=()=>{ //優(yōu)先更新ref的值 state1Ref.current+=1; state2Ref.current+=1; update(); }; state1Ref:{state1Ref.current}state2Ref:{state2Ref.current};
這樣做，把真正渲染的 state 放到了 ref 里面，這樣有個(gè)好處，就是函數(shù)里面不用聲明這個(gè) state 的依賴了，但是壞處非常多，更新的時(shí)候必須說動(dòng)調(diào)用 update，同時(shí)把 ref 用來渲染也比較奇怪
自定義 Hook
自定義 Hook 如果在組件中使用，任何自定義 Hook 中的狀態(tài)改變，都會(huì)引起組件重新渲染，包括組件中沒用到的，但是定義在自定義 Hook 中的狀態(tài)
簡(jiǎn)單的例子，下面的自定義 hook，有 id 和 data 兩個(gè)狀態(tài)， id 甚至都沒有導(dǎo)出，但是 id 改變的時(shí)候，還是會(huì)導(dǎo)致引用這個(gè) Hook 的組件重新渲染
//一個(gè)簡(jiǎn)單的自定義Hook，用來請(qǐng)求數(shù)據(jù) constuseDate=()=>{ const[id,setid]=useState(0); const[data,setData]=useState (null); useEffect(()=>{ fetch('請(qǐng)求數(shù)據(jù)的URL') .then((r)=>r.json()) .then((r)=>{ //組件重新渲染 setid((i)=>i+1); //組件再次重新渲染 setData(r); }); },[]); returndata; }; //在組件中使用，即使只導(dǎo)出了data，但是id變化，同時(shí)也會(huì)導(dǎo)致組件重新渲染，所以組件在獲取到數(shù)據(jù)的時(shí)候，組件會(huì)重新渲染兩次 constdata=useDate();
測(cè)試代碼
//use-data.ts
constuseDate=()=>{
const[id,setid]=useState(0);
const[data,setData]=useState(null);
useEffect(()=>{
fetch('數(shù)據(jù)請(qǐng)求地址')
.then((r)=>r.json())
.then((r)=>{
setid((i)=>i+1);
setData(r);
});
},[]);
returndata;
};
import{useEffect,useReducer,useRef,useState}from'react';
importuseDatefrom'./use-data';
constinitialState={s1:1,s2:1,s3:1};
functionreducer(state,action){
switch(action.type){
case'update':
return{s1:state.s1+1,s2:state.s2+1,s3:state.s3+1};
default:
returnstate;
}
}
constTestHook=()=>{
constrenderTimeRef=useRef(0);
const[s1,setS1]=useState(1);
const[s2,setS2]=useState(1);
const[s3,setS3]=useState(1);
const[s4,setS4]=useState(1);
const[,update]=useReducer((c)=>c+1,0);
conststate1Ref=useRef(1);
conststate2Ref=useRef(1);
constdata=useDate();
const[state,setState]=useState({s1:1,s2:1,s3:1});
const[reducerState,dispatch]=useReducer(reducer,initialState);
constcontainerRef=useRef(null);
constreactEventCallback=()=>{
setS1((i)=>i+1);
setS2((i)=>i+1);
setS3((i)=>i+1);
};
consttimerCallback=()=>{
setTimeout(()=>{
setS1((i)=>i+1);
setS2((i)=>i+1);
setS3((i)=>i+1);
});
};
constasyncCallback=()=>{
Promise.resolve().then(()=>{
setS1((i)=>i+1);
setS2((i)=>i+1);
setS3((i)=>i+1);
});
};
constunuseState=()=>{
setS4((i)=>i+1);
};
constunRefSetState=()=>{
state1Ref.current+=1;
state2Ref.current+=1;
setS4((i)=>i+1);
};
constunRefReducer=()=>{
state1Ref.current+=1;
state2Ref.current+=1;
update();
};
constsameState=()=>{
setS1((i)=>i);
setS2((i)=>i);
setS3((i)=>i);
console.log(renderTimeRef.current);
};
constmergeObjectSetState=()=>{
setTimeout(()=>{
setState((prevState)=>{
const{s1:prevS1,s2:prevS2,s3:prevS3}=prevState;
return{...prevState,s1:prevS1+1,s2:prevS2+1,s3:prevS3+1};
});
});
};
constreducerDispatch=()=>{
setTimeout(()=>{
dispatch({type:'update'});
});
};
useEffect(()=>{
consthandler=()=>{
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('renderTimeHook',++renderTimeRef.current);
console.log('data',data);
return(
ReactEvent
TimerCallback
AsyncCallback
NativeEvent
UnuseState
SameState
MergeStateIntoanObject
ReducerDispatch
useRefAsStateWithuseState
useRefAsStateWithuseReducer
S1:{s1}S2:{s2}S3:{s3}
MergeObjectS1:{state.s1}S2:{state.s2}S3:{state.s3}
reducerStateObjectS1:{reducerState.s1}S2:{reducerState.s2}S3:{''}
{reducerState.s3}
state1Ref:{state1Ref.current}state2Ref:{state2Ref.current}
規(guī)則記不住怎么辦？
上面羅列了一大堆情況，但是這些規(guī)則難免會(huì)記不住，React 事務(wù)機(jī)制導(dǎo)致的兩種完全截然不然的重新渲染機(jī)制，確實(shí)讓人覺得有點(diǎn)惡心，React 官方也注意到了，既然在事務(wù)流的中 setState 可以合并，那不在 React 事務(wù)流的回調(diào)，能不能也合并，答案是可以的，React 官方其實(shí)在 React V18 中， setState 能做到合并，即使在異步回調(diào)或者定時(shí)器回調(diào)或者原生事件綁定中，可以把測(cè)試代碼直接丟 React V18 的環(huán)境中嘗試，就算是上面列出的會(huì)多次渲染的場(chǎng)景，也不會(huì)重新渲染多次
但是，有了 React V18 最好也記錄一下以上的規(guī)則，對(duì)于減少渲染次數(shù)還是很有幫助的
審核編輯：劉清
-
定時(shí)器
+關(guān)注
關(guān)注
23文章
3370瀏覽量
124435 -
回調(diào)函數(shù)
+關(guān)注
關(guān)注
0文章
95瀏覽量
12236
原文標(biāo)題：React中的重新渲染
文章出處：【微信號(hào)：OSC開源社區(qū)，微信公眾號(hào)：OSC開源社區(qū)】歡迎添加關(guān)注！文章轉(zhuǎn)載請(qǐng)注明出處。
發(fā)布評(píng)論請(qǐng)先 登錄
Vue3 + React18 + TS4入門到實(shí)戰(zhàn) 系統(tǒng)學(xué)習(xí)3大熱門技術(shù) | 更新完結(jié)
用WEB技術(shù)棧開發(fā)NATIVE應(yīng)用（二）：WEEX 前端SDK原理詳解
基于react父組件傳值給子組件的例子說明state和props
React優(yōu)勢(shì),react學(xué)習(xí)筆記分享
求助，imageProgress Widget--調(diào)用setValue()時(shí)是否重新渲染整個(gè)進(jìn)度？
react 渲染html字符串
詳談 Vue 和 React 的八大區(qū)別
React-in-patterns React開發(fā)設(shè)計(jì)模式/技術(shù)列表
React Native for Windows使用React構(gòu)建原生Windows應(yīng)用
React正在經(jīng)歷Angular.js的時(shí)刻嗎？
評(píng)論