React 16 refinement of the setState method

I read the response 16 functions. I'm stuck at the bottom. can anyone clarify the following point.

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

What difference does it make when below code is executed in both reaction versions ie <16 and 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;
+4
source share
1 answer

From React 16, mounting a parent component is independent of mounting child components.

Before React 16, componentDidMount(respec. componentDidUpdate) Will be launched for the parent component only after all child components have released their componentDidMount(respec. componentDidUpdate).

, , callback (2- ) setState , componentDidUpdate.

, componentDidUpdate ( setState) . :

setState ( ) componentDidMount/componentDidUpdate .

" , ", : , .

:

( > React 16) (< React 16) . , , not. , componentDidMount, componentDidUpdate, setState arg.

0

Source: https://habr.com/ru/post/1689491/


All Articles