React 性能优化

减少直接不稳定的默认值

第一种也是最直接也最容易看出来的一种不规范写法，一般存在于对于react不太了解的新人或者一些老旧代码中，比如：

const App = () => {
  return (
    // 这里每次都会传递一个新的空数组过去，导致Child每次都会渲染，加了 memo 都救不了
    <Child userList={[]} />
  )
};

当然，它也可能不是一个空数组，但注定每次都是一个全新引用的数据：

const App = (props) => {
  return (
    <Child userList={[...props.list]} />
  )
};

正常来说，比如子组件的userList属性规定类型是数组，在父组件加工数据时提供数据默认值是非常好的习惯。

const App = (props) => {
  // 当存在时赋予空数组，保证下层数组类型的正确性
  const userList = props.userList || [];
  return (
    <Child userList={userList} />
  )
};

当App多次渲染且props.userList为假值时，此时的userList也会被不断的赋予全新的空数组。还记得前文说的吗，当你结构没变化时，我们保证其引用不变不就好了，所以结合问题一与问题二，对于空数组都可以在全局赋予一个空数组，比如：

const emptyArr = [];
const App = (props) => {
  // 当存在时赋予空数组，保证下层数组类型的正确性
  const userList = props.userList || emptyArr;
  return (
    <Child userList={userList} />
  )
};

合理的使用 useMemo、useCallback

没啥好说的，经典的东西

使用 memo / purecomponent

原文链接：https://www.cnblogs.com/echolun/p/16585566.html