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

zhjx922 发布于2019-08-23 15:16 / 2569人阅读

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

1、React元素

在宿主环境中，一个宿主实例是最小的单位（像DOM节点）。在React中最小的单位是React元素。
一个React元素就是一个描述宿主实例的Javascript对象。

// 用JSX语法糖对这个对象描述
//

一个React元素没有宿主实例与它绑定，他只是描述你想在屏幕上看到的UI的描述，所以他是轻量级的。
就如同宿主实例，React也能实现树结构：

// 用JSX语法糖对这些对象描述
// 
//   
{
  type: "dialog",
  props: {
    children: [{
      type: "button",
      props: { className: "blue" }
    }, {
      type: "button",
      props: { className: "red" }
    }]
  }
}

（提示：我忽视了一些对解释这个概念并不重要的属性）

但是，请记住React元素没有一致性的标记。他们总是不断的重建和销毁。
React元素是不可变的。比如，你不能改变一个React元素的children属性和其他属性。如果你想渲染与之前不同的内容，你要重头开始描述一个新的React元素。
我喜欢把React元素比做电影中的每一帧。它们描述了UI在某一刻的状态，它们永远不会改变。

2. 入口

每一个React渲染器都有一个入口。就是那个告诉React把特定的React元素树渲染到宿主实例中的API。

ReactDOM.render(
  // { type: "button", props: { className: "blue" } }

当我们说ReactDOM.render(reactElement, domContainer)，就意味着：“亲爱的React，将我的React元素放到domContainer 的宿主树去”。
React会看着reactElement.type（在我们的例子中，‘button’）并告诉React Dom renderer 创造一个宿主实例并且设置属性：

function createHostInstance(reactElement) {
  let domNode = document.createElement(reactElement.type);
  domNode.className = reactElement.props.className;
  return domNode;
}

在我们的例子中，代码如下

let domNode = document.createElement("button");
domNode.className = "blue";

domContainer.appendChild(domNode);

如果 React 元素在 reactElement.props.children 中含有子元素，React 会在第一次渲染中递归地为它们创建宿主实例。

服务器托管云服务器 react _React React 源码 react cdn

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

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

React as a UI Runtime(四、条件)

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

stonezhu 2019-08-23 15:22 评论0 收藏0
React as a UI Runtime(五、列表)

摘要：但是这只在子元素的位置是静止的并且不需要重排。这可能会引起性能问题和可能的。当在中发现，它就会检查之前版本中的是否同样含有。并没有惯用的支持对在不重新创建元素的情况下让宿主实例在不同的父元素之间移动。通过比较树中的元素是否在同一位置，通常已经足够判断是否是重用还是再次创建通信组件了。但是这只在子元素的位置是静止的并且不需要重排。在我们的上述的例子中，即使message不存在，我们仍然...

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

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

刘德刚 2019-08-23 15:19 评论0 收藏0
webpack实战

摘要：和类似的预处理器还有等。的用处非常多，包括给自动加前缀使用下一代语法等，目前越来越多的人开始用它，它很可能会成为预处理器的最终赢家。 webpack实战查看所有文档页面：全栈开发，获取更多信息。快马加鞭，加班加点，终于把这个文档整理出来了，顺便深入地学习一番，巩固知识，就是太累人，影响睡眠时间和质量。极客就是想要把事情做到极致，开始了就必须到达终点。原文链接：webpack实战，原...

cyrils 2019-08-22 17:32 评论0 收藏0
React 单文件组件的解决方案 Omil 和 Omi Snippets

摘要：属性我们还可以使用来书写样式，它会自动帮我们编译为格式内容语法高亮建议使用配合该扩展支持语法高亮扩展开发项目，当然你可以把文件当作对待。 Omil 是什么？ Omil是一个 webpack 的 loader，它允许你以一种名为单文件组件(SFCs)的格式撰写 Omi 组件： ${this.data.title} export default class { test(){...

lowett 2019-08-26 10:10 评论0 收藏0