React Hooks中如何实现特定状态变更时仅重渲染关联组件？

这个问题很常见——当父组件的状态更新时，所有子组件默认都会跟着重渲染，哪怕它们不依赖这个状态。咱们一步步来解决它：

问题根源分析 #

你代码里的componentA是直接调用函数而非作为标准React组件渲染的（虽然能运行，但不符合规范），不过核心问题在于ComponentB的重渲染：当父组件的someState更新时，整个父组件会触发重渲染，它内部的所有子节点（包括ComponentB）都会跟着重新渲染，哪怕ComponentB的props没有任何变化。

解决方案1：用React.memo优化ComponentB #

React.memo是React提供的高阶组件，它会缓存组件的渲染结果，只有当组件的props发生浅层变化时，才会重新渲染组件。刚好你的ComponentB在点击按钮时，message props并没有变化，所以用memo就能阻止它不必要的重渲染。

同时，我们把componentA改成标准的React组件（首字母大写，通过JSX标签传递props），这样更符合React的工作方式：

import { useState, memo } from 'react';

// 改为标准组件，接收someState作为props
const ComponentA = ({ someState }) => { 
  console.log("component A"); 
  return (<div style={{position: someState}}>Hello World!</div>); 
}

// 用memo包裹ComponentB，实现props对比优化
const ComponentB = memo((props) => { 
  console.log('component B'); 
  return <div>Hope this is not re-rendered..</div> 
})

export default function ParentComponent() {
  const [someState, setSomeState] = useState(null);
  const [message, setMessage] = useState(null);

  return (
    <div>
      {/* 修复原代码的语法错误：补全onClick的闭合括号 */}
      <div onClick={(e) => { setSomeState(5); }}>Update the position</div>
      <ComponentA someState={someState} /> 
      <ComponentB message={message}/>
    </div>
  )
}

额外优化：将无依赖组件移到父组件外部 #

如果ComponentB完全不依赖父组件的任何状态或props，你可以把它定义在父组件的外面。这样父组件重渲染时，ComponentB的引用不会重新创建，也能避免不必要的重渲染（不过配合memo使用会更稳妥，尤其是未来可能给ComponentB添加props的情况）：

// 移到父组件外部，避免父组件重渲染时重新创建组件引用
const ComponentB = memo((props) => { 
  console.log('component B'); 
  return <div>Hope this is not re-rendered..</div> 
})

export default function ParentComponent() {
  const [someState, setSomeState] = useState(null);
  const [message, setMessage] = useState(null);

  return (
    <div>
      <div onClick={(e) => { setSomeState(5); }}>Update the position</div>
      <ComponentA someState={someState} /> 
      <ComponentB message={message}/>
    </div>
  )
}

验证效果 #

修改后点击“Update the position”按钮，控制台只会输出component A，ComponentB不会再被不必要地重渲染。

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