在React文档中，我正在阅读关于和解的信息。我想到了以下有趣的场景。
在我的示例中，代码使用一个button元素boolean在click事件上切换值。基于此，代码用三元运算符决定应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> }
</>
}
题
根据文档，我的理解是：
每当根元素具有不同类型时，React都会拆开旧树并从头开始构建新树。
最后，无论哪种方式，渲染结果都将结束<div>element - no difference</div>。在第二个例子是不是再次呈现明显的DOM元素。
为什么React会渲染第一个示例呢？在这种情况下，是否认为这些类型不同？
谢谢！
通过渲染，我假设您是指要“渲染”或也提交给DOM的更改。在两个示例中，对帐过程仍将触发。
答案很简单。在您的第一个示例中，您将返回一个React组件（<First />或<Second />），而在第二个示例中，您将返回一个React元素（两个中div的一个）。
反应无法事先知道每个两种成分会做（他们可以有自己的逻辑），所以在后一种情况下，反应只会看到你要替换First用Second，只是重新渲染。在前一种情况下，您仅返回可以客观比较的元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句