reactjs - 在不同的基于虚拟 DOM 的 UI 库（React、Inferno、Preact 等）中处理“ref”和“key”

Question

打电话后

<MyComponent x="aaa" y="bbb" key="0" ref={someRef}/>

props对象是

{ x: 'aaa', y: 'bbb' }

在 React 和 Inferno 中，但它是

{ x: 'aaa', y: 'bbb', key: '0', ref: someRef }

在 Preact。

有人知道这些不同设计决策的原因以及每种解决方案的优缺点吗？

Answer 1

此答案取自React GitHub 问题

原因是键的概念是在创建组件之前由 React 内部控制的。裁判也是一样。您可以将数组ReactElements视为 Map。

Map 是一系列key和value元组。React 片段是一系列keyandprops元组（以及typeand ref）。密钥旨在决定每个插槽中的值是什么，而不是实际值本身。

如果您正在阅读一个名为的道具key，您可能会超载key或不小心将其用于无关的事物。

这种变化使概念更加严格。这有助于避免将 props 转移到另一个不应将 key 和 ref 一起带入的组件的错误。它还通过确保 React 内部的类型一致和稳定来提高性能。

如果您确实需要访问它，我建议重命名或复制道具名称作为可能的解决方法。

Answer 2

免责声明：我在 preact 上工作。

key将 the和prop都传递ref给组件是我们为即将发布的主要版本修复的错误。Alpha 版计划于 2019 年 3 月 4 日登陆。

甚至还有一个开放的 RFC可以再次ref通过props。我们非常支持这种改变，因为那会变得forwardRef多余。