React 避免不必要的更新(函数组件)

使用memo()对函数组件进行缓存，使其只有在props变化时重新执行。

使用了memo()之后导致组件不必要更新的唯一因素就只有props的改变。对于引用类型的props改变是导致组件不必要更新的罪魁祸首，因为那常常难以让人察觉。

当组件执行时，会对组件中的所有变量重新初始化。如下代码：

每次点击 increment 按钮都会出发 mycomponent 组件的执行，从而导致 data 的从新初始化。而 list 组件发现 datasource属性的引用地址发生了变化就会导致组件重新执行。

使用usememo缓存data引用的地址，有效的避免组件执行时不必要的更新引用的变量

至此我们发现了变量的初始化会导致组件的重新渲染，那么上面的代码中视乎还存在一个问题    <button onclick={()=>setn(n+1)}>increment</button>，这里将箭头函数直接写死在了元素上，那么每次执行都会重新创建一个 “新的” 箭头函数。如果当前的组件不是一个元素而是一个组件的话同样会导致组件的不必要执行。

使用usecallback缓存函数，只有在n变化的时候对函数更新

可读性上的问题可以通过将代码从模板中抽离解决。

总的来说一句话。在函数组件中等于号右边的初始化操作都需要加上 use 前缀（希望读者能够在工作中很好运用起来）。例如

需要格外注意的是：对应的依赖。在一般的情况下你发现应该更新的数据没有更新，大概率是没有将依赖添加到数组中。致在外部数据变化之后没有及时对缓存进行更新。从而拿到的是在状态变化之前的值。