Question

我正在阅读16个功能。我坚持下面的观点。任何人都可以澄清以下几点。

setState回调（第二个参数）现在立即触发 componentDidMount / componentDidUpdate而不是所有组件之后已经渲染。

当下面的代码在两个版本的反应中执行时会有什么不同，即＆lt; 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（respec。componentDidUpdate）之后，componentDidMount（respec。componentDidUpdate）才会触发父组件。

另外，请记住，在重新发送后执行setState回调（第二个参数），这是生命周期方法componentDidUpdate的职责。

如果清楚，componentDidUpdate（或setState的回调）在父组件及其子组件之间是独立的。这就是原因：

setState回调（第二个参数）现在立即触发 componentDidMount / componentDidUpdate而不是所有组件之后已经渲染。

“在渲染完所有组件之后”，表示：在所有子组件都已渲染之后。

将其应用于您的示例：

您的示例无用于演示相关点中（＆gt; React 16）和（＆lt; React 16）之间的差异。实际上，即使您使用class not function实现它，子组件也是无状态的。换句话说，您的示例的子组件不包含componentDidMount，componentDidUpdate和setState与第二个arg回调。

React 16 setState方法澄清

1 个答案:

将其应用于您的示例：