React 初探（一）

最近刚刚做完一个移动端的 React 的项目，想把其中的一些问题记录一下。

整体结构

1. 学习 React
2. 上手一个项目

概述

React is a JavaScript library for building user interfaces.

• 在原生 JS 中，我们都是进行 DOM 操作。当有一些操作时，我们总是先去 DOM 中拿到有用的信息，之后再进行一些逻辑的更改，最后再填充到 DOM 中。
• 在 React 中，其利用了一些技术，使得我们只需要在内存中存储一些有用的数据，之后生成标签，并渲染到 DOM 中，当有一些操作时，我们仅仅需要更改内存中的一些数据，之后重新生成标签，并重现渲染到 DOM 中。

那么如何使用 React 生成标签？又是如何将标签渲染到 DOM 中的呢？

上手一个 demo

React.createElement()
直接在线运行这个 demo，当点击 change button 的时候，文字将会改变。代码主要写了以下：

1. 声明变量 text 和 onButtonClick 函数，函数里面主要是更改 text 变量，之后运行 render 函数
2. 运行 render 函数
3. 声明 render 函数，render 函数主要做了：
   • 创建 span + button + div
   • 运行了 ReactDOM.render

通过这个 demo 可以知道：

• 在 React 中使用 React.createElement 生成标签
• 在 React 中使用 ReactDOM.render 函数将标签渲染到 DOM 中
• 在 React 中只需要更改变量，之后重新 render 便可以更新 DOM

API

React.createElement()

React.createElement(
  type,
  [props],
  [...children]
)

• 创建并返回给定类型的新 React 元素。类型参数可以是标签名的字符串（例如 div 或者 span）、React 组件类型（class 或者 function）或者是 React fragment 类型。
• 当使用 JSX 编写代码时，代码将会转换为使用 React.createElement()，如果使用 JSX，你通常将不会调用 React.createElement()

ReactDOM.render()

ReactDOM.render(element, container[, callback]);

• render 一个 React 元素到提供的 container 的 DOM 中，并返回对组件的引用（或者返回 null 对于无状态组件（stateless components））
• 如果 React 元素被事先 render 到了 container 中，那么这将对其执行更新，并且只在需要时改变 DOM 以反映最新的 React 元素。
• 如果提供了可选 callback，它将会在组件 render 或者 update 之后被调用

JSX -> JavaScript extension

JSX 是一种 JavaScript 的语法扩展，JSX 代表 Object。在编译之后 JSX 会被转化为普通的 JavaScript 对象，Babel 转译器（babel online）会把 JSX 转换成 React.createElement() 来调用。JSX 就是用 HTML 的形式来写 JavaScript。使用：

1. 在 JSX 中 JavaScript 表达式 要包含在大括号里
2. 需要在 JSX 代码外面扩上一个小括号
3. 使用引号定义以字符串为值的属性，也可以使用大括号来定义以 JavaScript 表达式为值的属性，切记你使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了，JSX 会将引号当中的内容识别为字符串而不是表达式
4. JSX 标签是闭合的，可以使用 />来闭合，并且可以相互嵌套
5. 在 JSX 中使用小驼峰命名法来定义属性名称，而不是 HTML 属性名称

上述 demo 使用 JSX 书写并在线运行

JSX 书写

React fragment

React.fragment 组件允许在 render 方法中返回多个元素，而不会创建额外的 DOM 元素

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}

stateless components

虚拟 DOM

demo

虚拟 DOM
在这个 demo 中，span 便是虚拟 DOM。虚拟 DOM 就是一个表示 DOM 节点的对象。是非真实的 DOM，一般用对象来表示。