摘要：确定宿主树怎么样来响应新的信息的这个过程被称为协调。协调有两种方法。我们已经创建了一个作为第一个也是唯一一个子元素，并且我们希望在同一个地方再次渲染一个。这个已经与的思想非常接近了。
1.协调
如果我们在同一个容器中使用两次ReactDOM.render()会发生什么？
ReactDOM.render(
,
document.getElementById("container")
);
// ... later ...
// 应该替换掉 button 宿主实例吗？
// 还是在已有的 button 上更新属性？
ReactDOM.render(
,
document.getElementById("container")
);
再次说明，React的工作是使宿主树和提供的React元素的树一致。确定宿主树怎么样来响应新的信息的这个过程被称为协调。
协调有两种方法。React的简单的版本是抛弃已经存在的树，重新建立新的树：
let domContainer = document.getElementById("container");
// 清除树
domContainer.innerHTML = "";
// 创建新的宿主树
let domNode = document.createElement("button");
domNode.className = "red";
domContainer.appendChild(domNode);
但是在DOM中，这是低效的，并且会丢失一些重要的信息像聚焦状态，选中状态，滚动状态等等。所以我们希望React像下面一样工作：
let domNode = domContainer.firstChild; // Update existing host instance domNode.className = "red";
换句话说，React需要决定那时候需要更新一个已经存在的宿主实例来响应新的React元素，那时候需要新建一个宿主实例。
这就提出了关于分别的问题，React的元素可能一直在变化，那理论上那时候引用同一个宿主实例呢？
在我们的例子上是很简单的。我们已经创建了一个作为第一个（也是唯一一个）子元素，并且我们希望在同一个地方再次渲染一个。我们已经有一个的宿主实例，我们就不需要再创建新的，再次使用它就好了。
这个已经与React的思想非常接近了。
如果元素的种类在树的同一个地方之前一次的渲染和接下来的渲染是相同的，React会再次使用已经存在的宿主实例。
下面是React带有备注的大致实现过程：
// let domNode = document.createElement("button");
// domNode.className = "blue";
// domContainer.appendChild(domNode);
ReactDOM.render(
,
document.getElementById("container")
);
// 可以再次使用吗? Yes! (button → button)
// domNode.className = "red";
ReactDOM.render(
,
document.getElementById("container")
);
// 可以再次使用吗? No! (button → p)
// domContainer.removeChild(domNode);
// domNode = document.createElement("p");
// domNode.textContent = "Hello";
// domContainer.appendChild(domNode);
ReactDOM.render(
Hello
,
document.getElementById("container")
);
// 可以再次使用吗? Yes! (p → p)
// domNode.textContent = "Goodbye";
ReactDOM.render(
Goodbye
,
document.getElementById("container")
);
这套规则对子树也同样适用。例如，当我们在更新有两个子组件时的，React首先决定是否重用，
然后再对每一个子组件进行相同的过程。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101876.html
摘要：元素在宿主环境中，一个宿主实例是最小的单位像节点。在中最小的单位是元素。他们总是不断的重建和销毁。元素是不可变的。比如，你不能改变一个元素的属性和其他属性。入口每一个渲染器都有一个入口。当我们说，就意味着亲爱的，将我的元素放到的宿主树去。 1、React元素 在宿主环境中，一个宿主实例是最小的单位（像DOM节点）。在React中最小的单位是React元素。一个React元素就是一个描述...
摘要：但是这只在子元素的位置是静止的并且不需要重排。这可能会引起性能问题和可能的。当在中发现，它就会检查之前版本中的是否同样含有。并没有惯用的支持对在不重新创建元素的情况下让宿主实例在不同的父元素之间移动。 通过比较树中的元素是否在同一位置，通常已经足够判断是否是重用还是再次创建通信组件了。但是这只在子元素的位置是静止的并且不需要重排。在我们的上述的例子中，即使message不存在，我们仍然...
摘要：我们不想要因为重新创建元素而失去它的选中状态，聚焦状态和显示内容。幸好这个问题有一个简单的修复方式，他并不在应用中常见。那么会执行类似于下面的代码的状态并不会改变 如果React在更新中只重用与元素类型相匹配的宿主实例，那按渲染条件选择的内容怎么办呢？正如下面的代码，假如我们开始至需要一个input，但稍后需要在它之前渲染一个message ： // 第一次渲染 ReactDOM.re...
摘要：基础的理论概念这篇文章是我的一次尝试，希望能够形式化的介绍关于本身的一些理念模型。我对于此实际的理念模型是在每次的更新过程中返回下一个阶段的状态。的目标是提升对在动画，布局以及手势方面的友好度。我已经邀请了团队的成员来对本文档的准确性进行。 前言 本文主要是对收集到的一些官方或者其他平台的文章进行翻译，中间可能穿插一些个人的理解，如有错误疏漏之处，还望批评指正。笔者并未研究过源码，只是...
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...
阅读 1234·2021-11-15 11:37
阅读 2250·2021-09-30 09:55
阅读 4501·2021-09-22 15:51
阅读 3745·2021-09-22 15:46
阅读 2768·2019-08-30 15:52
阅读 425·2019-08-29 16:20
阅读 2892·2019-08-29 15:12
阅读 1132·2019-08-26 18:27
