javascript - React 再次渲染相同的 div 元素 - 协调问题

Question

在 React 文档中，我读到了 reconciliation 。我突然想到了以下有趣的场景。

在我的示例中，代码使用 button元素来切换 boolean点击事件的值。基于此，代码使用三元运算符决定 React 应该渲染哪个元素。

让我们用两个组件来代表我的示例:

const First = () => {
    return <div>element - no difference</div>
}

const Second = () => {
    return <div>element - no difference</div>
}

最后渲染的元素没有区别。

第一个示例

有First和Second第一个例子中的功能组件如下:

const YourComponent = () => {
    const [renderFirst, setRenderFirst] = useState(true);

    return <>
        <button onClick={() => setRenderFirst(!renderFirst)}>Toggle</button>
        {renderFirst ? <First /> : <Second /> }
    </>
}

第二个示例

在第二个示例中仅使用 div元素但以相同的结果结尾:

const Contact = () => {
    const [renderFirst, setRenderFirst] = useState(true);

    return <>
        <button onClick={() => setRenderFirst(!renderFirst)}>Toggle</button>
        {renderFirst ? <div>element - no difference</div> : <div>element - no difference</div> }
    </>
}

问题

我的理解按照documentation状态:

Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch.

无论哪种方式，最终渲染的结果都将是 <div>element - no difference</div> 。 第二个示例显然没有再次渲染 DOM 元素。

为什么 React 渲染第一个示例？在这种情况下，这些被认为是不同的类型吗？

谢谢!

Answer 1

通过渲染，我假设您的意思是“渲染”(又名提交)到 DOM 的更改。这两个示例中仍会触发协调过程。

答案很简单。在第一个示例中，您返回一个 React 组件 ( <First /> 或 <Second /> )，而在第二个示例中，您返回一个 React 元素 (两个 div 之一)。

React 无法事先知道你的两个组件将做什么(它们可能有自己的逻辑)，所以在后一种情况下，React 只会看到你想用 First 替换 Second 并重新渲染。在前一种情况下，您仅返回可以客观比较的元素。