React 拾遗：React.createElement 与 JSX

如何使用代码

安装项目前置依赖，以及启动项目的方法，参看：React 拾遗：项目脚手架。

请根据文章内容，把相应部分的代码注释取消，即可运行。

摘要

本文介绍

  • document.createElement, React.createElement 与 JSX 三种方法创建 DOM 的比较
  • JSX 的 div 标签包裹并列元素的限制
  • 突破 JSX 的 div 包裹限制的两种方法

项目代码地址：React 拾遗：React.createElement 与 JSX

DOM 向JSX的演进

网页由 DOM 元素构成。React DOM 并不是浏览器的 DOM，而是 React DOM 只是用来告诉浏览器如何创建 DOM 的方法。通常情况下，我们并不需要 React 就能创建出一个 DOM 元素，但是 React 创建与管理 DOM 的方式有组件化、虚拟 DOM 等更高层次的抽象，由此带来的优势是更快的渲染速度，以及更好的维护性，因此值得去尝试。

下面分别用 JavaScript 原生方法，React.createElement 方法，以及 JSX 方法来创建一个h1元素，class设置为main，最后挂载在 id 为 root 的 div 元素下面。

html结构应该如下：

<div id="root">
  <h1 id="main">Hello React</h1>
</div>

1 document.createElement

JavaScript原生方法，没有过多需要解释的部分。

// 方法1：document.createElement
const title = document.createElement('h1');
title.innerText='Hello React (method 1)';
title.className='main';
document.getElementById('root').appendChild(title);

2 React.creaetElement

第二种方法是用 React 的 createElement 来创建 React DOM。

// 方法2：React.createElement
import React from 'react';
import ReactDOM from 'react-dom';

const title = React.createElement("h1", {className: "main"}, "Hello React (method 2)");
ReactDOM.render(title, document.getElementById('root'));

其中 createElement(a, b, c)

  • 第一个参数 a：表示元素的类型，比如：h1, div 等。
  • 第二个参数 b：表示该元素上的属性，使用 JavaScript 对象方式表示。
  • 第三个参数 c：表示该元素内部的内容，可以是文字，可以继续嵌套另外一个 React.createElement(a, b, c)。

这种方法其实在实际 React 开发中几乎不会使用，因为可以直接 JSX 方法。

3 JSX

JSX 是一种 JavaScript 的语法糖。Facebook 开发JSX出来，主要用于 React 中。虽然 JSX 的内容会长得像 html，但还是 JavaScript。

用 JSX 方法来创建 React DOM 的代码如下：

// 方法3：JSX
import React from 'react';
import ReactDOM from 'react-dom';

const title = (
  <h1>Hello React (method 3)</h1>
);

ReactDOM.render(title, document.getElementById('root'));

3.1 代码逐行解读：

第1行： import React from 'react';

有 JSX 的地方，在文件开头就需要引入 React，因为实际上 JSX 是使用了 React.createElement，JSX 只是一个JS 的语法糖，所以需要引入 React 包，否则会报错。

第2行： import ReactDOM from 'react-dom';
react-dom 是一个把React 代码渲染到网页端的包。如果在移动端渲染，就需要使用 React Native 的相关包。
目前（截至2017年12月3日），React 与 ReactDOM 都更新到了 16.0.0，所以在 package.json 中可以看到这两个版本都是最新的版本。

第4-6行：

const title = (
  <h1>Hello React (method 3)</h1>
);

这就是一段 jsx 代码，实际是 React.createElement 创建一个 React DOM 对象，完全等同于下面这行代码。

const title = React.createElement("h1", {className: "main"}, "Hello React (method 3)");

JSX 更加直观，符合我们对 html 结构的认知，如果都用 React.createElement 去创建 React DOM，会非常的繁琐，且容易出错。

第8行：

ReactDOM.render(title, document.getElementById('root'));

把上面创造出来的 React DOM 对象，渲染到网页 id 为 root 的元素中。

3.2 JSX的限制：标签的包裹

但是 JSX 有一个限制，就是在 JSX 中 html 代码第一层只能写一个元素。如果有多个标签（元素）并列，形成所谓的相邻JSX元素（adjacement jsx elements），就会报语法错误。通常这种多元素并列的情况，就用在它们外面包裹一层 div。

(1) 错误的代码

举例来看，如果 index.js 写成如下代码：

// 没有 div 包裹会报错
import React from 'react';
import ReactDOM from 'react-dom';

const title = (
  <h1>Parallel elements demo</h1>
  <p>Content</p>
);

ReactDOM.render(title, document.getElementById('root'));

命令行中会报语法错误：相邻 JSX 元素必须用封闭的标签包裹。

Module build failed: SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag (35:2)
(2) 正确的代码

相邻元素 Adjacent JSX elements，在这里其实就是并列的 h1 与 p 标签。所以这里的解决方法就是用一个 div 标签来包裹 h1 与 p 标签。

// 正确写法：用 div 包裹并列标签
import React from 'react';
import ReactDOM from 'react-dom';

const title = (
  <div>
    <h1>Parallel elements demo</h1>
    <p>Content</p>
  </div>
);

ReactDOM.render(title, document.getElementById('root'));

3.3 突破JSX标签包裹限制

注意：如果刚接触 React，这部分内容可以跳过后面再来看。

对于 jsx 外层需要包裹一层 div，如果要突破这个限制，目前有两种方法：

  • 返回数组
  • 使用高阶组件做辅助
(1) 返回数组

如果的是数组，就没有问题。

// 突破JSX标签包裹限制1：返回数组
import React from 'react';
import ReactDOM from 'react-dom';

const arr = ['Adams', 'Bill', 'Charlie'];

const Arr = () => {
  return arr.map((item, index) => {
    return <p key={index}>{item}</p>
  })
}

ReactDOM.render(<Arr />, document.getElementById('root'));

这里是一个数组 arr，包含三个名字，然后用 map 方法得到一个包含三段 JSX 代码的数组。注意这里需要写成匿名函数，然后以 <Arr /> 自封闭标签的格式放入 ReactDOM 的第一个参数位置去渲染。

当然，这段代码还可以进行简写:

第一种简写 map 中的剪头函数少了 return

// 简写1
import React from 'react';
import ReactDOM from 'react-dom';

const arr = ['Adams', 'Bill', 'Charlie'];

const Arr = () => {
  return arr.map((item, index) => <p key={index}>{item}</p>);
};

ReactDOM.render(<Arr />, document.getElementById('root'));

第二种简写是 Arr 这个匿名函数少了 return。

// 简写2
import React from 'react';
import ReactDOM from 'react-dom';

const arr = ['Adams', 'Bill', 'Charlie'];

const Arr = () => (arr.map((item, index) => <p key={index}>{item}</p>));

ReactDOM.render(<Arr />, document.getElementById('root'));
(2) 高阶组件（High Order Component, hoc）

div 去包裹并列元素的痛点是，我们可能并不需要这个多余的 div 标签，可能会破坏 html 结构，也许上层做了 flex，并不能有效的传递到这些并列标签上。

所以这里引入了用于辅助的高阶组件 hoc。虽然高阶组件的名字听起来很吓人，然而做的事情很简单，就是传递的作用。

// 突破JSX标签包裹限制：方法2 高阶组件
import React from 'react';
import ReactDOM from 'react-dom';

const Aux = props => props.children;

const title = (
  <Aux>
    <h1>Parallel elements demo</h1>
    <p>Content</p>
  </Aux>
);

ReactDOM.render(title, document.getElementById('root'));

在上面这段代码中，const Aux = props => props.children; 就是高阶组件。Aux 这个高阶组件的作用是把标签包括的内容进行传递和显示（Aux 是英文中的 auxiliary）。查看最终 html 结构会发现 div 已经消失了，而且代码没有 div 也能正常。

高阶组件不仅仅是这里的传递作用，在 Redux 中会大量使用，后面会讲到。

另外，据称 React 16.2 开始有一个所谓的 fragment 的做法，就是 React 自带了 <Aux></Aux>，但是写成 <></>。在 React 16.2，代码可以写成如下格式：

import React from 'react';
import ReactDOM from 'react-dom';

const title = (
  <>
    <h1>Parallel elements demo</h1>
    <p>Content</p>
  </>
);

ReactDOM.render(title, document.getElementById('root'));
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,847评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,208评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,587评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,942评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,332评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,587评论 1赞 218
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,853评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,568评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,273评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,373评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,031评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2赞 269