React入门 createClass使用说明
在使用React.createClass之前，我们先来看官方给出的解释
ReactClass createClass(object specification)
创建一个给出说明的组件类（这个给出的说明也就是其参数 object specification）。这个组件实现一个render方法，并且render方法返回一个单一的节点。这个返回的节点可能包含任意深度的子节点结构。该方法与标准的原型类不同的地方就是不用使用new去实例化对象。这些组件被很好的封装起来，可以很好的为你创建后台实例。
当然，单看这些定义我是不知道该如何去使用createClass方法的（我觉的我翻译的不够标准）。那下面我们直接通过一个实例来解释如何使用React.createClass()。
在本篇文章，我们只是实现render方法，并且在介绍应该注意的问题。对于object specification的详细介绍，那就涉及到了组件的详细说明和生命周期的知识，在本篇我们不做介绍。
例一
var Root = React.createClass({
render:function(){
return (
<h1>迹忆博客</h1>
);
},
});
ReactDOM.render(
<Root />,
document.getElementById('content')
);
这是一个简单的例子。虽说简单，但是有两个需要注意的地方。
第一点就是生命的Root首字母必须大写，也就是说我们如果将Root 写成root，那么<root />就会被直接解析成html标签（<root></root>）。下面我们来看如下的代码（下面的代码是错误的）
var root = React.createClass({
render:function(){
return (
<h1>迹忆博客</h1>
);
},
});
ReactDOM.render(
<root />,
document.getElementById('content')
);
其解析的结果如下
<root data-reactid=".0"></root>
显然这不是我们想要的结果。
第二点是，在一个createClass创建的组件中只能有一个根节点。这个根节点可以有任意层的子节点。下面我们看如下的代码
var Root = React.createClass({
render:function(){
return (
<h1>迹忆博客</h1>
<a>www.onmpw.com</a>
);
},
});
ReactDOM.render(
<Root />,
document.getElementById('content')
);
这段代码也是存在错误的，在解析过程中会报如下的错误
SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag (22:18) 20 | return ( 21 | <h1>迹忆博客</h1> > 22 | <a>www.onmpw.com</a> | ^ 23 | ); 24 | }, 25 | }); ...("+loc.line+":"+loc.column+")";var err=new SyntaxError(message);err.pos=pos;err....
因此如果我们想要实现上述我们想要的结果，可以在h1和a的外面再加一层节点。如下
例二
var Root = React.createClass({
render:function(){
return (
<div>
<h1>迹忆博客</h1>
<a>www.onmpw.com</a>
</div>
);
},
});
ReactDOM.render(
<Root />,
document.getElementById('content')
);
这样就能保证一个组件中只有一个根节点，又能实现我们想要的效果。
其实对于render来说，该方法会返回一个React组件树，用来接受该组件树的变量名称必须首字母大写。并且该组件树只能有一个根节点，这也是符合实际情况的。最终这棵组件树会被ReactDOM.render渲染成HTML标签。
对于例二中的<div>标签，它并不是一个真正的DOM节点，而是一个虚拟的DOM节点。你可以这样认为，组件树中的这些节点就是一些标记或者数据，只是React知道该如何处理这些标记或者数据。
其实React.createClass的知识点很多，这里我只是简单介绍在使用过程中应该注意的问题。
希望对大家有所帮助。
本文转载自：迹忆客（https://www.jiyik.com）
以上是 React入门 createClass使用说明 的全部内容， 来源链接： utcz.com/z/290043.html
