Question

setState()函数运行的是什么？它只运行render()吗？

Answer 1

setState()函数运行的是什么？它只运行render()

否 setState不仅调用render()函数，而且在setState之后，以下生命周期函数将按顺序运行，具体取决于shouldComponentUpdate返回的内容

如果shouldComponentUpdate返回true（默认情况下为true）。

1. shouldComponentUpdate
2. componentWillUpdate
3. render()
4. componentDidUpdate

如果shouldComponentUpdate返回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 doesn't update the state immediately

Answer 2

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

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

如果您的组件正在接收道具，它将运行具有上述功能的componentWillRecieveProps()功能。

Answer 3

调用setState时，React要做的第一件事是将您传递给setState的对象合并到组件的当前状态。这将启动称为对帐的过程。协调的最终目标是以最有效的方式，根据此新状态更新用户界面。

为此，React将构建一个新的React元素树（您可以将其视为UI的对象表示形式）。一旦有了这棵树，为了弄清楚UI应该如何响应新状态而变化，React会将这棵新树与先前的元素树进行对比。

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

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

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

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

Answer 4

只需更新此答案即可： https://stackoverflow.com/a/45273993/7310034 （因为lifeCycle方法现在已更新）

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

getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapBeforeUpdate（如果存在）

componentDidUpdate()

据此： http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

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

4 个答案: