React as a UI Runtime(五、列表)

CoyPan 发布于2019-08-23 15:23 / 1253人阅读

摘要：但是这只在子元素的位置是静止的并且不需要重排。这可能会引起性能问题和可能的。当在中发现，它就会检查之前版本中的是否同样含有。并没有惯用的支持对在不重新创建元素的情况下让宿主实例在不同的父元素之间移动。

通过比较树中的元素是否在同一位置，通常已经足够判断是否是重用还是再次创建通信组件了。
但是这只在子元素的位置是静止的并且不需要重排。在我们的上述的例子中，即使message不存在，我们仍然只带input在message之后，并且没有其他的子元素。

对于动态列表，我们不能确定顺序是否会一致：

function ShoppingList({ list }) {
  return (
    
      {list.map(item => (
        
          You bought {item.name}
          

          Enter how many do you want: 
        
      ))}
    
  )
}

如果shopping项目没有被重排，React把所有的p和input元素看做是一个类型，并且不知道怎么移动他们。（从react的视角看，是商品的项目本身改变了，而不是他们的顺序）
React执行的10个商品项目的重排会是下面这样：

for (let i = 0; i < 10; i++) {
  let pNode = formNode.childNodes[i];
  let textNode = pNode.firstChild;
  textNode.textContent = "You bought " + items[i].name;
}

So instead of re-ordering them, React would effectively update each of them. This can create performance issues and possible bugs. For example, the content of the first input would stay reflected in first input after the sort — even though conceptually they might refer to different products in your shopping list!

This is why React nags you to specify a special property called key every time you include an array of elements in your output:

所以React会更新每一个元素而不是对他们进行重排。这可能会引起性能问题和可能的bugs。例如，当商品列表的顺序改变时，原本在第一个输入框的内容仍然会存在于现在的第一个输入框中 — 尽管事实上在商品列表里它应该代表着其他的商品！
这就是为什么React会提示你为每一个数组的遍历元素标记一个独有的key属性：

function ShoppingList({ list }) {
  return (
    
      {list.map(item => (
        
          You bought {item.name}
          

          Enter how many do you want: 
        
      ))}
    
  )
}

key 给予 React 判断子元素是否真正相同的能力，即使在渲染前后它在父元素中的位置不是相同的。

当 React 在

中发现

，它就会检查之前版本中的是否同样含有

。即使中的子元素们改变位置后，这个方法同样有效。在渲染前后当 key 仍然相同时，React 会重用先前的宿主实例，然后重新排序其兄弟元素。

需要注意的是 key 只与特定的父亲 React 元素相关联，比如。React 并不会去匹配父元素不同但 key 相同的子元素。（React 并没有惯用的支持对在不重新创建元素的情况下让宿主实例在不同的父元素之间移动。）

给 key 赋予什么值最好呢？最简单的答案就是：哪时候一个元素不会改变即使它在父元素中的顺序被改变？例如，在商品列表中，商品本身的 ID 是区别于其他兄弟商品的标识。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101982.html

React as a UI Runtime(二、React元素和入口)

摘要：元素在宿主环境中，一个宿主实例是最小的单位像节点。在中最小的单位是元素。他们总是不断的重建和销毁。元素是不可变的。比如，你不能改变一个元素的属性和其他属性。入口每一个渲染器都有一个入口。当我们说，就意味着亲爱的，将我的元素放到的宿主树去。 1、React元素在宿主环境中，一个宿主实例是最小的单位（像DOM节点）。在React中最小的单位是React元素。一个React元素就是一个描述...

zhjx922 2019-08-23 15:16 评论0 收藏0
React as a UI Runtime(三、协调)

摘要：确定宿主树怎么样来响应新的信息的这个过程被称为协调。协调有两种方法。我们已经创建了一个作为第一个也是唯一一个子元素，并且我们希望在同一个地方再次渲染一个。这个已经与的思想非常接近了。 1.协调如果我们在同一个容器中使用两次ReactDOM.render()会发生什么？ ReactDOM.render( , document.getElementById(container) ...

刘德刚 2019-08-23 15:19 评论0 收藏0
React as a UI Runtime(四、条件)

摘要：我们不想要因为重新创建元素而失去它的选中状态，聚焦状态和显示内容。幸好这个问题有一个简单的修复方式，他并不在应用中常见。那么会执行类似于下面的代码的状态并不会改变如果React在更新中只重用与元素类型相匹配的宿主实例，那按渲染条件选择的内容怎么办呢？正如下面的代码，假如我们开始至需要一个input，但稍后需要在它之前渲染一个message ： // 第一次渲染 ReactDOM.re...

stonezhu 2019-08-23 15:22 评论0 收藏0
React Native Vs. Xamarin Vs. Ionic Vs. Flutter

React Native Vs. Xamarin Vs. Ionic Vs. Flutter:Which Is Best For Cross-Platform Mobile App Development? While developing Native Mobile Apps, Android apps are written in Java, and iOS ones in Swift and...

Clect 2019-08-23 15:11 评论0 收藏0
程序员练级攻略（2018）：前端性能优化和框架

摘要：，谷歌给的一份性能指南和最佳实践。目前而言，前端社区有三大框架和。随后重点讲述了和两大前端框架，给出了大量的文章教程和相关资源列表。我认为，使用函数式编程方式，更加符合后端程序员的思路，而是更符合前端工程师习惯的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 这个是我订阅陈皓老师在极客上的专栏《左耳听风》...

VEIGHTZ 2019-08-02 12:04 评论0 收藏0