为什么静态组件重新渲染，即使它没有改变状态?

Question

我想了解React如何在状态变化时重新呈现组件的基本原理。

在下面的示例中，每次我触发输入元素上的onChange处理程序时，StaticComponent中的console.log('hi')语句都会运行。我很困惑为什么每次更新状态时StaticComponent都会重新呈现。它没有得到任何与变化状态相关的道具，那么为什么每次都要运行日志语句呢?React开发工具还会显示组件重新渲染每个更改时的"高亮显示";特性。

这是正常反应行为吗?感觉它违反了目前为止我所读到的关于react的大部分内容，而且只更新需要更新的内容是经济的。

import { useState } from 'react';
const DisplayComponent = ({ text }) => {
return <p>{text}</p>
}
const StaticComponent = () => {
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}/>
</>
);
}

Answer 1

不幸的是，这是正常的反应行为。但是，它只会呈现虚拟DOM，而不是实际的DOM。

如果你还想阻止它。memo是你所需要的。

import { useState, memo } from 'react';
const DisplayComponent = ({ text }) => {
return <p>{text}</p>
}
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}/>
</>
);
}

查看更多信息https://beta.reactjs.org/reference/react/memo