为什么 React 父级中输入框的更改将导致渲染未更改的子元素<VideoPlayer>

Question

https://react.dev/learn/synchronizing-with-effects#step-2-specify-the-effect-dependencies 代码示例演示了为什么我们应该指定效果依赖项，否则它将在每次渲染后调用。

然而，观察到的行为让我感到有点不知所措。 React 使用 Virtual DOM 的优点是计算脏 DOM 元素并仅更新它们。在该演示案例中，唯一脏的 DOM 元素是 ，但是子元素 没有任何变化，也就是说，它对应的 DOM 元素根本不脏。那么为什么每次父元素中包含的输入框发生变化（按键）时都会调用 VideoPlayer 的 render() 呢？ Virtual DOM 是否因 userEffect hooks 的引入而改变？

Answer 1

随着父状态的变化，内部渲染的子元素也将在父状态发生变化时重新渲染，直到并且除非该子元素被记住。在这个父组件中，由于其状态的变化，它本身再次重新渲染，并且它的子元素也将重新渲染，因为它位于父节点内，而父节点再次在 DOM 上重新绘制。

希望有帮助！