Что происходит, когда вызывается функция setState()?

Ответ 1

Функция SetState() будет запускать функции в следующем порядке:

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

Если ваш компонент получает реквизит, он будет запускать функцию componentWillRecieveProps() с указанными выше функциями.

Ответ 2

Что setState() функция setState()? Это только запустить render()

Нет setState не только вызывает функцию render() но и после setState, следующие функции жизненного цикла будут работать в порядке, в зависимости от того, что shouldComponentUpdate возвращать shouldComponentUpdate

if shouldComponentUpdate возвращает true (по умолчанию true).

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

if shouldComponentUpdate возвращает false (если у вас есть пользовательская реализация)

1. shouldComponentUpdate

Еще одна вещь, которую нужно знать о setState, заключается в том, что он запускает только повторную визуализацию для текущего компонента и всех его дочерних элементов (учитывая отсутствие реализации shouldComponentUpdate ни для одного из его дочерних элементов). Он не запускает повторную визуализацию родительского компонента. компонент и, следовательно, reconcilation не происходит для родительских компонентов, а только для себя и его дочерних элементов.

setState того, что происходит, когда 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>

Ответ 3

Первое, что React сделает при вызове setState, - это объединение объекта, который вы передали в setState, в текущее состояние компонента. Это запустит процесс, называемый примирением. Конечная цель согласования состоит в том, чтобы наиболее эффективным способом обновить пользовательский интерфейс на основе этого нового состояния.

Для этого React создаст новое дерево элементов React (которое вы можете рассматривать как объектное представление вашего пользовательского интерфейса). Как только оно получит это дерево, чтобы выяснить, как должен изменяться пользовательский интерфейс в ответ на новое состояние, React будет отличать это новое дерево от предыдущего дерева элементов.

Сделав это, React будет знать точные изменения, которые произошли, и, точно зная, какие изменения произошли, сможет минимизировать свое влияние на пользовательский интерфейс, делая обновления только там, где это абсолютно необходимо.

SetState() будет запускать функции в следующем порядке:

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

Если ваш компонент получает реквизит, он запустит функцию componentWillRecieveProps() с вышеуказанными функциями.