React使用带onChange输入框时如何最小化关联组件的重渲染次数

核心结论 #

你当前场景下的重渲染可以分两类处理：

1. 输入时对应InputComp和关联的ReusableForm的重渲染是必要的：因为二者需要渲染最新的输入值，这部分是正常的React更新逻辑，性能开销极低，不需要额外优化。
2. 未操作的另一个InputComp和关联的ReusableForm默认不会重渲染：你当前的代码结构已经实现了这一点，两个输入组件独立维护内部状态，互不影响。

为什么memo包裹不生效 #

memo默认对props做浅比较，当InputComp的状态更新触发自身重渲染时，每次传递给ReusableForm的children都是新生成的JSX对象，浅比较会判定props发生变化，因此memo不会阻止重渲染。

针对性优化方案 #

如果你的ReusableForm内部存在大量昂贵的计算逻辑，需要降低重渲染开销，可以用React内置API实现优化，无需引入外部状态库：

方案：用useMemo缓存昂贵计算逻辑 #

把ReusableForm中不依赖children的昂贵逻辑用useMemo缓存，仅在关联的配置参数变化时重新计算：

import { memo, useMemo } from 'react'

// 仍用memo包裹，避免非children参数变化导致的不必要重渲染
export const ReusableForm = memo(({ children, formConfig }) => {
  console.log('🚀 ~ ReusableForm')

  // 缓存与children无关的昂贵计算结果，仅在formConfig变化时重新计算
  const computedFormStyle = useMemo(() => {
    // 示例：大量表单样式、规则计算逻辑
    return {
      padding: '16px',
      borderRadius: '8px',
      backgroundColor: '#f5f5f5'
    }
  }, [formConfig])

  return <div style={computedFormStyle}>{children}</div>
})

这种方案下，即使ReusableForm因为children更新触发重渲染，昂贵的计算逻辑也不会重复执行，实际性能表现和阻止重渲染几乎一致。

额外说明 #

如果你的ReusableForm没有复杂逻辑，只是单纯的容器组件，完全不需要做任何优化，React处理这种轻量组件的重渲染效率极高，优化反而会带来额外的缓存开销。

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