React中函数式组件进行优化

转载请注明原出处 原文博客地址： Vincent'Blog React中函数式组件进行优化

React 性能优化的思路

React 性能优化的方向可以分为以下两方面

1. 减少render的次数，在react最花时间的一块reconction阶段(diff)，如果不render，就不会reconction。
2. 减少计算，主要是减少重复计算，对于函数组件而言，每次的render都会重新执行这个函数。

Class Component组件优化的API主要是shouldComponentUpdate和PureComponent，这两个API的解决思路是减少重新render的次数，主要是减少父组件更新而子组件也更新的情况。

函数式组件没有实例，如何做性能优化？

• Hook 内部使用Object.is来比较新/旧state是否相等

• 与Class中的setState方法不同

  1. 如果你修改状态的时候，传的状态值没有变化，则不会重新渲染。
  2. useState不会自动合并更新对象。可以用函数式组件的setState结合拓展运算符来达到合并更新的效果。

• 减少渲染次数

  1. 默认情况下，只要父组件的状态变了，子组件也会重新渲染。
  2. 使用React.memo，将函数组件传递给memo之后，就会返回一个新的组件，如果memo接受到的属性不变，则不会重新渲染。
  3. 使用useState来保证属性不会改变，每次更新都是独立的。

• useCallback 接受一个内联回调函数参数和一个依赖项数组，useCallback会返回该回调函数的memoized版本。这个回调函数仅仅会在某个依赖改变时才会更新。

• useMemo 把创建函数和依赖项数组作为参数传入useMemo，他仅会在某个依赖项改变时蔡崇信计算memoized的值。用来做值的缓存会比较更加合适。

React.memo

高阶组件,但只适用于函数组件，而不适用 class 组件。React.memo 仅检查 props 变更。

默认情况下其只会对复杂对象做浅层对比，如果想控制对比过程，需将自定义的比较函数通过第二个参数传入来实现。

通过 React.memo 包裹的组件在 props 不变的情况下，这个被包裹的组件是不会重新渲染的，会直接复用最近一次渲染的结果。

function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  */
}
export default React.memo(MyComponent, areEqual);

useCallback

用来缓存函数，返回值为一个记忆函数，这个记忆函数仅在某个依赖改变时才会更新。从而避免非必要的渲染。

useMemo

一般用来缓存计算的值，可以减少计算的量。

useMemo 的第一个参数就是一个函数，这个函数返回的值会被缓存起来，同时这个值会作为 useMemo 的返回值，第二个参数是一个数组依赖，如果数组里面的值有变化，那么就会重新去执行第一个参数里面的函数，并将函数返回的值缓存起来并作为 useMemo 的返回值 .

转载请注明原出处 原文博客地址： Vincent'Blog React中函数式组件进行优化