作者：Yafei2702933480 | 来源：互联网 | 2023-01-31 15:36
我最近发表了一个问题的答案,当我key从数组返回时发现了一个问题.
我已经知道,兄弟组件中的键必须是唯一的.这在官方的React文档中说明,这里:
数组中使用的键在其兄弟姐妹中应该是唯一的.但是,它们不需要是全球唯一的.当我们生成两个不同的数组时,我们可以使用相同的键.
但是,与上面的粗体文本相比,似乎React对于相同的数组具有相同的键是很好的.为什么下面的代码片段工作且密钥不会发生冲突？
class MyApp extends React.Component {
renderArray = () => {
return [
Foo
,
Bar
,
Baz
];
}
render() {
return (
{this.renderArray()}
{this.renderArray()}
{this.renderArray()}
);
}
}
ReactDOM.render(, document.getElementById("app"));
显然,这不起作用:
class MyApp extends React.Component {
render() {
return (
Foo
Bar
Baz
Foo
Bar
Baz
Foo
Bar
Baz
);
}
}
ReactDOM.render(, document.getElementById("app"));
所以我的问题是,为什么第一个片段工作但不是第二个？似乎他们都应该产生完全相同的结果？
1> Daniel Mizer..：
答案列出了createHierarchyRenderer方法/功能的工作原理.源createHierarchyRenderer.js
它是reducingRight并通过渲染将组件附加到查询结果中.
它创建的renderHierarchy是2d组件数组,因此......您的renderArray调用在层次结构中具有不同的索引,这使得它们的层次结构彼此独立.
第二种情况不起作用,因为密钥是伪层次结构以提高性能 - 你可以不用键控地执行此操作,但是 - 对于更大的渲染队列来说这是非常糟糕的做法.因此,传递键 - 覆盖由...表示的维度key.
奖金:
为什么没有传递密钥就能工作？哪个键最好？如何提高？!
来源:
/**
* Generate a key string that identifies a component within a set.
*
* @param {*} component A component that could contain a manual key.
* @param {number} index Index that is used if a manual key is not provided.
* @return {string}
*/
function getComponentKey(component, index) {
// Do some typechecking here since we call this blindly. We want to ensure
// that we don't block potential future ES APIs.
if (component && typeof compOnent=== 'object' && component.key != null) {
// Explicit key
return KeyEscapeUtils.escape(component.key);
}
// Implicit key determined by the index in the set
return index.toString(36);
}
此方法由traverseStackChildrenImpl同一文件中的方法调用.如果你要深入研究这些魔法:
for (var i = 0; i
你会明白它为什么会起作用,你会知道为什么没有键的键控工作,以及你的性能损失.传递key但很好... React可以为我们自动传递索引,key旨在获取id组件创建者对象...例如:
users.map((v, i) => ()
没有通过key,但没有区别,但它被认为是一个不好的做法:
users.map((v, i) => ()
keymagic是为了在用fe附加数组的情况下使用户的id不重新渲染其他用户.users = users.unshift(someuser).最好的设置是:
users.map((v, i) => ()
京公网安备 11010802041100号