在上一篇《自建仿React引擎(二)》中，已经针对React.js里面其中一个重要的对象props的作用以及实现进行了讲解，接下来，我准备讲解refs的作用及实现机制，在处理这个refs的时候，遇到了不少的麻烦，花了一些时间思考解决方案。
首先，我们来看看refs在React.js中的作用，具体看下图。
image
我们在组件中定义ref，代码示例如下：
image
编译后的代码如下：
image
注意，在父组件使用到的ref属性，作为子组件的入参进行传递。此时，如果按照传统的做法，先创建父组件，再创建子组件，ref又是子组件的入参，那么要实现refs的机制也就很简单了，直接在父组件的refs对象中，通过指定this.refs[ref] = 子组件进行赋值即可，然而，事实上React的组件创建流程是基于深度优先的创建机制，简要流程示意图如下。
image
React.js组件在渲染的过程中，会创建两类不同的对象，一个是ReactClass,一个是ReactElement。其中，ReactClass是自顶层至底层创建的顺序，而ReactElement则是自底层往顶层创建的顺序。
组件渲染时，先通过React.createClass创建出class对象，再通过class对象的render方法创建ReactElement对象，然后通过ReactDOM将ReactElement对象进行渲染。因此，实现refs的关键点就在于在创建子ReactElement对象的时候，要准确的找到最外层父组件ReactClass对象。
也许有人会说，那简单啊，在创建子组件的时候，碰到ref的，都通过一个统一的全局变量缓存起来，不就可以解决了吗？首先，从编译后的代码中，我们可以看得出，子组件是没有任何标识被哪个父组件包含，其次，父组件也没有标识这是最外层父组件，再者，子组件也允许有自己内部的ref，这样子通过全局变量缓存起来的解决方案就会相当复杂。(React的实现是基于对象继承，以代理的模式实现，有兴趣可以去看一下源码)。
经过再三的思考，发现此处适合用栈模型来解决会比较省事，于是编写了一个简单的栈模型，具体代码如下。
image
有了这个栈模型之后，我们就可以比较轻松的实现获取当前父组件class对象了。根据上面React组件渲染的流程，我们只要在React.createClass的时候，将class对象入栈，在当前class创建完ReactElement对象后，将class对象出栈。这样子就能保证子ReactElement在创建的时候，可以轻松获取当前运行环节最顶层的组件class对象，将自己与顶层组件class对象中的refs关联起来。
关键代码示例如下：
1.React.createClass
class.refs = {};//创建refs对象
ClassStacks.push(class);//入栈
2.React.createElement
if(class){//组件
var _node = class.render();
ClassStacks.pop(); //render完成，出栈。
if(props != undefined && props["ref"] != undefined) {
ClassStacks.get().refs[props["ref"]] = class;//此时栈的顶层元素是父组件，绑定的ref对象是组件
}
}else{//DOM元素
if(props != undefined && props["ref"] != undefined) {
ClassStacks.get().refs[props["ref"]] = _dom;//此时栈的顶层元素是父组件，绑定的组件是DOM元素
}
}
经过这样子的改造，我们就完成了组件refs的开发工作。下期，我们会针对state状态管理机制的实现进行讲解，谢谢大家。
引擎全部代码如下：
/**
- class运时期的栈模型
*/
var ClassStacks = (function() {
var vClasses = new Array();
return {
get: function() {
return vClasses[vClasses.length - 1] || {
props: {},
refs: {}
};
},
push: function(cls) {
vClasses.push(cls);
},
pop: function() {
return vClasses.pop();
}
}
})();
var React = {
createClass: function(cfg) { //直接量对象cfg
var _f = function(props) { //将当前结点的属性存放到直接量对象cfg中的props属性
if(cfg.getDefaultProps != undefined &&
typeof(cfg.getDefaultProps) === 'function') {
cfg.props = cfg.getDefaultProps();
}
//传入参数
for(var key in props) {
cfg.props[key] = props[key];
}
cfg.refs = {};//默认添加refs对象
cfg.props.children = []; //定义children对象
ClassStacks.push(cfg);//入栈
return cfg;
}
return _f;
},
createElement: function() {
var tagName = arguments[0]; //第1个入参是结点的名称
var props = arguments[1] || {}; //第2个入参是当前节点的属性
if(typeof(tagName) == 'string') {
var _node = document.createElement(tagName);
if(props) {
for(var key in props) {
if(key == 'ref') {
ClassStacks.get().refs[value] = _node;//绑定DOM元素
} else{
_node.setAttribute(key, props[key]);
}
}
}
//第3个入参，包括后面的参数都为当前节点的孩子节点
for(var index = 2; index < arguments.length; index++) {
_node.appendChild(arguments[index]);
}
return _node;
} else {
//组织处理chidren数组
var children = [];
for(var index = 2; index < arguments.length; index++) {
var param = arguments[index];
if(param && typeof param === 'object' &&
Array == param.constructor) { //处理children数组传递数组的情况
children = children.concat(param);
} else {
children.push(param);
}
}
var vDom = tagName(props); //创建Class。
vDom.props.children = children; //存放children对象
var _node = vDom.render(); //执行createClass返回的_f函数，执行cfg直接量对象里面的render方法
ClassStacks.pop(); //render完成，出栈。
if(props != undefined && props["ref"] != undefined) {
ClassStacks.get().refs[props["ref"]] = vDom;//此时栈的顶层元素是父组件
}
return _node;
}
}
}
var ReactDOM = {
render: function(ele, container) {
container.appendChild(ele);
}
}
我的公众号
网友评论