React 函数式组件性能优化指南 学习

大佬原文: React 函数式组件性能优化指南

FC 组件在每次渲染是会重新运行一遍,包括绑定的函数都会再次执行. 优化的方向是:

1. props 不变时 不再渲染

React.memo(Fc 组件)
React.memo 就相当于 PureComponent

1. prop 不变时 计算属性无需再次执行 和vue 中的computed类似, useMemo的第二个参数为依赖的属性

function computeExpensiveValue() {
  // 计算量很大的代码
  return xxx
}

const memoizedValue = useMemo(computeExpensiveValue, [a, b]);

1. 渲染后 事件函数维持原对象

const memoizedCallback = useCallback(callback, [])