reactjs - React 16 setState方法说明

Question

我正在阅读 React 16 特性。我坚持以下几点。谁能澄清以下几点。

setState callbacks (second argument) now fire immediately after componentDidMount / componentDidUpdate instead of after all components have rendered.

下面的代码在两个版本的 React 中执行时会有什么区别，即 < 16 和 16。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {name: 'default'}
  }

  changeState() {
    this.setState({name: 'shubham'}, ()=> this.callbackSuccess())
  }

  callbackSuccess() {
    console.log('call back success');
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <Child1 name={`fromchild 1 ${this.state.name}`}/>
        <Child2 name={`fromchild 2 ${this.state.name}`}/>
        <Child3 name={`fromchild 3 ${this.state.name}`}/>
        <p className="App-intro" onClick={() => this.changeState()}>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('component did update prevprops',prevProps)
    console.log('component did update prevState',prevState)
  }

  componentDidMount(prevProps, prevState) {
    console.log('component did mount')
  }

}

class Child1 extends Component {
  render() {
    console.log('child1 render')
    const {name} = this.props;
    return (<h1> from child1 {name}</h1>)
  }
}

class Child2 extends Component {
  render() {
    console.log('child2 render')
    const {name} = this.props;
    return (<h1> from child2 {name}</h1>)
  }
}

class Child3 extends Component {
  render() {
    console.log('child3 render')
    const {name} = this.props;
    return (<h1> from child3 {name}</h1>)
  }
}

export default App;

Answer 1

从 React 16 开始，父组件挂载不依赖于子组件挂载。

在 React 16 之前，只有在所有子组件触发其 componentDidMount 后，componentDidMount(具体而言，componentDidUpdate)才会触发父组件(重新规范。componentDidUpdate) .

此外，请记住，setState 回调(第二个参数)是在重新渲染后执行的，这是生命周期方法 componentDidUpdate 的责任。

如果这一点很清楚，componentDidUpdate(或setState的回调)在父组件与其子组件之间是独立的。这就是为什么:

setState callbacks (second argument) now fire immediately after componentDidMount / componentDidUpdate instead of after all components have rendered.

“所有组件渲染完成后”，意思是:所有子组件渲染完成后。

将其应用于您的示例:

你的例子并不能说明相关点中 (>React 16) 和 ( componentDidMount、 componentDidUpdate 也不包含 setState。