Reactjs 重用的React元素可防止组件更新

Foo

是只应渲染一次的组件。这可以用于性能优化，尽管这只是一个纯理论问题，没有解决任何特定的编码问题

这可以通过使用

shouldComponentUpdate

或纯组件来实现，建议这样做：

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

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

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

constfoo=（）=>{Math.random（）}
；
const FooOnce=React.memo（Foo）；
常数条=（）=>{
const[，update]=useState（）；
useffect（（）=>{
设置超时（（）=>{
更新（{}）；
}, 500);
}, []);
返回
;
};

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

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

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

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

const fooOnce=；
常数条=（）=>{
const[，update]=useState（）；
useffect（（）=>{
设置超时（（）=>{
更新（{}）；
}, 500);
}, []);
返回
{fooOnce}
;
};

当重用元素对象时，组件不会被重新渲染是很直观的，但我从自己的经验中知道这一点，而不是从官方来源。这可能会导致

createElement

调用少于纯组件调用，因此这可以被视为一种优势

是否在所有React版本中记录和预期了该行为

---

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

我的意思是，这是只渲染组件

一次

，而只渲染

一次。
仅当

是仅包含一次条件的超集时才使用

当然，只能通过这两种方式渲染一次

。但作为一个图书馆，他们只会记录适用于所有案例的内容。使用后一种使用变量的方法只是决定我们如何看待事物

不过你在这里说得很好

是否在所有React版本中记录和预期了该行为

不，我没有找到说明这种行为的文档

通过深入研究react源代码并设置一些断点，我发现通过保存和重用createElement结果（
const fooOnce=；
），您可以有效地每次使用完全相同的props对象，而在每次渲染中调用createElement会每次创建一个新的props对象

目前，由于光纤引擎的
函数beginWork
中存在以下条件，这确实会产生影响：
如果（oldProps！==newProps | | hasLegacyContextChanged（））

当props对象具有相同的标识时，react立即认为该元素没有工作要做（甚至不调用render）

对我来说，这似乎很有可能继续工作，但当然不能保证这种优化将始终与这种精确的行为保持一致

我指的代码如下：

当您仅使用法线时，最终将调用render，并且由于输出不同，它将更新DOM

当您使用React.memo时，道具将不具有相同的标识，但React将进入memo组件案例（）
做一个浅层的质量比较（）

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

这可能会改变，所以我不会在生产代码中使用它

除此之外，我会避免这样做，因为如果组件更新的决定来自组件本身，因为现在要使用它，您需要更改使用者代码，而不仅仅是更改组件上的代码或向其添加包装器。
为什么要确保组件不会被重新引用？这通常意味着你正试图做一些必要的事情，通常有更好的方法来实现这一点React@Aron这个问题并没有针对一个具体的案例。我想这可以用作优化技术。