react 性能提升（一） shouldComponentUpdate

介绍

所谓的提升性能就是在某些场景下优化react的render渲染次数

1. 普通组件的话+shouldComponentUpdate ⬅⬅⬅⬅⬅ 本文介绍
   • true 执行 render
   • false 不去执行 render
2. 纯组件PureComponent 内部采用浅比较实现的（只能比较基本数据类型，遇到数组对象就虚了）------------- 点击跳转介绍
3. 16.6版本后推出react.memo方法，可以配合函数式组件一起来去提升react性能。------------- 点击跳转介绍

前景提要（可略过）

• 当我们需要重复使用某个组件的时候，而且传值一样，那么我们可以把组件卸载 循环里面，但这样以来，当我们某个参数发生变化的时候，会重复多次执行该组件，这样对于性能的消耗是不小的，我们只是想让受到数据影响的地方发生渲染执行，而不是全部执行

  render(){
    let {list} = this.state;
    return (
      <ul>
        {
          list.map(item=>{
            return <Three flag={item.flag} key={item.id} item={item} handleChange={this.handleChange}/>
          })
        }
      </ul>
    )
  }

---

比如：

• 我们有三条数据，点击后改变 checked 的 true 或 false 的值
• 但是我们只改变其中的一条数据，其他也跟着渲染了
  

shouldComponentUpdate

• 当外部传入的属性或者内部调用setState方法的时候，此钩子函数就会执行。
• 默认返回true，代表组件会进行render,如果返回false，组件就不会走render
• 就可以根据外部传入的属性或者内部的状态进行判断，满足某个条件的时候，再去更新render。
• 这个钩子函数可以根据返回true或者返回false,来去提升react的性能。
• 获取之前的属性通过this.props.xxx,获取最新的属性通过参数props获取。

//在子组件内书写
    shouldComponentUpdate(props,state){
        if(this.props.flag !== props.flag){
            return true
        }else{
            return false
        }
    }

• this.props.flag 之前的属性
• props.flag 数据变动后传递的属性
• 原理：如果你传过来的参数和我现在(还没有更新)的参数一样，那我就返回 false，你就不需要执行了，如果你传过来的参数和现在(话没有更新)的参数不一样，那我就再执行 render() 函数

效果展示：

参考代码

//父组件
import React,{Component} from 'react';
import Three from "./Three"
class App extends Component{

  state = {
    list:[
      {
        id:1,
        text:"aa",
        flag:true
      },
      {
        id:2,
        text:"bb",
        flag:false
      },
      {
        id:3,
        text:"cc",
        flag:false
      },
    ]
  }

  handleChange = (id)=>{
    let list = this.state.list.map(item=>{
      if(item.id === id){
        item.flag = !item.flag
      }
      return item
    })
    this.setState({
      list
    })
  }
  render(){
    let {list} = this.state;
    return (
      <ul>
        {
          list.map(item=>{
            return <Three flag={item.flag} key={item.id} item={item} handleChange={this.handleChange}/>
          })
        }
      </ul>
    )
  }
}
export default App;

//子组件
import React, { Component } from 'react'
export default class Three extends Component {

    state = {
        a:10
    }
    shouldComponentUpdate(props,state){
        if(this.props.flag !== props.flag){
            return true
        }else{
            return false
        }
    }
    render() {
        console.log("two-render")
        return (
            <li>
              <input type="checkbox" checked={this.props.item.flag} onChange={this.props.handleChange.bind(this,this.props.item.id)}/>
              {this.props.item.text}
            </li>
        )
    }
}