The power of immutable data

Time:2021-1-12

The data immutability principle of state in react. Why is it so designed?
Because in the life cycle of react, every call to componentshouldoupdate() will compare the existing data of state with the data to be changed, update the changed data, minimize unnecessary updates, and achieve performance optimization. Therefore, it is not recommended to change the data in the state directly, but through the set state
On the problem that the view cannot be updated when the reference type data is changed directly in state
Small case 1

class TheState extends Component {
    constructor(props){
        super(props)
        this.state={
            lists:[
                {name:'dabai',age:18},
                {name:'xhh',age:20},
                {name:'ali',age:25}
            ],
            num:0
        }
    }
    render() { 
        return ( 
            <div>               
                {
                    this.state.lists.map((item,index)=>{
                        return(
                            <ul key={item+index}>
                                <li>
                                    {item.name}---{item.age}
                                </li>                                                                     
                            </ul>
                        )
                    })
                       
                }
                <button onClick={ this.addListsData.bind (this)} > add data < / button >             
            </div>
        );
    }
   
    addListsData(){
        let data3={name:'xiaohui',age:22}       
        this.state.lists . push (data3) // directly pushing lists in the original state will not cause view update 
        console.log(this.state.lists)
    }
 
}

As shown in the picture
The power of immutable data

Let’s look at another scene

class TheState extends Component {
    constructor(props){
        super(props)
        this.state={
            lists:[
                {name:'dabai',age:18},
                {name:'xhh',age:20},
                {name:'ali',age:25}
            ]
        }
    }
    render() { 
        return ( 
            <div>               
                {
                    this.state.lists.map((item,index)=>{
                        return(
                            <ul key={item+index}>
                                <li>
                                    {item.name}---{item.age}
                                    <button 
                                        onClick={this.addAge.bind(this,index)} 
                                        Style = {marginleft: '20px'} > increase age
                                    </button>
                                </li>                                                                     
                            </ul>
                        )
                    })
                       
                }
                <button onClick={ this.addListsData.bind (this)} > add data < / button >             
            </div>
        );
    }
   
    addListsData(){
        let data3={name:'xiaohui',age:22}       
        let newArr1=[... this.state.lists ]//Shallow copy of data
        Newarr1. Push (data3) // push data into the copied array
        console.log(newArr1)
        this.setState({
            lists:newArr1 // Re assign the changed data to the original object. In this case, react will call render to refresh the data
        })
        //****Note that directly pushing lists in the original state will not cause the view to be updated*/
    }
    addAge(index){
       let newArr2=[... this.state.lists ]//Shallow copy of data 
       Newarr2 [index]. Age + = 1 // modify the copied data
       this.setState({
        lists:newArr2 // Reassignment calls render to render the page
       }) 
    }
}

design sketch
The power of immutable data
Here is an illustration
The power of immutable data
Graphical summary:
Although the push data of lists has changed, the URL stored in its memory will not change, so the render will not be triggered to update the view
The data of newarr1 and lists after shallow copy are exactly the same, but the memory address changes, so the view update will be triggered. After we operate newarr, we assign it to list, compare the old and new URLs in the cycle of componentshouldupdate(), and call the render function to re render our view when the URL changes are detected
We can see that changing the reference data type in the state will not trigger the view update at all because of it~~~~