reactjs - 记住 JSX 元素以便稍后将它们通过 props 传递给拥有的组件是否安全？

Question

考虑一个例子:

const someElement = <CustomElement value="some" />;

function Foo({ style }) {
  return <Bar style={style}>{someElement}</Bar>;
}

如果我想继续将同一个 React 元素实例作为 props 传递给子元素，是否会有任何陷阱？对于 React 的协调来说，这种具体情况有多正常和可接受？

Answer 1

我怀疑你的方法是正确的。话又说回来，我不确定这是否能解决您的问题；它仍然需要计算someElement。我会考虑使用真正的静态数据(例如文本 HTML)，并且我相信 React 有专门的工具(dangerouslySetInnerHTML？)。另外，请注意，当 Bar 更新时，它仍然必须在树中一直进行 DOM 比较。它似乎无法知道 someElement 有什么特殊之处，从而无需比较 DOM 树的该部分。我认为你至少需要给你的文字的外部标签一个键，但这个键不需要改变，除非你作为 sibling 重复这些东西。这种方法似乎令人担忧，尽管它在技术上可能是合理的。

另一种可能有效的方法是使其成为传统组件，但重写告诉它是否需要更新的方法。显然，它永远不需要更新，但仍然会产生 DOM 初始计算的成本。我相信你的建议仍然会产生这种成本。也许一个只执行危险的SetInnerHTML并拒绝所有更新的组件就可以达到目的；零计算。