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

2019年8月31日 135次阅读 来源: lllluull

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 会在第一次衬着中递归地为它们建立宿主实例。

    原文作者：lllluull
    原文地址: https://segmentfault.com/a/1190000018184386
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞