preface

1. Relevant principles of react
2.React performance optimization

text

Introduction to related principles of React
setState method, which updates the data asynchronously, and calls the setState method several times, and finally only re renders the render method once

class App extends React.Component{
    state={
        num:0
    }
    Click=()=>{
        this.setState({
            num:this.state.num+1
        })
        console.log("current state Time:",this.state.num)
        this.setState({
            num:this.state.num+1
        })
        console.log("current state Time:",this.state.num)
    }
    render(){
        console.log("render Triggered")
        return(
            <div>
                <h2>Current state yes:{this.state.num}</h2>
                <button onClick={this.Click}>+1</button>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

Results after clicking + 1

The following syntax can be used to obtain the latest value of state, so as to ensure that the state obtained each time is the latest.

class App extends React.Component{
    state={
        num:0
    }
    Click=()=>{
        //The callback function is used as a parameter to return the content to be modified
        this.setState((state,props)=>{
            return {
                num:state.num+1
            }
        })
        console.log("current state Time:",this.state.num)
        this.setState((state,props)=>{
            return {
                num:state.num+1
            }
        })
        console.log("current state Time:",this.state.num)
    }
    render(){
        console.log("render Triggered")
        return(
            <div>
                <h2>Current state yes:{this.state.num}</h2>
                <button onClick={this.Click}>+1</button>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

After clicking + 1


It is worth mentioning that updates in this way are still asynchronous. It can be said that setState is asynchronous.

The second parameter of setState is a callback function, which will be executed immediately after render is re rendered. This callback function is executed after componentDidUpdate.

class App extends React.Component{
    state={
        num:0
    }
    Click=()=>{
        //The callback function is used as a parameter to return the content to be modified
        this.setState(
        (state,props)=>{
            return {
                num:state.num+1
            }
        },
        ()=>{
            console.log("Page re rendering complete")
        })
    }
    render(){
        console.log("render Triggered")
        return(
            <div>
                <h2>Current state yes:{this.state.num}</h2>
                <button onClick={this.Click}>+1</button>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

Results after clicking + 1

JSX syntax is a simplification of createElement(). JSX syntax will be transformed into createElement() method by babel plug-in. Finally, the content will be transformed into a JSX object inside createElement() method to store all information in the form of key value pairs.

Component update mechanism: when the parent component is re rendered, all sub components will also be re rendered, as well as the sub components of the sub components.

Optimize component performance
1.state only stores the data related to component re rendering, and the data that needs to be used in multi lattice functions is placed in this.
2. Avoid unnecessary rendering. Use the hook function shouldComponentUpdate(nextProps,nextState). When the return value is true, it means that it needs to be re rendered. When it is false, it does not need to be re rendered. This function runs before render
The parameters are the latest props and state. Calling this.state in the function gets the data before updating, and props is the same.
3. Pure components

class App extends React.PureComponent{
    state={
        num:0
    }
    changeNum=()=>{
        this.setState(()=>{
            return {
                num:Math.floor(Math.random() *3)
            }
        })
    }
    render(){
        console.log("render Triggered")
        return(<div>
            <h2>The current random number is:{this.state.num}</h2>
            <button onClick={this.changeNum}>Random generation</button>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

Compared with ordinary components, pure components inherit from React.PureComponent, and the equivalent shouldComponentUpdate() is built in the pure component to judge whether the data has been updated, so as to judge whether to update the components. Of course, this comparison is a simple comparison, and there may be problems in the comparison of some complex data institutions, For example, when updating data, do not update the data in the object, but recreate an object and update the whole object

epilogue

The author is also the first time to learn to make a summary. It's best to get some help from me. However, if there are mistakes, I hope the boss can help point out them in the comments.