React Hooks中如何仅让指定组件重新渲染而非全部组件？

在你的场景中，点击按钮更新text状态时，父组件MyComponent会因状态变化重渲染，进而导致所有子组件（包括不需要更新的YourComponent）跟着重渲染。要实现仅让特定组件重新渲染，完全可行，以下是两种实用方案：

方案一：用React.memo缓存无变化组件 #

React.memo是一个高阶组件，它会缓存组件的渲染结果，仅当组件接收的props发生浅比较变化时，才会触发重渲染。对于YourComponent这种既无内部状态、又不接收任何props的组件，直接用React.memo包裹就能阻止它随父组件重渲染。

修改YourComponent的代码：

import React from 'react';

const YourComponent = () => {
  console.log("NOTIFIER LOG")

  return (
    <div>
      <h6>THIS IS TEXT</h6>
    </div>
  )
}

// 用React.memo包裹组件，缓存渲染结果
export default React.memo(YourComponent);

修改后点击按钮，YourComponent不会再打印"NOTIFIER LOG"，只有MyComponent（打印"PRINTED"）和依赖text状态的SpecificTag（打印"PRINTED 2"）会重渲染。

方案二：拆分组件，缩小状态作用域 #

如果想进一步减少父组件的重渲染，可以把需要依赖状态的部分（按钮和SpecificTag）拆成独立组件，将状态封装在这个子组件内部。这样状态变化时，只有这个子组件会重渲染，父组件和YourComponent完全不受影响。

重构后的代码示例：

import React from "react"
import YourComponent from "./Notifier"

const SpecificTag = React.memo(({ value, onChange }) => {
  console.log("PRINTED 2")
  return (
    <>
      <button onClick={onChange}>Change State</button>
      <p>{value}</p>
    </>
  )
})

// 单独封装状态逻辑的子组件
function StatefulSection() {
  const [text, setText] = React.useState(new Date())

  const handleChange = () => {
    setText(new Date())
  }

  console.log("PRINTED (StatefulSection)")
  return <SpecificTag value={text.toLocaleString()} onChange={handleChange} />
}

function MyComponent() {
  console.log("PRINTED (MyComponent)")

  return (
    <div>
      <YourComponent />
      <StatefulSection />
    </div>
  )
}

export default MyComponent

此时点击按钮，只有StatefulSection和SpecificTag会重渲染，MyComponent和YourComponent都不会触发打印。

额外提示 #

如果组件需要传递回调函数或复杂对象作为props，仅用React.memo可能不够——因为每次父组件重渲染，回调函数的引用会变化，导致子组件仍会重渲染。这时可以结合useCallback缓存回调、useMemo缓存复杂对象，进一步优化重渲染逻辑。

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