Detailed explanation of render cases in React

This time I will bring you a detailed explanation of the render case in React. What are the precautions for using render in React? The following is a practical case, let’s take a look.

We all know that Render will be executed during component instantiation and lifetime. Instantiation will be executed after componentWillMount is executed. There is nothing to say about this. Here we mainly analyze the execution of lifetime component updates.

Existence methods include:

1. - componentWillReceiveProps

2. - shouldComponentUpdate

3. - componentWillUpdate

4. - render

5. - componentDidUpdate

These methods will be in the component It is executed when the state or attribute changes. If we use Redux, it will only be executed when the attribute changes. Below we will analyze the changes in attributes from several scenarios.

First we created HelloWorldComponent, the code is as follows:

import * as React from "react";
class HelloWorldComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillReceiveProps(nextProps) {
    console.log('hello world componentWillReceiveProps');
  }
  render() {
    console.log('hello world render');
    const { onClick, text } = this.props;
    return (
      <button>
        {text}
      </button>
    );
  }
}
HelloWorldComponent.propTypes = {
  onClick: React.PropTypes.func,
};
export default HelloWorldComponent;

The code of the AppComponent component is as follows:

class MyApp extends React.Component {
   constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }
  onClick() {
    console.log('button click');
    this.props.addNumber();
  }
  render() {
    return (
      <helloworld></helloworld>
    )
  }
}
const mapStateToProps = (state) => {
  return { count: state.count }
};
const mapDispatchToProps = {
  addNumber
};
export default connect(mapStateToProps, mapDispatchToProps)(MyApp);

Here we used Redux, but the code will not be posted. , where the addNumber method will increase the count by 1 each time it is clicked.

When we click the button at this time, do you think the render method of the subgroup HelloWorldComponent will be executed?

As shown in the figure, when we click the button, the render method of the subcomponent is executed. But from the code point of view, the onClick and text bound to the component have not changed. Why is the component updated?

If you add this log in componentWillReceiveProps of the subcomponent: console.log(‘isEqual’, nextProps === this.props); will the output be true or false?

Yes, you read that right, the output is false. This is why the subcomponent is updated, because the property value has changed, not the property value we bound to the component. Each time the button is clicked, the state will be triggered to change, and the entire component will be re-rendered. However, this is not what we want, because this unnecessary rendering will greatly affect the performance of our application.

In addition to inheriting Component to create components, there is also PureComponent in react. This component can avoid this situation. Let's make some modifications to the code and see the effect. Modify as follows:

class HelloWorldComponent extends React.PureComponent

What happened when the button was clicked this time?

　

Although componentWillReceiveProps will still be executed, the component is not re-rendered this time.

So, for stateless components, we should try to use PureComponent. It should be noted that PureComponent only focuses on property values, which means that changes to objects and arrays will not trigger render.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

sortHow to sort son data

##How to dynamically bind class names in WeChat mini programs

The above is the detailed content of Detailed explanation of render cases in React. For more information, please follow other related articles on the PHP Chinese website!