Javascript 调用setState（）函数时会发生什么情况？

setState（）

函数运行什么？它是否只运行

render（）

？

setState（）将按以下顺序运行函数：

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

shouldComponentUpdate（）

componentWillUpdate（）

render（）

componentdiddupdate（）

如果您的组件正在接收道具，它将使用上述函数运行

componentwillreceiveprops（）

函数

setState（）

函数运行什么？它是否只运行

render（）

NosetState不仅调用

render（）

函数，而且在

setState

之后，以下生命周期函数将按照顺序运行，具体取决于

shouldComponentUpdate

返回的内容

if

shouldComponentUpdate

返回true（默认为true）

if

shouldComponentUpdate

返回false（如果您有自定义实现）

关于setState还有一件事需要知道，它只会触发当前组件及其所有子组件的重新渲染（考虑到没有为其任何子组件实现

shouldComponentUpdate

），它不会触发父组件的重新渲染，因此不会对父组件进行

对账

，而只对其自身及其子组件进行对账

调用

setState

时发生的情况的演示

类应用程序扩展了React.Component{
状态={
计数：0
}
组件将接收道具（下一步）{
log（'componentWillReceiveProps parent'）；
}
shouldComponentUpdate（）{
log（'shouldcomponentupdateparent'）；
返回true；
}
componentWillUpdate（）{
log（'componentwillupdateparent'）；
}
render（）{
console.log（'render parent'）
返回(
{
console.log（'callingsetState'）；this.setState（（prevState）=>（{count:prevState.count+1}））}>增加
)
}
componentDidUpdate（）{
console.log（'componentDidUpdate父项'）
}
}
子类扩展了React.Component{
组件willmount（）{
log（'componentWillMount child'）；
}
componentDidMount（）{
log（'componentDidMount child'）；
}
组件将接收道具（下一步）{
log（'componentWillReceiveProps子项'）；
}
shouldComponentUpdate（）{
log（'shouldcomponentupdatechild'）；
返回true；
}
componentWillUpdate（）{
log（'componentwillupdatechild'）；
}
render（）{
console.log（'child'）
返回(
{this.props.count}
)
}
componentDidUpdate（）{
console.log（'componentDidUpdate子项'）
}
}
ReactDOM.render（，document.getElementById（'app'））
调用setState时，React将做的第一件事是将传递到setState的对象合并到组件的当前状态。这将启动一个称为和解的过程。对账的最终目标是，以最有效的方式，基于此新状态更新UI

为此，React将构建一个新的React元素树（您可以将其视为UI的对象表示）。一旦有了这个树，为了弄清楚UI应该如何响应新状态而改变，React将把这个新树与之前的元素树区分开来

通过这样做，React将知道发生的确切更改，并且通过确切知道发生了什么更改，将能够通过仅在绝对必要时进行更新来最小化其在UI上的占用

setState（）将按以下顺序运行函数：

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

如果您的组件正在接收道具，它将使用上述函数运行ComponentWillReceiveProps（）函数。
仅更新此答案：
（因为现在更新了生命周期方法）

setState（）将按以下顺序运行函数：

getDerivedStateFromProps（）

shouldComponentUpdate（）

render（）

getSnapBeforeUpdate
（如果存在）

componentdiddupdate（）

据此：
这里没有有用的东西吗？它执行来自
react dom
的许多函数，这些函数实际上会进行diffing和dom更新（如果需要的话）。我只看到关于生命周期状态的答案，但没有看到关于setState（）的实际答案。这就是你的意思吗？或者你真的想知道生命周期吗？@poepje，我在回答中也添加了这个解释，以防OP想知道it@ShubhamKhatri美好的
shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()