Keys
Keys
在前一个课程中,您可能已经注意到我们收到控制台警告:
Warning: Each child in a list should have a unique "key" prop.
当我们将一个元素数组传递给 React 时,我们还需要通过唯一标识每个元素来帮助 React。
这是我们在客户关系管理应用程序中解决此问题的方法:
方便的是,我们 data 数组中的联系人有一个唯一标识符 id 。我们将该字符串设置为 key ,然后 React 的警告消失了。
这里是实时沙盒,如果你想自己玩耍:
key 的目的是为了唯一标识每个 React 元素。
为什么需要Keys
当我学习东西时,我的一个个人抱怨是,教练告诉我该做什么,但不告诉我为什么需要以及它是如何工作的。
这似乎有点奇怪,对吧?为什么 React 需要我们用独特的 key 注释每个元素?它难道不可以自己弄清楚吗?
让我们谈谈这件事。
它去哪里?
所以,之前的视频从一个非常高的层面讲述了密钥,解释了它们的目的以及为何它们是必要的。
有另一个与钥匙相关的小谜题。这个问题是更低级的。
看一下以下的 JSX:
乍一看,似乎我们给这个组件提供了 4 个属性: key , name , job ,和 email 。
但是,如果我们在这个 ContactCard 组件中添加一个 console.log ,我们会注意到缺少了什么:
我们已经指定了 4 个 props,但只有 3 个传递了过来! key 尚未提供。
这是交易:在 React 中有少量“保留词”。 key 是其中之一。当我们将 key 应用于 React 元素时,实际上并未将其设置为 prop。
让我们深入了解一下。首先,让我们用纯 JavaScript 来看一下,不使用 JSX:
嗯… 到目前为止, key 看起来还像一个属性。让我们继续。
这段代码显示我们正在调用 React.createElement 函数。正如其名称所示,该函数创建一个 React 元素。如果我们执行此代码,我们将得到类似这样的结果:
啊哈! React.createElement() 函数已拿取我们的数据并用其生成了一个 React 元素,而该元素将 key 作为顶层属性!
正如我们在“构建您自己的 React”课程中看到的那样,React 元素是描述 React 需要创建的对象的 JavaScript 对象。在这种情况下,元素描述了需要呈现的 ContactCard 组件。
键标识特定的 React 元素。它是元素本身的属性,而不是需要传递给组件的东西!
我们将涉及到一些相当高级的领域。元素和组件之间的关系是我们在整个课程中将要重新审视的内容,我不想自己走得太远。
目前,重要的是理解这一点: key 看起来像一个props,但它是 React 用来识别 React 元素的特殊东西。
关键规则
让我们来看一些关于如何使用键的规则。
顶层元素
为了满足这个要求,需要将 key 应用到 .map() 调用中的最顶层元素。
例如,这是不正确的:
从 React 的角度来看,它有一组 <li> 个 React 元素,并且看不到它们上面的任何唯一标识符。它不会“深入”查找子元素上的键。
这是如何修复它的方式:
在使用片段时,有时候需要切换到长格式 React.Fragment ,以便我们可以应用该键:
非全局
许多开发人员认为,keys必须在整个应用程序中是全局唯一的,但这是一个误解。keys只需要在其数组内是唯一的。
例如,这是完全有效的:
每个 .map() 调用都会生成一个单独的数组,因此没有问题。👍