React.createClass
参数：config(object)
创建一个ReactClass(组件类)，参数是一个对象且必须带有render属性方法，该方法必须返回一个封闭的容器(容器内可以由其他不限结构的容器)或null/false(表示啥都不渲染):
var Component = React.createClass({
render: function() {
return this.props.a== ? <div><h1>标题</h1><p></p></div> : null
}
});
ReactDOM.render(
<Component a="" />, document.body
);
注意：在该方法里面，所有的this都会在最终调用时自动的绑定到当前组件的构造器上。
React.createElement
参数：type(string/ReactClass),[props(object)],[children(ReactElement)]
创建一个指定类型的React元素，注意第三个参数children可以是任意个React元素。
var Component = React.createClass({
render: function() {
return this.props.a== ? <p></p> : null
}
});
ReactDOM.render(
React.createElement('div', null,
React.createElement( 'p', null,
React.createElement('span', null, 'Hello,'),
React.createElement('span', null, 'world,'),
React.createElement( Component, {a : })
)
), document.body
);
React.cloneElement
参数：type(ReactElement),[props(object)],[children(ReactElement)]
克隆并返回一个新的ReactElement(内部子元素也会跟着克隆)，新返回的元素会保留有旧元素的props，ref，key，也会集成新的props(只要在第二个参数中有定义)
var Hello = React.createClass({
render: function() {
var span = <span a="">VaJoy</span>;
var newSpan = React.cloneElement(span, {b:''}, <em>CNBlog</em>);
console.log(newSpan.props);
return <div>Hello {span},{newSpan}</div>; //Hello VaJoy,CNBlog
}
});
ReactDOM.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>;
}
});
ReactDOM.render((
<Ul>
<Li i="" />
<Li i="" />
<Li i="" />
</Ul>
), document.body);
React.createFactory
参数：type(string/ReactClass)
返回一个某种类型的ReactElement工厂函数，可以利用返回的函数来创建一个ReactElement(配置props和children)
var Component = React.createClass({
render: function() {
return this.props.a== ? <p></p> : null
}
});
var p = React.createFactory(Component),
ReactElementP = p({a:}),
div = React.createFactory('div'),
ReactElementDiv = div(null, ReactElementP);
ReactDOM.render(
ReactElementDiv, document.body
);
React.isVailidElement
参数：something
判断参数是否是一个合法的ReactElement，并返回boolean值。
var Component = React.createClass({
render: function() {
return this.props.a== ? <p></p> : null
}
});
var com = <Component/>,
com2 = '<Component/>';
console.log(React.isValidElement(com)); //true
console.log(React.isValidElement(com2)); //false
React.DOM.tag
参数：attribute(object,null),children(string/ReactElement)
常规是用于在非JSX下来创建ReactElement，tag表示相应的dom类型，此外，首个参数可以定制相关的dom属性，第二个表示dom的内容
var div = React.DOM.div({name : 'div1'}, 'HELLO ', React.DOM.span(null, <em>WORLD</em>));
React.render(
div, document.body
)
React.PropTypes
用于组件内部验证传入props的类型，如果传入的类型不匹配，React会打印出警告
var Component = React.createClass({
propTypes : {
a : React.PropTypes.number.isRequired, //必须传入一个名为“a”、类型为number的props
callback : React.PropTypes.func //如果传入了名为“callback”的props，其类型必须是函数
},
render : function() {
return this.props.a== ? <p onClick={this.props.callback}></p> : null
}
});
var cb = function(){
alert('click!')
};
ReactDOM.render(
<Component a="" callback={cb} />, document.body
)
上面代码中，我们虽然给组件传入了名为a的props，但其类型为字符串，不是期望的number类型，故react会报出警告
更多的props期望类型如下：
React.createClass({
propTypes: {
// 可以声明 prop 为指定的 JS 基本类型。默认
// 情况下，这些 prop 都是可传可不传的。
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 所有可以被渲染的对象：数字，
// 字符串，DOM 元素或包含这些类型的数组。
optionalNode: React.PropTypes.node,
// React 元素
optionalElement: React.PropTypes.element,
// 用 JS 的 instanceof 操作符声明 prop 为类的实例。
optionalMessage: React.PropTypes.instanceOf(Message),
// 用 enum 来限制 prop 只接受指定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 指定的多个对象类型中的一个
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// 指定类型组成的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定类型的属性构成的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 指定Object对象内各属性的类型
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 加上 `isRequired` 来要求该 prop 不可为空
requiredFunc: React.PropTypes.func.isRequired,
// 不可为空的任意类型
requiredAny: React.PropTypes.any.isRequired,
// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
// 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
},
/* ... */
});
React.children
为处理this.props.children这个封闭的数据结构提供了有用的工具。它有如下几个方法：
1、React.Children.map(object children,function fun)，类似array.map()方法
var Component = React.createClass({
deal : function(child, index){
console.log(child, index);
return !!index && child; //第一个li会被过滤掉，因为其索引为0
},
render : function() {
return (
<ul>
{React.Children.map(this.props.children, this.deal)}
</ul>)
}
});
ReactDOM.render(
(
<Component>
<li></li>
<li></li>
<li></li>
</Component>
), document.body
)
2、React.Children.forEach(object children,function fn)，类似array.forEach()
var Hello = React.createClass({
render: function() {
React.Children.forEach(this.props.children, function(child){
console.log(child.props, child.key)
});
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<Hello name="World">
<li myProp="test"/>
<li key="blah2" myProp="test2"/>
<li key="blah3"/>
</Hello>, document.body);
3、React.Children.count(object children)
返回子元素的总数
var Component = React.createClass({
render : function() {
var nums = React.Children.count(this.props.children);
return (<ul>
<li>一共有{nums}个子元素</li> //
{this.props.children}
</ul>)
}
});
ReactDOM.render(
(
<Component>
<li></li>
<li></li>
<li></li>
</Component>
), document.body
)
4、React.Children.only(object children)
返回仅有一个子元素，否则(没有子元素或超过一个子元素)报错且不渲染任何东西
ReactDOM.render
参数：ReactElement,DOMElement,callback
渲染一个ReactElement到container指定的DOM中，并返回一个到该组件的引用，如果提供了可选的回调函数，则该函数将会在组件渲染或者更新之后调用：
var Component = React.createClass({
render: function() {
return this.props.a== ? <p></p> : null
}
});
var p = React.render(
<Component a="" />, document.body, function(){
console.log('OK')
}
);
setTimeout(function(){
console.log(p.props.a); //打印出“1”
}, )
因此如果我们希望在组件外部获取到组件内部(能通过this访问)的东西，可以将React.render的返回值赋予一个变量，在后续调用该变量即可。
ReactDOM.unmountComponentAtNode
参数：container(DOMElement)
从container指定的DOM中移除已经挂在的React组件，清除相应的事件处理器和state。如果在container内没有组件挂载，这个函数将什么都不做。如果组件成功移除，则返回true；如果没有组件被移除，则返回false。
var Component = React.createClass({
render: function() {
return this.props.a== ? <p></p> : null
}
});
ReactDOM.render(
<Component a="" />, document.body
);
setTimeout(function(){
var isUnmount = ReactDOM.unmountComponentAtNode(document.body);
console.log(isUnmount); //打印出true
}, )
ReactDOM.findDOMNode
ReactDOMServer.renderToString
参数：ReactElement
React为服务端提供一个方法，可以直接输出ReactElement为HTML字符串，将这些标记发送(比如res.write(HTMLString))给客户端，可以获得更快的页面加载速度，并且有利于搜索引擎抓取页面，方便做seo
var Component = React.createClass({
render: function() {
return this.props.a== ? <p></p> : null
}
});
var com = <Component a="" />,
comHTML = ReactDOMServer.renderToString(com);
console.log(comHTML); //输出“<p data-reactid=".0" data-react-checksum="-2122315716">123</p>”
ReactDOMServer.renderToStaticMarkup
参数：ReactElement
类似React.renderToString，但只生成纯粹的HTML标记字符串，不会包含类似data-reactid之类的React属性，从而节省字节数。
var Component = React.createClass({
render: function() {
return this.props.a== ? <p></p> : null
}
});
var com = <Component a="" />,
comHTML = ReactDOMServer.renderToStaticMarkup(com);
console.log(comHTML); //输出“<p>123</p>”