最近开始了React的学习之旅，感觉这些框架都是一个套路。早先有学过VUE，它就像是在写模板，大部分是HTML。而React是在写模块，大部分是写js。
React中有一个神奇的技术就是JSX，VUE2.0中引入也了React的JSX技术，但是React为什么要使用JSX技术呢？我们先来看官方的观点：
JSX is not required to use React, but itmakes code more readable, and writing it feels like writing HTML.
React并不是必须使用JSX，但是JSX可以增加代码的可读性，并且写起来就像写HTML一样。
JSX为什么可以增加代码的可读性呢?
其实是这样的。React中有一个核心的机制，虚拟DOM。虚拟DOM是一个原生的JavaScript对象，并且具有真实DOM信息的一些属性。它在APP与DOM之间建立了一个抽象层，当数据和状态发生改变时，只需要在虚拟DOM上进行操作，最后再同步到真实的DOM中。由此可见，虚拟DOM可以减少直接操作DOM的次数，减少不必要的[repaint和reflow]，提高性能。
虚拟DOM是如何更新的呢？
当状态和数据发生变化时，React会生成新的虚拟DOM树，然后将新的虚拟DOM树与旧虚拟DOM树进行对比，这用到了diff算法。diff算法的核心是对树进行分层比较，并且只对两棵树的同层进行比较。React会对新旧两棵树进行一个深度优先的遍历，每遍历到一个节点就把该节点和新的树进行对比。当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个DOM树的比较。
image.png
如果节点发生了跨级移动，则被移动的节点会直接被销毁，并且会创建新节点挂载到，目标DOM上。由此可见，在编写代码是要加强DOM结构的稳定性，如果有必要更改，可以利用CSS来隐藏或显示某些节点，而不是真的移除或添加DOM节点。其实一旦接受了React的写法，就会发现前面所说的那种移动的写法几乎不会被考虑，这里可以说是React限制了某些写法，不过遵守这些实践确实会使得React有更好的渲染性能。
在React源码中，diff算法的核心部分为_updateChildren方法，它是ReactMultiChild.js内部的一个方法。
_updateChildren: function (nextNestedChildrenElements, transaction, context) {
var prevChildren = this._renderedChildren;
var removedNodes = {};
var mountImages = [];
var nextChildren = this._reconcilerUpdateChildren(prevChildren, nextNestedChildrenElements, mountImages, removedNodes, transaction, context);
if (!nextChildren && !prevChildren) {
return;
}
var updates = null;
var name;
// `nextIndex` will increment for each child in `nextChildren`, but
// `lastIndex` will be the last index visited in `prevChildren`.
var nextIndex = 0;
var lastIndex = 0;
// `nextMountIndex` will increment for each newly mounted child.
var nextMountIndex = 0;
var lastPlacedNode = null;
for (name in nextChildren) {
if (!nextChildren.hasOwnProperty(name)) {
continue;
}
var prevChild = prevChildren && prevChildren[name];
var nextChild = nextChildren[name];
if (prevChild === nextChild) {
// 同一个引用，说明是使用的同一个component,所以我们需要移动已有的子节点
updates = enqueue(updates, this.moveChild(prevChild, lastPlacedNode, nextIndex, lastIndex));
lastIndex = Math.max(prevChild._mountIndex, lastIndex);
prevChild._mountIndex = nextIndex;
} else {
if (prevChild) {
// Update `lastIndex` before `_mountIndex` gets unset by unmounting.
lastIndex = Math.max(prevChild._mountIndex, lastIndex);
// The `removedNodes` loop below will actually remove the child.
}
// The child must be instantiated before it's mounted.
updates = enqueue(updates, this._mountChildAtIndex(nextChild, mountImages[nextMountIndex], lastPlacedNode, nextIndex, transaction, context));
nextMountIndex++;
}
nextIndex++;
lastPlacedNode = ReactReconciler.getHostNode(nextChild);
}
// Remove children that are no longer present.
for (name in removedNodes) {
if (removedNodes.hasOwnProperty(name)) {
// 添加新的子节点在指定的位置上
updates = enqueue(updates, this._unmountChild(prevChildren[name], removedNodes[name]));
}
}
if (updates) {
processQueue(this, updates);
}
this._renderedChildren = nextChildren;
if (process.env.NODE_ENV !== 'production') {
setChildrenForInstrumentation.call(this, nextChildren);
}
}
关于react的渲染和更新机制的具体操作将在下一篇文章中介绍，现在我们回归最前面的问题，JSX在React中有什么作用呢？
如果不使用JSX，官方提供了React.createElement()机制，如下所示：
var slider = React.createElement(
'div',
{className: 'sidebar'},
null
)
我们来看一看React.createElement的源码：
ReactElement.createElement = function (type, config, children) {
var propName;
//初始化
var props = {};
var key = null;
var ref = null;
var self = null;
var source = null;
// 提取参数
if (config != null) {
ref = config.ref === undefined ? null : config.ref;
key = config.key === undefined ? null : '' + config.key;
self = config.__self === undefined ? null : config.__self;
source = config.__source === undefined ? null : config.__source;
// 提取出config中的prop，并进行存储
for (propName in config) {
if (config.hasOwnProperty(propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
props[propName] = config[propName];
}
}
}
// 提取child信息
var childrenLength = arguments.length - 2;
if (childrenLength === 1) {
// only one child
props.children = children;
} else if (childrenLength > 1) {
// multiple child
var childArray = Array(childrenLength);
for (var i = 0; i < childrenLength; i++) {
childArray[i] = arguments[i + 2];
}
props.children = childArray;
}
// 提取defaultProps，对于没有的属性设置默认值
if (type && type.defaultProps) {
var defaultProps = type.defaultProps;
for (propName in defaultProps) {
if (props[propName] === undefined) {
props[propName] = defaultProps[propName];
}
}
}
// 返回一个ReactElement对象
return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
};
ReactElement源码:
var ReactElement = function (type, key, ref, self, source, owner, props) {
var element = {
// This tag allow us to uniquely identify this as a React Element
$$typeof: REACT_ELEMENT_TYPE,
type: type,
key: key,
ref: ref,
props: props,
// Record the component responsible for creating this element.
_owner: owner
};
return element;
}
由此可见，一个 ReactElement 实例具有ＤＯＭ的４个必要属性，分别是type、key、ref、props。并且它没有方法，原型也没有任何属性和方法。ReacrtElement的实例对象就是我们前面所说的虚拟的DOM对象。
因此，完全可以用JavaScript构建完整的界面DOM树，就像可以用JavaScript创建真实DOM。但这样的代码可读性并不好，于是就出现了JSX。它是javaScript的扩展，并且提供了语义化标签，使用熟悉的语法定义HTML树，并且程序结构更加直观化。将上面的代码用JSX改写后如下：
var slider ＝ （<div className="sidebar" />）
XML语法直接加入到JavaScript代码中，让你能够高效的通过代码而不是模板来定义界面。之后JSX通过翻译器转换到纯JavaScript再由浏览器执行。可以使用react-tools和babel将将jsx转码成js，但是前者已经被放弃了，下面我们就介绍babel的转码原理。
babel是一个转码器，但是它更像是一个编译器，将源代码编译成适合开发环境的另一种语言代码。我们知道编译过程一般有５个阶段：词法分析；语法分析；语义分析与中间代码产生；优化；目标代码生成。
词法分析是以词法规则为依据对输入的源程序进行单词及其属性的识别，识别出一个个单词符号；
语法分析是根据语言的语法规则，把单词流组成各类语法单位，如：短语、句子、过程、程序。
语义分析是将检查程序的语义正确性，以保证程序各部分能有意义的结合在一起，为以后的代码生成阶段收集类型信息；
中间代码是不依赖于机器但是又便于生成依赖于机器的目标代码的一种结构简单、含义明确的记号系统；
代码优化是对前面产生的中间代码进行加工变换，以期在最后阶段能产生更为高效的目标代码；
目标代码生成是把经过优化的中间代码转化成特定 机器上的低级语言代码。
babel的工作过程分为三个阶段：
Step1：解析，将代码字符串解析成抽象语法树；
Step2：遍历做转换，遍历抽象语法树，并将需要变化的地方直接在该语法树对象上做修改；
Step3：生成新代码，将变换后的新抽象语法树生成对应的字符串代码。
其中，在第Step1解析阶段包含词法分析、语法分析和语义分析，验证语法和语义的正确性。同时，由字符串代码生成抽象语法树，它是源代码抽象语法结构的树状表现形式。
总结：
React中引入了虚拟DOM，它是一个原生的JavaScript对象，相对于DOM对象来说更易于处理和操作。为了使代码结构更加清晰，React又引入了JSX语法，它是JavaScript扩展语法，同时也是带属性的树状结构语法，增加了代码的可读性。使用JSX语法必须使用转码器，将JSX转换为JS，代码才可以在浏览器上执行。
参考资料:
https://github.com/livoras/blog/issues/13
网友评论