React组件内解构props触发重渲染的原因及正确开发模式

现象复现 #

排查React应用性能问题时，经常会观察到一类看似反常的现象：在组件函数体内部对props对象做解构，会触发组件非预期重渲染；但改用props.propName的方式直接访问属性，或是在组件定义的入参位置直接解构props，就不会出现这类重渲染。两种写法对比如下：

触发非预期重渲染的写法：

// 触发非预期重渲染
const StatefulLayout = (props) => {
  const {isLoading, requestFn, initializationArray} = props
  useEffect(() => {
    requestFn(initializationArray);
  }, [initializationArray]);

  if (isLoading) {
    return <PageLoading />;
  }

  return (
    <Layout>
      <React.Fragment>{children}</React.Fragment>
    </Layout>
  );
}

无异常重渲染的写法：

// 无异常重渲染
const StatefulLayout = ({
  isLoading,
  requestFn,
  initializationArray
}) => {
  useEffect(() => {
    requestFn(initializationArray);
  }, [initializationArray]);

  if (isLoading) {
    return <PageLoading />;
  }

  return (
    <Layout>
      <React.Fragment>{children}</React.Fragment>
    </Layout>
  );
}

根本原因 #

首先明确核心事实：React原生逻辑中，参数位置解构props、函数体开头解构props、通过props.xxx访问属性这三种写法的执行语义完全等价，不存在任何原生层面的重渲染差异。你观察到的异常，全部来自项目中引入的非React原生逻辑，最常见的两类诱因：

• 错误实现的性能增强或HOC逻辑：很多自定义的权限、埋点、状态连接HOC，或是手动封装的React.memo比较逻辑，会通过静态分析组件的形参定义、甚至读取函数源码字符串来判断组件依赖了哪些props字段，只对识别到的字段做浅比较。如果组件形参写为单个props，这类工具会误判组件依赖整个props对象的引用，只要父组件渲染时生成了新的props对象引用（哪怕内部所有属性值完全没变），就会判定组件需要重渲染；如果在参数位置直接解构出具体字段，工具就能准确识别组件的实际依赖，只要对应字段的引用/值没变，就会跳过重渲染。旧版react-redux、react-hot-loader以及很多低质量的第三方性能优化插件都存在这类实现缺陷。
• 开发环境工具误报：旧版React DevTools的渲染高亮、why-did-you-render等性能检测工具的静态分析逻辑存在bug，会将函数体内解构props的组件误标记为非预期重渲染，实际生产环境构建后并不会触发多余渲染。

注意：上述示例中第一种写法本身存在笔误：解构props时没有取出children字段，返回JSX中直接使用children会读取全局作用域的同名变量，轻则渲染结果异常，重则触发额外的作用域更新，这也是很多人复现该问题时容易忽略的细节。

规范开发模式 #

• 优先选择参数位置解构props的写法：这种写法可读性最强，代码维护者可以一眼看到组件接收的所有入参，也能兼容绝大多数第三方生态工具的静态分析逻辑，避免不必要的重渲染误判。
• 如果确实需要在函数体内解构props（比如需要先校验props合法性、需要将完整props透传给下层组件），不要依赖第三方工具的自动props比较逻辑，手动给组件包裹React.memo时显式声明自定义比较函数，明确列出需要对比的props字段，不要让工具靠静态分析形参推断依赖。
• 不要轻信“解构位置影响React性能”的玄学结论：遇到非预期重渲染时，优先排查父组件是否传递了每次渲染都会重建的引用类型值（内联对象、内联函数、未做缓存的数组/对象等），这类问题才是React非预期重渲染的核心诱因，占所有同类问题的99%以上。
• 必须开启ESLint的react-hooks/exhaustive-deps规则，保证useEffect、useMemo、useCallback的依赖数组完整覆盖所有用到的响应式值，从根源上避免依赖遗漏导致的重渲染或状态异常问题。

内容的提问来源于stack exchange，提问作者Filippo Rivolta