什么是setState()功能运行？它只运行render()吗？
调用 setState() 函数时会发生什么？
IT技术
javascript
reactjs
2021-04-11 09:36:15
4个回答
什么是
setState()功能运行？是否只运行render()
没有setState 不仅调用render()函数，而且 after setState，以下生命周期函数将根据shouldComponentUpdate返回的内容按顺序运行
ifshouldComponentUpdate返回 true（默认情况下为 true）。
1. shouldComponentUpdate
2. componentWillUpdate
3. render()
4. componentDidUpdate
ifshouldComponentUpdate返回 false（如果您有自定义实现）
1. shouldComponentUpdate
关于 setState 的另一件事是，它只触发当前组件及其所有子组件的重新渲染（考虑没有shouldComponentUpdate对其任何子组件的实现），它不会触发父组件的重新渲染因此，reconcilation父组件不会发生这种情况，而只会发生在其自身及其子组件上。
setState调用时会发生什么的演示。
class App extends React.Component {
state = {
count: 0
}
componentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps parent');
}
shouldComponentUpdate() {
console.log('shouldComponentUpdate parent');
return true;
}
componentWillUpdate() {
console.log('componentWillUpdate parent');
}
render() {
console.log('render parent')
return (
<div>
<Child count = {this.state.count}/>
<button onClick={() => {
console.log('callingsetState');this.setState((prevState) => ({count: prevState.count + 1}))}} >Increase</button>
</div>
)
}
componentDidUpdate() {
console.log('componentDidUpdate parent')
}
}
class Child extends React.Component {
componentWillMount() {
console.log('componentWillMount child');
}
componentDidMount() {
console.log('componentDidMount child');
}
componentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps child');
}
shouldComponentUpdate() {
console.log('shouldComponentUpdate child');
return true;
}
componentWillUpdate() {
console.log('componentWillUpdate child');
}
render() {
console.log('child')
return (
<div>
<div>{this.props.count}</div>
</div>
)
}
componentDidUpdate() {
console.log('componentDidUpdate child')
}
}
ReactDOM.render(<App/>, document.getElementById('app'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>为@poepje 在您的问题中添加的问题添加解释
setState 有什么作用？
setState()将组件状态的更改加入队列，并告诉 React 该组件及其子组件需要使用更新后的状态重新渲染。这是您用来更新用户界面以响应事件处理程序和服务器响应的主要方法。
React 有关于这个函数的非常好的文档here
您还可以看到以下有关 setState 如何工作的答案：
setState() 将按以下顺序运行函数：
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
如果您的组件正在接收props，它将运行componentWillRecieveProps()具有上述功能的功能。
当 setState 被调用时，React 要做的第一件事就是将你传递给 setState 的对象合并到组件的当前状态中。这将启动一个称为和解的过程。Reconciliation 的最终目标是以最有效的方式根据这个新状态更新 UI。
为此，React 将构建一个新的 React 元素树（您可以将其视为 UI 的对象表示）。一旦有了这棵树，为了弄清楚 UI 应该如何响应新状态而改变，React 会将这棵新树与之前的元素树进行比较。
通过这样做，React 将知道发生的确切更改，并且通过确切知道发生了哪些更改，将能够通过仅在绝对必要的情况下进行更新来最小化其在 UI 上的占用空间。
setState() 将按以下顺序运行函数：
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
如果您的组件正在接收props，它将使用上述函数运行 componentWillRecieveProps() 函数。
只是对此答案的更新： https ://stackoverflow.com/a/45273993/7310034（因为生命周期方法现已更新）
setState() 将按以下顺序运行函数：
getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapBeforeUpdate （如果存在）
componentDidUpdate()
根据这个：http : //projects.wojtekmaj.pl/react-lifecycle-methods-diagram/