在不同的基于虚拟 DOM 的 UI 库(React、Inferno、Preact 等)中处理 "ref" 和 "key"

Handling of "ref" and "key" in different virtual-DOM-based UI libraries (React, Inferno, Preact, etc.)

调用后

<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 中。

是否有人知道这些不同设计决策的原因以及每个解决方案的一些优点和缺点?

此答案摘自React GitHub Issues

The reason is that the concept of a key is something that is controlled by React internals before your component gets created. The same thing for refs. You can think about an array of ReactElements as a Map.

A Map is a series of key and value tuples. A React fragment is a series of key and props tuples (and also type and ref). The key is designed to decide what the value is in each slot, but not the actual value itself.

If you're reading a prop named key you might be overloading the meaning of key or accidentally using it for something unrelated.

This change makes the concept a bit more strict. This helps avoids bugs with transferring props to another component which shouldn't bring the key and ref along with it. It also helps performance by ensure that types in React internals are consistent and stable.

I would suggest renaming or duplicating the prop name as a possible fix if you really need to access it.

免责声明:我从事 preact。

keyref 属性同时传递到组件中是我们为即将发布的主要版本修复的一个错误。 alpha 计划于 2019 年 3 月 4 日登陆。

甚至还有一个 open RFC 可以通过 props 再次传递 ref。我们非常支持这一变化,因为这会使 forwardRef 变得多余。