【react】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性

 let obj = object.assign({},{a:1},{b:1})//obj为{a:1,b:1}

import React from 'react'
class Son extends React.Component{
  shouldComponentUpdate(nextProps,nextState){
     //旧的number Object对象的number属性 == 新的number Object对象的number属性
      if(nextProps.numberObject.number == this.props.numberObject.number){
        console.log('前一个对象' + JSON.stringify(nextProps.numberObject)+
                    '后一个对象' + JSON.stringify(this.props.numberObject));
        return false
      }
      return true
  }
  render(){
    const {index,numberObject,handleClick} = this.props
    //在每次渲染子组件时，打印该子组件的数字内容
    console.log(numberObject.number);
    return <h1 onClick ={() => handleClick(index)}>{numberObject.number}</h1>
  }
}
class Father extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      numberArray:[{number:0 /*对象中其余的属性*/},
                   {number:1 /*对象中其余的属性*/},
                   {number:2 /*对象中其余的属性*/}
                   ]
    }
  }
  //点击后使numberArray中数组下标为index的数字值加一，重渲染对应的Son组件
  handleClick = (index) => {
     let preNumberArray = this.state.numberArray
     //把作修改的number Object先拷贝到一个新的对象中，替换原来的对象
     preNumberArray[index] = Object.assign({},preNumberArray[index])
     //使新的number Object对象的number属性加一，旧的number Object对象属性不变
     preNumberArray[index].number += 1;
     this.setState({numberArray:preNumberArray})
  }
  render(){
    return(<div style ={{margin:30}}>{
              this.state.numberArray.map(
                (numberObject,key) => {
                 return <Son
                           key = {key}
                           index = {key}
                           numberObject ={numberObject}
                           handleClick ={this.handleClick}/>
                }
                )
              }
           </div>)
  }
}
export default Father

import React from 'react'
const { fromJS } = require('immutable')
class Son extends React.Component{
  shouldComponentUpdate(nextProps,nextState){
     //旧的number Object对象的number属性 == 新的number Object对象的number属性
      if(nextProps.numberObject.get('number') == this.props.numberObject.get('number')){
        return false
      }
      return true
  }
  render(){
    const {index,numberObject,handleClick} = this.props
    console.log(numberObject.get('number'));
    //在每次渲染子组件时，打印该子组件的数字内容
    return <h1 onClick ={() => handleClick(index)}>{numberObject.get('number')}</h1>
  }
}
class Father extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      numberArray:fromJS([{number:0 /*对象中其余的属性*/},
                          {number:1 /*对象中其余的属性*/},
                          {number:2 /*对象中其余的属性*/}
                        ])
    }
  }
  //点击后使numberArray中数组下标为index的数字值加一，重渲染对应的Son组件
  handleClick = (index) => {
     let preNumberArray = this.state.numberArray
     //使新的number Object对象的number属性加一，旧的number Object对象属性不变
     let newNumber = preNumberArray.get(index).get('number') + 1;
     preNumberArray = preNumberArray.set(index,fromJS({number: newNumber}));
     this.setState({numberArray:preNumberArray})
  }
  render(){
    return(<div style ={{margin:30}}>{
              this.state.numberArray.map(
                (numberObject,key) => {
                 return <Son
                           key = {key}
                           index = {key}
                           numberObject ={numberObject}
                           handleClick ={this.handleClick}/>
                }
                )
              }
           </div>)
  }
}
export default Father

import React, { PureComponent } from 'react'
class YouComponent extends PureComponent {
render() {
// ...
}
}