为什么要在函数组件中使用React.memo？

这里提一下，如果大家看到这个标题有所疑惑的话，可以花点时间看一下本篇文章。反之呢如果是看到标题第一时间就反映出结论的话，就可以去get其他文章的知识点了

那么接下来就不废话了，直接长刀直入，进入正题！

初探memo

首先让我们用一个例子走进React.memo的世界

呆呆的函数组件 - 没有使用memo

对于一个函数组件来说，如果没有使用React.memo就好比是一个人没有脑子，就笨笨的呆呆的

不信我们就来看下面的Demo

点击访问演示Demo

 

让我们来分析下上图发生的流程：

1. 页面第一次加载，渲染App组件和B组件，控制台打印效果如上图
2. 点击按钮，改变App组件内的值。App组件和B组件全都发生更新

那么问题就来了，按正常逻辑来说，应该是这样的流程才对：

1. 页面第一次渲染，App组件和B组件分别更新，并打印
2. App组件内的数据发生变化所以，App组件重新渲染
3. 改变的数据和B组件毛关系没有，B组件维持原状，不进行更新渲染

but理想异常丰满的，现实十分骨干的。 事实就是不但App组件发生了更新，B组件也跟着进行了更新，这不是我们想要的，因为对于B组件来说：明明老子啥都没干，却还非要我再重新穿一遍衣服？

无效渲染的原因

那么造成无效渲染的原因是啥呢？

其实简单说来是这样的：

函数组件本身没有识别prop值的能力，每次父组件更新的时候都相当于是给子组件一个新的prop值。所以就相当于B组件这小子因为没带脑子（React.memo），是个呆呆的二傻子，所以他做为一个普通组件，就没有分别prop的能力，当他看到别人都更新了也就跟着把自己也造了一遍，因此