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

栏目: 服务器 · 发布时间: 5年前

内容简介:在宿主环境中,一个宿主实例是最小的单位(像DOM节点)。在React中最小的单位是React元素。一个React元素就是一个描述宿主实例的Javascript对象。一个React元素没有宿主实例与它绑定,他只是描述你想在屏幕上看到的UI的描述,所以他是轻量级的。

1、React元素

在宿主环境中,一个宿主实例是最小的单位(像DOM节点)。在React中最小的单位是React元素。

一个React元素就是一个描述宿主实例的Javascript对象。

// 用JSX语法糖对这个对象描述
// <button className="blue" />
{
  type: 'button',
  props: { className: 'blue' }
}

一个React元素没有宿主实例与它绑定,他只是描述你想在屏幕上看到的UI的描述,所以他是轻量级的。

就如同宿主实例,React也能实现树结构:

// 用JSX语法糖对这些对象描述
// <dialog>
//   <button className="blue" />
//   <button className="red" />
// </dialog>
{
  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' } }
  <button className="blue" />,
  document.getElementById('container')
);

当我们说 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 as a UI Runtime(二、React元素和入口)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Microsoft.NET框架程序设计

Microsoft.NET框架程序设计

Jeffrey Richter / 李建忠 / 清华大学出版社 / 2003-11 / 68.00元

《Microsoft.NET框架程序设计》(修订版)是《微软.NET程序员系列》丛书之一,主要介绍如何开发面向Microsoft.NET框架的各种应用程序。Microsoft.NET框架是微软公司推出的新平台,包含通用语言运行时(CLR)和.NET框架类库(FCL)。《Microsoft.NET框架程序设计》(修订版)将深入解释CLR的工作机制及其提供的各种构造,同时还将讨论FCL中一些重要的类型......一起来看看 《Microsoft.NET框架程序设计》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

SHA 加密
SHA 加密

SHA 加密工具