为何无状态变化的StaticComponent仍会触发重新渲染？

这是React的正常默认行为，并没有和“按需更新”的特性相悖，下面给你拆解清楚：

1. React默认的渲染机制 #

当组件（比如示例中的Home父组件）的state或props发生变化时，React会重新执行该组件的渲染函数，生成新的虚拟DOM。同时，所有直接子组件都会被触发重渲染——不管子组件的props有没有和变化的状态关联。

你看到的StaticComponent里的console.log('hi')执行，只是组件函数重新跑了一遍，但React会通过虚拟DOM对比（diff算法）发现这个组件的输出和之前完全一致，所以不会更新真实DOM。也就是说，只有组件函数执行的开销，没有真实DOM操作的开销，这其实符合React“按需更新真实DOM”的核心逻辑。

2. 如何避免不必要的组件函数执行 #

如果想彻底避免这类无意义的组件函数重渲染，可以用React.memo高阶组件包裹无状态/无props变化的子组件：

import { useState, memo } from 'react';

const DisplayComponent = ({ text }) => {
  return <p>{text}</p>
}

// 用memo包裹StaticComponent
const StaticComponent = memo(() => {
  console.log('hi')
  return <p>text</p>
})

export default function Home() {
  const [displayText, setDisplayText] = useState()
  return (
    <>
      <DisplayComponent text={displayText} />
      <StaticComponent />
      <input onChange={(event) => setDisplayText(event.target.value)} type="text" value={displayText}/>
    </>
  );
}

React.memo会缓存组件的渲染结果，只有当组件的props发生浅对比变化时，才会重新执行组件函数。这样修改后，StaticComponent就只会在首次渲染时执行console.log('hi')，后续父组件state变化时不会再重渲染。

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