React state

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

React technology 2021 React Technology 2021 React Technology (Used to read articles and documents, now feel a little uncomfortable to brush the video, the stand-up teacher spoke very well, too detailed but also good.)

The state concept

State: state, a JavaScript object.

• State is created in the component, usually inconstructorTo initialize.
• throughsetState()Updating the state of the component to re-render the component updates the page display.
• React may have multiple values for performance reasonssetState()Calls are merged into one call.

class Weather extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isHot: true };
    this.changeWeather = this.changeWeather.bind(this);
  }
  render() {
    const { isHot } = this.state;
    return (
      <h1 onClick={this.changeWeather}>The weather isHot today. "Hot" : "cool "}</h1>
    );
  }
  changeWeather() {
    const isHot =  this.state.isHot
    this.setState({isHot: !isHot})
  }
}
ReactDOM.render(<Weather />.document.getElementById("test"));
Copy the code

this.setState()Where did it come from?

React.component.this.setstate () inherits from React.component.react.component.this.setState ().

this.setState()Are modified values merged or replaced?

Constructor for this.state = {isHot: true}; This. state = {isHot: true, wind: ‘breeze’};

You can find each time this.setState({isHot:! IsHot}) change state is a merge and not a replacement. Because it only modifies isHot and does not affect wind’s original value.

constructor,render,Event callbackHow many times did it get called?

You can add console printing to these methods

• constructor: constructor 1 time.
• renderRender 1 + n times, 1 is the initialization time, n is the number of status updates.
• Event callback: How many times does an event fire and how many times does it call, and most of the methods in the class (custom) are basically used as event callbacks.

A little detail after the code shorthand

class Weather extends React.Component {
  // Instance attributes (cannot be passed)
  state = { isHot: true };
  
  render() {
    const { isHot } = this.state;
    return (
      <h1 onClick={this.changeWeather}>The weather isHot today. "Hot" : "cool "}</h1>
    );
  }
  
  // Custom methods (essentially instance properties of method types) : use assignment statements and arrow functions
  changeWeather = () = > {
    const isHot =  this.state.isHot;
    this.setState({isHot: !isHot});
  }
}
ReactDOM.render(<Weather />.document.getElementById("test"));
Copy the code

(The simplified code above has removed Construtor.) Normally in React, constructors are used only in the following two cases:

• By givingthis.stateAssign an object to initialize the internal state.
• Bind the instance to the event handler function.

Class instance attributes can be written either by using this constructor with arguments or by defining and initializing an instance attribute with no arguments.

The React callback will implicitly lose this, so we need to manually hard bind it in the constructor. However, using an assignment statement in conjunction with the arrow function ensures that the event callback method is mounted to the instance.

setState(updater, [callback])Batch deferred update

SetState () does not always update components immediately; it postpones updates in batches. This makes it dangerous to read this.state immediately after calling setState().

There are two ways to ensure that an application update triggers and gets the latest value:

1. componentDidUpdate(prevProps, prevState, snapshot)
2. setStateThe callback function to:setState(updater, callback)