Question

我对 React 如何重新渲染有点困惑。

const Parent = () => {
  const [ value, setValue ] = useState(0);

  return (

<div>
 <Child></Child>
 <button onClick={() =>setValue(value => value + 1)}>Set Value </button>
</div>

}

const Child = () => { 
   console.log('child rerender');
return (<div>Children</div>); 
}

所以基本上，当我点击 Parent 中的按钮时，Parent 会重新渲染导致子组件的重新渲染，以及控制台日志 chid rerender。

所以我的问题是，the rerender of Child Component 是否只意味着重新运行 JS 部分（console.log('child rerender')），而 Child 的 DOM 将保持不变（没有任何 DOM 重绘和回流）？或者它实际上卸载了 Child 并将其再次挂载到 DOM 树，即使其 DOM 内容保持不变。

谢谢

Answer 1

见the FAQ。

函数将运行，虚拟 DOM 将 reconciled 与真实 DOM 相对，然后真实 DOM 不会更新，因为什么都不会改变。

Answer 2

你不需要关心 React 是否挂载和卸载组件（特定情况除外）。（您可以通过更改组件的 key 来强制它这样做。）

在这种情况下，我相信具体 DOM 发生的事情是，当 React 进行 VDOM<->DOM 协调时，它注意到 DOM 的结构没有改变，也没有任何文本值（因为 { {1}} 未在任何地方显示），因此它对具体 DOM 没有任何作用。

当父级重新渲染时，React 子级是否会更新 DOM

2 个答案: