React的性能调优 - 通过memo避免组件重载

前言

最近开始学习React，跟着Kent学，有很多干货，这里分享memo的使用方法

---

一、背景

1.1 React lifecycle

React的lifecycle如下

→  render → reconciliation → commit
         ↖                   ↙
              state change

其中

• "render" phase: 调用React.createElement创建React element
• "reconciliation" phase: 对比之前以及新的element
• "commit" phase: 如果需要的话跟新DOM

DOM的更新是很慢的，React就是通过控制必要的DOM跟新来提高速度的

那么，一个React组件的跟新取决于以下几个原因

1. 组件的props改变
2. 组件的内部state改变
3. 组件中读取context内容的改变
4. 父组件re-render

但是，React组件的跟新并不意味着这个组件有必要跟新，memo的出现就是告诉React在那些条件下组件是需要跟新的

---

二、example

2.1 用法

用法其实很简单，就是把组件通过memo包裹起来就好了，使用如下

Component = React.memo(Component)

但是简单的包裹其实是不能确保是真正提高了性能的，这时候需要借助