React Hook 四种组件优化

,React Hook 已成为当前最流行的开发范式，React 16.8 以后基于 Hook 开发极大简化开发者效率，同时不正确的使用 React Hook也带来了很多的性能问题，本文梳理基于 React Hook 开发组件的过程中如何提高性能。,每次点击 Increase​ 都会引起子组件 Child 的渲染，哪怕子组件并没有状态变化：,,只需要把 Increase 抽取成独立的组件即可。此时点击按钮，子组件并不会渲染。,同样基于上述优化前代码，即使不抽取组件，使用 memo 优化后，当点击按钮时，也不会触发二次渲染。,React.memo 为高阶组件，与 React.PureComponent相似。,与 class 组件中 shouldComponentUpdate() 方法不同的是，如果 props 相等，areEqual 会返回 true；如果 props 不相等，则返回 false。这与 shouldComponentUpdate 方法的返回值相反。,如果已经用了 memo​ ，当遇到下面这种场景时，同样会触发子组件渲染。比如，给 Child​ 绑定一个 handleClick​ ，子组件内部增加一个按钮，当点击子组件的按钮时，更改 count​ 值，即使没有发生 name​ 变化，也同样会触发子组件渲染，为什么？memo​ 不是会判断  name 变化了，才会更新吗？,,并不是  memo​ 没有生效，是因为当状态发生变化时，父组件会重新执行，导致重新创建了新的handleChange​ 函数，而 handleChange 的变化导致了子组件的再次渲染。,点击父组件的Increase​按钮，更改了 count​ 值，经过 useCallback​ 包裹 handleChange​ 函数以后，我们会发现子组件不再渲染，说明每当父组件执行的时候，并没有创建新的 handleChange​ 函数，这就是通过 useCallback​ 优化后的效果。即使我们点击子组件的按钮，也同样不会触发子组件的渲染，同样 count 会进行累加。,,我们定义了一个total​函数，内部使用 1 填充了100次，通过 reduce​ 计算总和，经过测试发现点击 Increase​按钮后，只会执行 total1​ ，不会执行 total2​，假设total​计算量巨大，就会造成内存的浪费，通过 useMemo 可以帮我们缓存计算值。,,传入一个函数进去，会返回一个memoized 值，需要注意的是，函数内必须有返回值,第二个参数会依赖值，当依赖值更新时，会重新计算。,他们都用于缓存，useCallback​ 主要用于缓存函数，返回一个 缓存后 函数，而 useMemo 主要用于缓存值，返回一个缓存后的值。,以上就是本次给大家整理的集中常见的组件优化，当然合理使用useEffect useLayout希望对不了解的朋友有用。