面試官：說說 React中的setState執(zhí)行機制
一、是什么
一個組件的顯示形態(tài)可以由數(shù)據(jù)狀態(tài)和外部參數(shù)所決定，而數(shù)據(jù)狀態(tài)就是state
當需要修改里面的值的狀態(tài)需要通過調(diào)用setState來改變，從而達到更新組件內(nèi)部數(shù)據(jù)的作用
如下例子：
import React, { Component } from 'react'
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
message: "Hello World"
}
}
render() {
return (
<div>
<h2>{this.state.message}</h2>
<button onClick={e => this.changeText()}>面試官系列</button>
</div>
)
}
changeText() {
this.setState({
message: "JS每日一題"
})
}
}
通過點擊按鈕觸發(fā)onclick事件，執(zhí)行this.setState方法更新state狀態(tài)，然后重新執(zhí)行render函數(shù)，從而導(dǎo)致頁面的視圖更新
如果直接修改state的狀態(tài)，如下：
changeText() {
this.state.message = "JS每日一題";
}
我們會發(fā)現(xiàn)頁面并不會有任何反應(yīng)，但是state的狀態(tài)是已經(jīng)發(fā)生了改變
這是因為React并不像vue2中調(diào)用Object.defineProperty數(shù)據(jù)響應(yīng)式或者Vue3調(diào)用Proxy監(jiān)聽數(shù)據(jù)的變化
必須通過setState方法來告知react組件state已經(jīng)發(fā)生了改變
關(guān)于state方法的定義是從React.Component中繼承，定義的源碼如下：
Component.prototype.setState = function(partialState, callback) {
invariant(
typeof partialState === 'object' ||
typeof partialState === 'function' ||
partialState == null,
'setState(...): takes an object of state variables to update or a ' +
'function which returns an object of state variables.',
);
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
從上面可以看到setState第一個參數(shù)可以是一個對象，或者是一個函數(shù)，而第二個參數(shù)是一個回調(diào)函數(shù)，用于可以實時的獲取到更新之后的數(shù)據(jù)
二、更新類型
在使用setState更新數(shù)據(jù)的時候，setState的更新類型分成：
異步更新 同步更新
異步更新
先舉出一個例子：
changeText() {
this.setState({
message: "你好啊"
})
console.log(this.state.message); // Hello World
}
從上面可以看到，最終打印結(jié)果為Hello world，并不能在執(zhí)行完setState之后立馬拿到最新的state的結(jié)果
如果想要立刻獲取更新后的值，在第二個參數(shù)的回調(diào)中更新后會執(zhí)行
changeText() {
this.setState({
message: "你好啊"
}, () => {
console.log(this.state.message); // 你好啊
});
}
同步更新
同樣先給出一個在setTimeout中更新的例子：
changeText() {
setTimeout(() => {
this.setState({
message: "你好啊
});
console.log(this.state.message); // 你好啊
}, 0);
}
上面的例子中，可以看到更新是同步
再來舉一個原生DOM事件的例子：
componentDidMount() {
const btnEl = document.getElementById("btn");
btnEl.addEventListener('click', () => {
this.setState({
message: "你好啊"
});
console.log(this.state.message); // 你好啊
})
}
小結(jié)
在組件生命周期或React合成事件中，setState是異步 在setTimeout或者原生dom事件中，setState是同步
三、批量更新
同樣先給出一個例子：
handleClick = () => {
this.setState({
count: this.state.count + 1,
})
console.log(this.state.count) // 1
this.setState({
count: this.state.count + 1,
})
console.log(this.state.count) // 1
this.setState({
count: this.state.count + 1,
})
console.log(this.state.count) // 1
}
點擊按鈕觸發(fā)事件，打印的都是 1，頁面顯示 count 的值為 2
對同一個值進行多次 setState， setState 的批量更新策略會對其進行覆蓋，取最后一次的執(zhí)行結(jié)果
上述的例子，實際等價于如下：
Object.assign(
previousState,
{index: state.count+ 1},
{index: state.count+ 1},
...
)
由于后面的數(shù)據(jù)會覆蓋前面的更改，所以最終只加了一次
如果是下一個state依賴前一個state的話，推薦給setState一個參數(shù)傳入一個function，如下：
onClick = () => {
this.setState((prevState, props) => {
return {count: prevState.count + 1};
});
this.setState((prevState, props) => {
return {count: prevState.count + 1};
});
}
而在setTimeout或者原生dom事件中，由于是同步的操作，所以并不會進行覆蓋現(xiàn)象
參考文獻
https://juejin.cn/post/6844903667426918408 https://juejin.cn/post/6844903636749778958 https://segmentfault.com/a/1190000039077904
--The End--