重复使用的React元素会阻止组件更新

Question

Foo是仅应渲染一次的组件。这可以用于性能优化，尽管这纯粹是理论上的问题，不能解决任何特定的编码问题。

这可以通过使用shouldComponentUpdate或纯组件来实现，这是推荐的方法：

const Foo = () => <p>{Math.random()}</p>;
const FooOnce = React.memo(Foo);
const Bar = () => {
  const [, update] = useState();

  useEffect(() => {
    setTimeout(() => {
      update({});
    }, 500);
  }, []);

  return <>
    <FooOnce/>
  </>;
};

或者通过保留对React元素对象的引用并重新使用它：

const fooOnce = <Foo/>;
const Bar = () => {
  const [, update] = useState();

  useEffect(() => {
    setTimeout(() => {
      update({});
    }, 500);
  }, []);

  return <>
    {fooOnce}
  </>;
};

重用元素对象时不重新渲染组件是很直观的，但是我是从我自己的经验中而不是从官方渠道得知的。createElement与纯组件相比，这可能导致更少的调用，因此可以认为这是一个好处。

是否已在所有React版本中记录并预期了此行为？

是否有理由不以这种方式重用元素以防止组件更新？

Answer 1

我的意思是，这是渲染组件only once与渲染only if。是only if包含 的超集only once condition。

当然，渲染only once可以通过两者来完成。但作为一个图书馆，他们只会记录适用于所有情况的内容。使用后一种变量使用方法只是决定我们如何看待事物。

不过你在这里提出的观点很好。