React---框架自带的性能优化方案

单帧渲染性能优化

背景

表格中选中某一行时出现卡顿现象。（使用antd组件时，若表格中有长文字截断省略，hover显示tooltip，hover显示复制按钮，需要用到CopyText组件）

问题排查

• 第一个点：state、props、context变化会导致组件进行更新，更新不一定是真正更新DOM节点，而是react重新对组件进行render的过程。
• 第二个点：页面数据量大，DOM节点多，造成React调和时间长。

问题解决方案

• 针对上述问题第一点解决方案：使用useMemo,useCallback对传入组件的props进行缓存
• 针对上述问题第二点解决方案：CopyText组件的复制和tooltip效果都是hover才出现，没有hover的时候用简单组件替代

memo、useCallback、useMemo区别？

memo是React的一个高阶组件，用于缓存函数组件。作用是防止组件在父组件重新渲染时，不必要的重新渲染。memo会对组件的props进行浅比较，如果props没有变化，组件就不会重新渲染。

useMemo是React的一个钩子，用于缓存计算结果,作用是避免每次渲染时都重新计算值，减少不必要的计算。

useCallback是React的一个钩子，用于缓存函数.作用是避免在每次渲染时都重新创建函数，减少不必要的渲染。

React性能优化一：将可变部分与不变部分分离

在 React 中，只要组件的state数据有变更，当前组件就会重新渲染。state数据有3个组成部分：props、state、context，只要这几个数据会产生变更，我们就称使用这部分数据的内容为可变部分。

解决方法：将数据会变动的内容单独拆分到一个组件中，这样就不会影响到父节点和其他的同级节点

简单🌰：

function App() {
  const [count, setCount] =  useState(0)

  const add = () => {
    setCount(count + 1)
  }

  return (
    <div className="App">
      <p onClick={add}>{count}</p>
      <Children />
    </div>
  );
}

function Children() {
  console.log("子组件渲染");
  return <div>子组件</div>
}

修改思路：将可变的内容（count）,单独拆分到一个组件中,进行隔离。

function App() {
  return (
    <div className="App">
      <Count />
      <Children />
    </div>
  );
}

function Count() {
  const [count, setCount] =  useState(0)

  const add = () => {
    setCount(count + 1)
  }

  return <p onClick={add}>{count}</p>
}