React重新渲染指的是什么

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}

);
}

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，頁面僅重新渲染一次
};


ReactEvent


S1:{s1}S2:{s2}S3:{s3}

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});
});
};

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});
});
};

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

//s1s2s3為渲染的屬性，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;
};


S1:{s1}S2:{s2}S3:{s3}
;

sameState=()=>{
const{s1}=this.state;
this.setState({s1});
//頁面會重新渲染
};

noParams=()=>{
this.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次
});
};

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 有修改的時候，會觸發(fā)組件重新渲染，所以類組件存在的問題，函數(shù)組件同樣也存在，而且因為函數(shù)組件的 state 不是一個對象，情況就更糟糕

React 合成事件

constreactEventCallback=()=>{
//S1S2S3都是1
setS1((i)=>i+1);
setS2((i)=>i+1);
setS3((i)=>i+1);
//頁面只會渲染一次，S1S2S3都是2
};

定時器回調(diào)

consttimerCallback=()=>{
setTimeout(()=>{
//S1S2S3都是1
setS1((i)=>i+1);
setS2((i)=>i+1);
setS3((i)=>i+1);
//頁面只會渲染三次，S1S2S3都是2
});
};

異步函數(shù)回調(diào)

constasyncCallback=()=>{
Promise.resolve().then(()=>{
//S1S2S3都是1
setS1((i)=>i+1);
setS2((i)=>i+1);
setS3((i)=>i+1);
//頁面只會渲染三次，S1S2S3都是2
});
};

原生事件

useEffect(()=>{
consthandler=()=>{
//S1S2S3都是1
setS1((i)=>i+1);
setS2((i)=>i+1);
setS3((i)=>i+1);
//頁面只會渲染三次，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，并不會引起重新渲染，這點(diǎn)和類組件不一樣，但是這個不一定的，引用 React 官方文檔說法

如果你更新 State Hook 后的 state 與當(dāng)前的 state 相同時，React 將跳過子組件的渲染并且不會觸發(fā) effect 的執(zhí)行。（React 使用 Object.is 比較算法 來比較 state。）

需要注意的是，React 可能仍需要在跳過渲染前渲染該組件。不過由于 React 不會對組件樹的“深層”節(jié)點(diǎn)進(jìn)行不必要的渲染，所以大可不必?fù)?dān)心。如果你在渲染期間執(zhí)行了高開銷的計算，則可以使用 useMemo 來進(jìn)行優(yōu)化。

官方穩(wěn)定有提到，新舊 State 淺比較完全一致是不會重新渲染的，但是有可能還是會導(dǎo)致重新渲染

//ReactHook
constsameState=()=>{
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('aftersetStates1:',this.state.s1);
//頁面會重新渲染
};

這個特性存在，有些時候想要獲取最新的 state，又不想給某個函數(shù)添加 state 依賴或者給 state 添加一個 useRef，可以通過這個函數(shù)去或者這個 state 的最新值

constsameState=()=>{
setS1((i)=>{
constlatestS1=i;
//latestS1是當(dāng)前S1最新的值，可以在這里處理一些和S1相關(guān)的邏輯
returnlatestS1;
});
};

React Hook 中避免多次渲染

React Hook 中 state 并不是一個對象，所以不會自動合并更新對象，那怎么解決這個異步函數(shù)之后多次 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 合并在一個組件里面，然后需要更新某個屬性的時候，直接調(diào)用 setState 即可，和類組件的操作完全一致，這是一種方案

使用 useReducer

雖然這個 hook 的存在感確實低，但是多狀態(tài)的組件用這個來替代 useState 確實不錯

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 聲明，需要更新的時候調(diào)用更新的函數(shù)（不推薦）

//S4不參與渲染
const[s4,setS4]=useState(1);
//update就是useReducer的dispatch，調(diào)用就更更新頁面，比定義一個不渲染的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 里面，這樣有個好處，就是函數(shù)里面不用聲明這個 state 的依賴了，但是壞處非常多，更新的時候必須說動調(diào)用 update，同時把 ref 用來渲染也比較奇怪

自定義 Hook

自定義 Hook 如果在組件中使用，任何自定義 Hook 中的狀態(tài)改變，都會引起組件重新渲染，包括組件中沒用到的，但是定義在自定義 Hook 中的狀態(tài)

簡單的例子，下面的自定義 hook，有 id 和 data 兩個狀態(tài)， id 甚至都沒有導(dǎo)出，但是 id 改變的時候，還是會導(dǎo)致引用這個 Hook 的組件重新渲染

//一個簡單的自定義Hook，用來請求數(shù)據(jù)
constuseDate=()=>{
const[id,setid]=useState(0);
const[data,setData]=useState(null);

useEffect(()=>{
fetch('請求數(shù)據(jù)的URL')
.then((r)=>r.json())
.then((r)=>{
//組件重新渲染
setid((i)=>i+1);
//組件再次重新渲染
setData(r);
});
},[]);

returndata;
};

//在組件中使用，即使只導(dǎo)出了data，但是id變化，同時也會導(dǎo)致組件重新渲染，所以組件在獲取到數(shù)據(jù)的時候，組件會重新渲染兩次
constdata=useDate();

測試代碼

//use-data.ts
constuseDate=()=>{
const[id,setid]=useState(0);
const[data,setData]=useState(null);

useEffect(()=>{
fetch('數(shù)據(jù)請求地址')
.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}