如何阻止React父组件渲染时子组件重复渲染以解决输入延迟问题

每次在TextField输入内容时，会更新inputsValue状态触发Contact父组件全局重渲染，未做渲染优化的BouncyText组件会跟随父组件同步重渲染，若该组件内部存在复杂动画计算、高频DOM操作，每次输入都重复执行相关逻辑就会导致输入渲染延迟。

按优先级从高到低可选以下方案：

• 方案1：给BouncyText组件包裹React.memo
  这是最直接的优化方式，React.memo会对组件的入参做浅比较，若入参无变化就跳过组件重渲染。你的BouncyText没有传入任何props，包裹后只会在自身状态变化时才重渲染，父组件状态更新不会触发它重绘。
  代码示例：

  // BouncyText组件定义处修改
  export const BouncyText = React.memo(() => {
    // 原有组件的所有逻辑保持不变
  })
  

  要是后续给BouncyText传入了props，需要保证传入的props引用稳定：引用类型的props（对象、数组、函数）要用useMemo、useCallback包裹后再传入，否则浅比较还是会判定props变化，触发重渲染。

• 方案2：优化状态更新逻辑
  现有handleChange直接依赖外部inputsValue，可以改成函数式更新，避免状态更新依赖外部变量，也能减少不必要的副作用触发：

  const handleChange = event => {
    const { name, value } = event.target
    setInputsValue(prevState => ({
      ...prevState,
      [name]: value
    }))
  }
  

• 方案3：组件结构拆分
  如果BouncyText完全不依赖Contact组件内的任何状态和props，可以直接把该组件提到Contact组件外部定义，从根源上避免跟随Contact重渲染。

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