I have been learning React for almost 3 months. Here I share my learning experience with you and make progress with you every day.

When I first learned React, I thought that the render function of the component would be triggered when the state or props of the component changed. Later, THROUGH a series of experiments, I found that the execution of the render function could be triggered even if the state was not changed, and the execution of the Render function might not be triggered even if the props were changed. The following are a series of demos to illustrate this point.

Render function execution can also be triggered without changing state

Directly on the code:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: 'click button',
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        console.log('Click happen');
        this.setState({});
    }

    render() {
        console.log('App render');
        const { message } = this.state;
        return (
            <button onClick={ this.handleClick }>{ message }</button>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
Copy the code

When the button is clicked, the setState({}) method is executed. Since the setState parameter is an empty object, the state does not change. At this time, the render function is executed. The render function executes whenever the setState method executes.

A change in props does not necessarily trigger the execution of the render function

Directly on the code:

import React, {Fragment} from 'react';
import ReactDOM from 'react-dom';

const obj = {
    message: 'hello world',
};

class App extends React.Component {
    handleClick() {
        console.log('click happen');
        obj.message = 'hello Beijing';
    }

    render() {
        return (
            <Fragment>
                <button onClick={ this.handleClick }>Click</button>
                <Component1 objMessage={ obj } />
            </Fragment>
        );
    }
}

class Component1 extends React.Component {
    render() {
        const { objMessage } = this.props;
        console.log('Component1 render');
        return (
            <div>{ objMessage.message }</div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
Copy the code

The code idea is very simple, a parent component App, a child component Component1, the props of the child component comes from the external variable obj, when I click the button of the parent component, to change the object value of the external variable OBj, Render function (Component1, props) {render function (Component1, props) {function (Component1, props) {function (Component1, props);

conclusion

In React, whenever the setState method is executed, the render function must be triggered. A change in the props of a component does not necessarily trigger execution of the render function, unless the props value is derived from the state of the parent or the parent, in which case the props value is changed, which means that the state of the parent or the parent has changed. That is, the parent or ancestor component executes the setState method; Then it can be concluded that the execution timing of the render function is the execution of the setState method.

In addition, the render function execution does not necessarily mean that the DOM operation occurs, the render function execution just returns the virtual DOM, need to compare the old and new virtual DOM to determine whether the DOM operation occurs, the comparison of the old and new virtual DOM, involves the Diff algorithm, which is another topic.