为什么添加一个空片段修复React.备忘录rerender吗?

Question

我有一个组件，类似于:

return (
<div>
{isFoo ? <Foo /> : null}
{arr.map(val => <Bar key={val} />)}
</div>
);

我将React.memo添加到Bar，道具没有改变，但Bar每次渲染该组件时都会渲染。React Profiler显示"这是该组件第一次呈现。">

但是，如果我将数组包装在一个空片段中，它会停止不必要的重新呈现:

return (
<div>
{isFoo ? <Foo /> : null}
<>
{arr.map(val => <Bar key={val} />)}
</>
</div>
);

为什么会发生这种情况?这是预期的React行为还是一个bug?我假设这与条件<Foo />。

Answer 1

我认为这是React的预期行为，因为当你有一个组件数组作为父组件的子组件时，React必须确保每个子组件的顺序和身份没有改变。

在这种情况下,如果父组件是rerender反应不能确定订单和子组件的身份没有改变所以rerender。

但是如果你用一个空片段包装数组，它将成为数组的新父元素，现在React可以确定子组件的顺序和身份没有改变。

Answer 2

尝试用空片段包装数组。

return (
<div>
{isFoo ? <Foo /> : null}
<>
{arr.map(val => <Bar key={val} />)}
</>
</div>
);

在这个版本的组件中，数组被包装在一个空片段(<> ... </>)中，以减轻不必要的组件重新渲染。