深入理解Why Did You Render中的useState性能优化案例-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01163/article/details/148393484

深入理解Why Did You Render中的useState性能优化案例

why-did-you-render why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.) 项目地址: https://gitcode.com/gh_mirrors/wh/why-did-you-render

前言

在React应用开发中，性能优化是一个永恒的话题。Why Did You Render这个工具库为我们提供了强大的组件重渲染分析能力，帮助我们识别不必要的渲染。本文将通过useState钩子的几个典型案例，深入探讨React组件渲染机制和优化策略。

案例背景

Why Did You Render的示例中展示了四种不同的useState使用场景，每种场景都代表了开发中常见的模式。通过对比这些案例，我们可以清晰地理解React的渲染机制以及如何避免不必要的渲染。

基础概念回顾

在深入案例前，让我们先回顾几个关键概念：

React的渲染机制：当组件的state或props发生变化时，React会重新渲染该组件
浅比较(Shallow Comparison)：React在比较对象时，只比较引用而非内容
React.memo：高阶组件，用于避免不必要的重新渲染

案例分析

1. 对象类型state的问题(BrokenHooksComponent)

function BrokenHooksComponent() {
  const [numObj, setNumObj] = React.useState({num: 0});
  return (
    <button onClick={() => setNumObj({num: 0})}>
      Will Cause a Re-render: {numObj.num}
    </button>
  );
}

问题分析：

每次点击按钮时，都会创建一个新的对象{num: 0}
虽然数值相同，但对象引用不同，导致React认为state发生了变化
即使使用React.memo包裹(BrokenHooksPureComponent)，也无法避免重新渲染

解决方案：

避免在state中使用对象，除非必要
如果必须使用对象，考虑使用自定义hook进行优化

2. 基本类型state的正确使用(CorrectHooksComponent)

function CorrectHooksComponent() {
  const [num, setNum] = React.useState(0);
  return (
    <button onClick={() => setNum(0)}>
      Will NOT Cause a Re-render: {num}
    </button>
  );
}

优点分析：

使用基本类型(数字)作为state
当设置相同的值时(0 === 0)，React不会触发重新渲染
这是最理想的useState使用方式

3. 自定义hook优化对象state(SmartHooksComponent)

function useNumState(defState) {
  const [state, setState] = React.useState(defState);

  function smartSetState(newState) {
    if (state.num !== newState.num) {
      setState(newState);
    }
  }

  return [state, smartSetState];
}

function SmartHooksComponent() {
  const [numObj, setNumObj] = useNumState({num: 0});
  return (
    <button onClick={() => setNumObj({num: 0})}>
      Will NOT Cause a Re-render: {numObj.num}
    </button>
  );
}

优化原理：