参数：CONFIG（object）

创建一个ReactClass（组件类），参数是一个对象且必须带有 render 属性方法，该方法必须返回一个封闭的容器（容器内可以有其它不限结构的容器）或 null/false（表示啥都不渲染）：

var Component = React.createClass({ render: function() { return this.props.a==1 ? <div><h1>标题</h1><p>123</p></div> : null } }); React.render( <Component a="1" />, document.body );

React.createElement

参数：TYPE（string/ReactClass），[PROPS（object）]，[CHILDREN（ReactElement）]

创建一个指定类型的React元素，注意第三个参数CHILDREN可以是任意个React元素：

var Component = React.createClass({ render: function() { return this.props.a==1 ? <p>123</p> : null } }); React.render( React.createElement(‘div‘, null, React.createElement( ‘p‘, null, React.createElement(‘span‘, null, ‘Hello,‘), React.createElement(‘span‘, null, ‘world,‘), React.createElement( Component, {a : 1}) ) ), document.body );

其实 React.createElement 是一个语法糖：

var reactElement = React.createElement(type, props, children); //等价于下面两行： var div = React.createFactory(‘div‘); var reactDivElement = div(props, children);

React.cloneElement

参数：TYPE（ReactElement），[PROPS（object）]，，[CHILDREN（ReactElement）]

克隆并返回一个新的 ReactElement （内部子元素也会跟着克隆），新返回的元素会保留有旧元素的 props、ref、key，也会集成新的 props（只要在第二个参数中有定义）。

var Hello = React.createClass({ render: function() { var span = <span a="1">VaJoy</span>; var newSpan = React.cloneElement(span, {b:‘2‘}, <em>CNBlog</em>); console.log(newSpan.props); return <div>Hello {span},{newSpan}</div>; //Hello VaJoy,CNBlog } }); React.render(<Hello />, document.body);

要注意的是，createElement 的第一个参数必须是字符串或 ReactClass，而在 cloneElement 里第一个参数应该是 ReactElement：

var Li = React.createClass({ render: function() { return <li>{this.props.i}</li> } }); var Ul = React.createClass({ deal : function(child, index){ //注意下面这行换成 createElement 会报错！因为child是ReactElement而不是ReactClass或字符串 return React.cloneElement(child, {i:index}); }, render: function() { return <ul>{this.props.children.map(this.deal)}</ul>; } }); React.render(( <Ul> <Li i="9" /> <Li i="8" /> <Li i="7" /> </Ul> ), document.body);

React.createFactory

参数：TYPE（string/ReactElement）

返回一个某种类型的ReactElement工厂函数，可以利用返回的函数来创建一个ReactElement（配置 props 和 children）：

var Component = React.createClass({ render: function() { return this.props.a==1 ? <p>123</p> : null } }); var p = React.createFactory(Component), ReactElementP = p({a:1}), div = React.createFactory(‘div‘), ReactElementDiv = div(null, ReactElementP); React.render( ReactElementDiv, document.body );

React.render

参数：REACTELEMENT（ReactElement），CONTAINER（DOMElement），[CALLBACK（function）]

渲染一个 ReactElement 到 container 指定的 DOM 中，返回一个到该组件的引用。如果提供了可选的回调函数，则该函数将会在组件渲染或者更新之后调用: