脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React使用collections时key的重要性

React中使用collections时key的重要性详解

 更新时间：2017年08月07日 09:51:21   作者：枫上雾棋  
这篇文章主要给大家介绍了关于在React.js中使用collections时key的重要性，注意：一定不能不能忘了key，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面跟着小编来一起学习学习吧。

前言

大家应该都知道，在 React 中 render collections 的 items 时, Keys 扮演着重要的角色, 它直接决定接下来的 rendered 和 re-rendered，下面话不多说，来一起看看详细的介绍：

React 不会 render 重复的 keys

为了彻底明白这个, 我们来声明一个这样的数组

const nums = [1, 2, 3, 5, 2]; // 它有两个元素的值是相等的

现在, 我们在 react 中来 render

<ul>
 {nums.map(num => <li key={num}>{num}</li>)}
</ul>

这小段代码构造出的理想 element 结构, 应该是这样的

<ul>
 <li key="1">1</li>
 <li key="2">2</li>
 <li key="3">3</li>
 <li key="5">5</li>
 <li key="2">2</li>
</ul>

然而, 实际 DOM 是这样的

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>5</li>
</ul>

React 给出了以下warning

 

意思就是, 你必须为数组中的元素提供唯一的 key 值

React 会 re-render 某个 key 指向的内容发生变化的元素

我们来看一个向 users 集合添加 user 的例子

const users = [
 {username:'bob'},
 {username:'sue'}
];

users.map((u, i) =>
 <div key={u.username}>{u.username}</div>);

render 的结果如下

<div key="bob">bob</div>
<div key="sue">sue</div>

现在, 我们更新一下 users

const users = [
 {username:'joe'},
 {username:'bob'},
 {username:'sue'}
];

render 的结果将会改变如下

<div key="joe">joe</div>
<div key="bob">bob</div>
<div key="sue">sue</div>

在上面例子中, React 调用了它的 Reconciliation 算法, 然后把返回的结果也就是一个 key 为 sue 的新元素添加到了 users 的最前面

如何选择 Key

其实, 即使内容没有发生变化, 改变对应的 key 值, React 也会触发 re-render.

使用 map 函数的 index 来作为元素的 key, 对开发者来说是常见的, 因为有时这是必要的, 然而, 有时这也会导致性能下降问题

users.map((u, i) =>
 <div key={i}>{u.username}</div>);

还是以上的例子, 作了一点小小的改变后, React 瞬间由一个步骤变成了三个步骤:

  • 将 id 为 "1" 的元素从 "bob" 更改为 "joe"
  • 将 id 为 "2" 的元素从 "sue" 更改为 "bob"
  • 新增一个 id 为 "3" 的元素, 他的值为 "sue"

总结

所以, 当我们使用 collections 时, 不仅不能忘了 Key, 还要学会选择好的 Key.

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

原文链接: Why you need keys for collections in React

您可能感兴趣的文章:

相关文章

  • React组件三大核心属性State props Refs介绍

    React组件三大核心属性State props Refs介绍

    组件实例的三大核心属性是：State、Props、Refs。类组件中这三大属性都存在。函数式组件中访问不到 this，也就不存在组件实例这种说法，但由于它的特殊性（函数可以接收参数），所以存在Props这种属性
    2023-02-02
  • react-redux的connect与React.forwardRef结合ref失效的解决

    react-redux的connect与React.forwardRef结合ref失效的解决

    这篇文章主要介绍了react-redux的connect与React.forwardRef结合ref失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • 在React中写一个Animation组件为组件进入和离开加上动画/过度效果

    在React中写一个Animation组件为组件进入和离开加上动画/过度效果

    这篇文章主要介绍了在React中写一个Animation组件为组件进入和离开加上动画/过度效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-06-06
  • 详解React服务端渲染从入门到精通

    详解React服务端渲染从入门到精通

    这篇文章主要介绍了详解React服务端渲染从入门到精通，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • React setState是异步还是同步原理解析

    React setState是异步还是同步原理解析

    这篇文章主要为大家介绍了React setState是异步还是同步原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • ReactNative踩坑之配置调试端口的解决方法

    ReactNative踩坑之配置调试端口的解决方法

    本篇文章主要介绍了ReactNative踩坑之配置调试端口的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • react中如何使用监听

    react中如何使用监听

    在 React 中,您可以使用 addEventListener 函数来监听事件,本文通过实例代码给大家介绍react中如何使用监听,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • React router cache route实现缓存页面流程介绍

    React router cache route实现缓存页面流程介绍

    react-router自身没有路由缓存的特性，在5.x版本之前，我们可以基于react-router-cache-route来实现路由缓存功能。但是react-router 6.x在实现上做了比较大的变化，react-router-cache-route没有提供相应的支持
    2023-01-01
  • 详解React Fiber架构原理

    详解React Fiber架构原理

    Fiber 可以理解为一个执行单元，每次执行完一个执行单元，React Fiber就会检查还剩多少时间，如果没有时间则将控制权让出去，然后由浏览器执行渲染操作，这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下
    2022-08-08
  • react项目使用redux初始化方式

    react项目使用redux初始化方式

    这篇文章主要介绍了react项目使用redux初始化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01

最新评论