react 性能提升（三） react.memo

介绍

所谓的提升性能就是在某些场景下优化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 的值
• 但是我们只改变其中的一条数据，其他也跟着渲染了
  

react.memo

为何不再在函数式组件里面使用 shouldComponentUpdate？

原因：函数式组件里面没有声明周期钩子

以下参考自 https://www.jianshu.com/p/9293daab4161

• 组件仅在它的 props 发生改变的时候进行重新渲染。通常来说，在组件树中 React 组件，只要有变化就会走一遍渲染流程。但是通过 PureComponent 和 React.memo()，我们可以仅仅让某些组件进行渲染

---

• PureComponent 要依靠 class 才能使用。
• 而 React.memo() 可以和 function component 一起使用

React.memo(props => {    //memo 里面就是子组件的函数式
  return <div>这里是子函数里面的内容</div>;
});

工作原理：
当函数计算得到结果时就将该结果按照参数存储起来。采用这种方式时，如果另外一个调用也使用相同的参数，我们则可以直接返回上次存储的结果而不是再计算一遍。像这样避免既重复又复杂的计算可以显著地提高性能