react性能优化

2022-04-05 本文已影响0人 IOneStar

React 性能优化

React 性能优化 | 包括原理、技巧、Demo、工具使用

React 中的性能优化，一般都是immer+纯组件(React.PureComponent)/memo(shouldComponentUpdate())。

函数组件里面用 React.memo()
类组件里面用 React.PureComponent 或 shouldComponentUpdate()。

如果正常我们什么都不使用，父组件更新，子组件肯定会更新。
但是父组件只需要 render 它需要更新的地方就行了，有些子组件不需要更新。为了达到这个目的，我们就需要 shouldComponentUpdate 了。

它做了一次浅比较，引用类型不变是不会 render 的。所以要用 useMemo useCallback immer 这种。

React.PureComponent

scu 造成的性能问题及不可变类型是如何解决的

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

React.PureComponent，用当前与之前 props 和 state 的浅比较覆写了 shouldComponentUpdate() 的实现。

React.memo

React.memo 仅检查 props 变更，也是浅比较，如果函数组件被 React.memo 包裹，且其实现中拥有 useState，useReducer 或 useContext 的 Hook，当 state 或 context 发生变化时，它仍会重新渲染。？

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
});

如果需要进行深比较自己判断逻辑，可以在 React.memo()方法中传入传入第二个参数

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

大家诟病 react 的地方是指：父组件更新，只需要 render 他需要更新的地方就行了，有些子组件不需要更新，都是需要我们使用者来处理这些性能优化逻辑，React 内部没帮忙处理这些。为什么 React 内部不直接自己处理这些逻辑呢？

1.scu 是浅比较，这种对很多人就不适用 2.有些简单场景不用这个 3.为什么是浅比较，因为时间片较为固定，所以希望这个比较的时间相对固定，这个是深比较做不到的

问题

React.memo 和 useMemo 的区别是什么
React.memo 是高阶组件（hoc），用来包装不想重复渲染的组件，除非 props 发生变化
useMemo 是一个 React Hook，在组件中包装函数，确保函数的值只有在其依赖项其一发生变化时才重新计算。
memoization 虽然表面上看是随处可用的，但是最好在绝对需要使用时才使用，它会占用机器上的内存空间。

useMemo 返回的是 JSX.Element，而 memo 返回的是 JSXConstructor。

React.memo() 和 useMemo() 的用法和区别

React context 的性能优化

context 解决了多个层级之间传递 props 的问题。但是只要 context 的 value 发生变化，所有消费该 context 组件都是重新渲染。
比如，context 的 value 为

{
    count1: 'a',
    count2: 'b',
}

子组件 A 消费 count1，子组件 B 消费 count2，count1 发生变化时，子组件 A 和子组件 B 都会发生重新渲染，但是这个时候其实子组件 B 是不需要重新渲染的。

如何解决这个问题呢
React Context 性能优化

拆分 context，更细颗粒度的拆分
使用 useMemo 和 React.memo

vuex 和 redux 的区别：

Vuex 与 Redux 比较

实现原理：
Redux 使用的是不可变数据类型，Redux 每次都是使用新的 state 替换旧的 state。
Vuex 使用的是可变数据类型，Vuex 是直接修改。

react性能优化