React躬行记（2）——JSX

　　JSX既不是字符串，也不是HTML，而是一种类似XML，用于描述用户界面的JavaScript扩展语法，如下代码所示。在使用JSX时，为了避免自动插入分号时出现问题，推荐在其最外层用圆括号包裹，并且必须用一个元素包裹（例如下面的<div>元素）其它元素或文本，所有的元素还必须得闭合。

(<div>
  <input type="text" text={getName()} />
  <button className="btn">搜索</button>
</div>)

　　JSX为视图和数据架起了一座沟通的桥梁，它看起来与模板语言类似，但没有创造新的模板语法，因为JSX最终会被编译成普通的JavaScript对象，所以能够直接使用JavaScript语法。

一、元素

　　JSX中的元素称为React元素，分为两种类型：DOM元素和组件元素，前者对应原生的HTML元素，标签的首字母要小写；后者对应自定义元素，标签的首字母要大写，如下所示。

<button>提交</button>;            //DOM元素
<Btn>自定义按钮</Btn>;             //组件元素

1）React.createElement()

　　无论是DOM元素还是组件元素，最终都会通过Babel编译器将它们转换成React.createElement()方法的调用，例如下面的<button>元素。

<button className="btn">搜索</button>
//编译成
React.createElement(button, { className: "btn" }, "搜索");

　　React.createElement()能接收3个参数（如下所示），其中type是元素类型，也就是它的名称；props是一个由元素属性组成的对象；children是它的子元素（即内容），可以是文本也可以是其它元素。

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

　　方法的返回值是一个元素对象，简化过的对象如下所示。

{
  type: "button",
  props: {
    className: "btn",
    children: "搜索"
  }
}

　　为了避免在多人协作时出现相同名称的元素，可以为元素添加命名空间，例如调用UI模块中的Btn元素，可以像下面这么写。

const UI = {
  Btn: function(props) {
    return <button className={props.className}>{props.children}</button>;
  }
}
<UI.Btn className="btn">搜索</UI.Btn>

2）注释

　　JSX中的注释需要像下面这样，用一对花括号、斜杠和星号包裹。

{/* 表单中的提交按钮 */}
<button>提交</button>

3）表达式

　　在JSX的任意位置都能插入表达式，但必须用花括号包裹住才能有效，例如像下面这样调用getName()函数。注意，在JSX中不能插入语句。

function getName() {
  return "strick";
}
<div>{getName()}</div>

　　由于JSX本身就是一种表达式，因此它可以作为函数的参数、返回值或变量的值，如下所示。

if (true) {
  let fragment = <div>{getName()}</div>;
}

　　在JSX中传入的值都会自动被HTML转义，这样可以防止XSS攻击，例如输入“<p></p>”，输出“&lt;p&gt;&lt;/p&gt;”，如下所示。

//<p></p>
<div>{"<p></p>"}</div>

　　如果要输出不转义的值，那么可以用React提供的dangerouslySetInnerHTML属性，如下代码所示。它的值是一个包含__html属性的对象，其作用相当于调用DOM元素的innerHTML属性。

<div dangerouslySetInnerHTML={{__html: "<p></p>"}}></div>

4）内容

　　当元素的内容是字符串时，JSX会移除字符串中的空行，其内部的换行会被替换成一个空格，下面的两个元素是等价的。

<p>freedom strick</p>
<p>
  freedom

  strick
</p>

　　当元素的内容是false、null、undefined或true时，它们都不会被渲染到DOM结构中，因此下面的五个元素是等价的。

<p></p>
<p>{false}</p>
<p>{null}</p>
<p>{undefined}</p>
<p>{true}</p>

5）渲染

　　如果要将React元素渲染到页面的DOM结构中，可以调用ReactDOM.render()方法，此方法接收3个参数，如下所示。

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

　　element是要渲染的元素；container是页面中的一个节点，在此处起到容器的作用，element会被渲染到container中；callback是可选的回调函数，会在组件被渲染或更新之后触发。此方法的使用可参考下面的示例。

<div id="container">freedom</div>
<script type="text/babel">
  ReactDOM.render(
    <p>strick</p>,
    document.getElementById("container")
  );
</script>

　　当第一次调用ReactDOM.render()方法时，容器内部的元素会被全部替换掉，也就是执行上面的代码得到的结果如下所示，原先的字符串“freedom”被替换成了<p>元素。

<div id="container">
  <p>strick</p>
</div>

二、属性

　　React对元素属性进行了一次封装，不仅规范了属性的命名，还完善了浏览器的兼容性。在JSX中，DOM元素的属性对应标准的DOM属性和特性；而组件元素的属性都是无对应关系的自定义属性。除了以“data-”和“aria-”为前缀的元素属性要用小写命名之外，其余的都得遵循小驼峰命名法，例如maxlength变成maxLength、onclick变成onClick等。还有两个比较特殊的属性：class和for，由于它们是JavaScript的关键字，因此需要变成className和htmlFor后才能使用。

1）默认值

　　属性的默认值是true，下面的两个元素是等价的，页面上的显示如图1所示。

<input type="text" value />
<input type="text" value={true} />

图 1   带默认值的文本框

　　在标准的DOM中，诸如checked、disabled等布尔属性，它们的值要么为空要么为对应的关键字，例如“checked”、“disabled”；而JSX中的布尔属性，它们的值只能是true或false。

2）字符串和表达式

　　当属性的值是字符串时，其值需要用双引号包裹；当属性的值是表达式时，其值需要用花括号包裹，如下所示。

<input type="text" value="3" />
<input type="text" value={1 + 2} />

3）扩展属性

　　如果存在一个由元素属性组成的属性对象，那么就能利用ES6新增的扩展运算符，把属性对象展开并传递给元素，如下所示。

var props = { type: "text", value: "1" };
<input {...props} />
//相当于
<input type="text" value="1" />

　　相比直接在元素上设置属性，这种方式操作起来更加灵活。

三、虚拟DOM

　　HTML文档能被抽象成一棵由多种类型的节点构成的DOM树，而每次对DOM节点执行增删改查等操作，往往会触发非常消耗性能的重绘和重排。为了解决这个性能瓶颈，React引入了虚拟DOM。虚拟DOM（Virtual DOM）是构建在真实DOM之上的一层抽象，它将DOM元素映射成内存中的JavaScript对象（即通过React.createElement()得到的React元素），形成一棵JavaScript对象树。

　　在React中，将虚拟DOM转换成真实DOM的过程叫做调和（Reconciliation），而diff算法是保证调和高效的关键，因为diff算法会找出新旧虚拟DOM之间的差异部分，随后只更新真实DOM中需要变化的节点，而不是将整棵DOM树重新渲染一遍。经过虚拟DOM的隔离，开发人员已经不用再直接与页面上的真实DOM打交道了，如图2所示。

图 2   新的开发模式

　　虚拟DOM还有一大亮点，那就是将它与其他渲染器配合能够集成到指定的终端，即将React元素映射成对应的原生控件，前文所描述的是用react-dom在Web端渲染，还可以使用react-native在手机端（Android或iOS）渲染。