React 运行机制

页面设置

为了在浏览器中使用 React ，需要引入 React 和 ReactDOM 这两个库：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Pure React Samples</title>
  </head>
  <body>
    <!-- 目标容器 -->
    <div id="react-container"></div>

    <!-- React & ReactDOM 库（开发版本）-->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <script> /* JavaScript Code with Pure React */ </script>
  </body>
</html>

React 元素

有了 React ，我们不再直接与 DOM API 交互，不再需要关心构建高性能单页应用相关的复杂问题了。

DOM 元素和 React 元素看着类似，其实区别很大。React 元素是对真正的 DOM 元素的描述。

创建 React 元素

创建一个表示 h1 的 React 元素：

React.createElement("h1", { id: "title" }, "Welcome!")

第一个参数是元素类型，第二个是元素属性，第三个为元素的子元素（这里为文本节点）。该函数的参数列表中可以向后传入多个子元素，子元素可以是文本，也可以是 React 元素。

传入元素属性时，HTML 中的 class 属性需改为 className ，因为 class 是 JS 的保留字。

渲染时，React 会把 React 元素换成真正的 DOM 元素：

<h1 id="title">Welcome!</h1>

在控制台中输出这个元素，会有如下内容：

{
  "type": "h1",
  "key": null,
  "ref": null,
  "props": {
    "id": "title",
    "children": "Welcome!"
  },
  "_owner": null,
  "_store": {}
}

React 元素的 type 属性会告知 React 要创建什么类型的 HTML 或 SVG 元素；props 属性表示构建一个 DOM 元素所需要的数据，其中的 children 属性表示嵌套的子元素。

key 属性

当你通过迭代数组构建一组子元素时，需要指定元素的 key 属性，这个属性的值应当是独一无二的，这样能帮助 React 高效率更新 DOM ：

let fruits = ["apple", "banana", "melon", "pine"]
React.createElement(
  "ul",
  { className: "fruits" },
  // 这里传入的是数组，同样也表示同辈的子元素
  fruits.map((fruit, i) => React.createElement("li", { key: i }, fruit))
)

如果没有提供 key 属性，则会在控制台中获得警告。

ReactDOM

ReactDOM 提供了在浏览器渲染 React 元素的工具，比如用 render() 在 DOM 中渲染：

const title = React.createElement("h1", null, "Welcome!")
ReactDOM.render(title, document.getElementById("root"))

第一个参数为要渲染的 React 元素，第二个为目标节点，即在 DOM 中渲染的位置。

在 React 16 及后，ReactDOM.render() 的第一个参数可以为数组，表示同辈元素。

React 组件

用户界面的各个部分（比如按钮、列表、标题等）都可以称为组件。在构建用户界面时，应当考虑组件的重用性，或者尝试将元素分解为可重用的片段。

在 2013 年 React 刚开源的时候，创建组件使用的是 React.createClass() ，传入的参数对象需要一个 render() 方法，来返回要渲染的 React 元素。

在 ES6 及后新增了类语法后，React 引入了 React.Component API 来支持类语法创建组件：

class Title extends React.Component {
  render() {
    React.createElement("h1", { id: "title" }, "Welcome!")
  }
}

虽然现在仍可以用类语法创建 React 组件，但是在不久后会被弃用。目前更多的是用函数创建组件。

React 运行机制

页面设置​

React 元素​

创建 React 元素​

key 属性​

ReactDOM​

React 组件​