React 相关方法（API）介绍－元素与组件操作
JSX可以减少定义组件的复杂性，但对于React来说JSX并不是必须的，JSX标签最终会被转换为原生的JavaScript。除使用JSX语法外，还可以使用React提供的API来创建组件。本文将介绍使用React创建元素，及一些React中重要的API。
React引用- 元素操作API
- 2.1 创建元素：
React.createElement() - 2.2 元素克隆：
React.cloneElement() - 2.3
React.DOM命名空间 - 2.4 有效元素判断：
isValidElement()
- 2.1 创建元素：
- 组件操作API
- 3.1 创建组件类：
createClass() - 3.2 创建元素工厂函数：
createFactory()
- 3.1 创建组件类：
1. React引用
React是React库的入口，React中所有的方法都是通过该对象调用，React支持AMD和CommonJS（CMD）两种规范引用。
AMD规范的预编译包，React是全局的，可以像下现这样引用：
CommonJS模块系统（如：Node.js）中，使用require来引用React：
// 引用React
var React = require('react');
// 使用React
React.render(……);
2. 元素操作API
使用非JSX语法创建组件，首先要创建React元素（ReactElement）。React提供了创建元素、复制元素等方法。
2.1 创建元素：React.createElement()
ReactElement createElement( string/ReactClass type, [object props], [children ...] )
该方法创建并返回一个ReactElement对象，其参数如下：
type，可以是一个HTML标签或是一个React组件（ReactClass）props，可选参数，表示对象的属性children，第三个参数及其后的参数都会被认为是元素的子元素- 返回值：
ReactElement对象
示例，创建一个如下结构的组件：
itbilu.com
使用createElement()方法操作如下：
ReactDOM.render(
React.createElement('div', {className:'myClass'},
React.createElement('h2', null, 'itbilu.com'),
React.createElement('hr')
),
document.getElementById('example')
);
// itbilu.com
完整代码：createElement.html
2.2 元素克隆：React.cloneElement()
ReactElement cloneElement( ReactElement element, [object props], [children ...] )
该方法会从已有的ReactElement中复制，并返回一个新的ReactElement对象，其参数如下：
element，一个React元素（ReactElement）props，可选参数，表示对象的属性children，第三个参数及其后的参数都会被认为是元素的子元素- 返回值：
ReactElement对象
示例，已有如下元素：
React.createElement('div');
使用cloneElement()复制这个元素，并最终生前面示例中的HTML。复制方法如下，详见cloneElement.html：
var div = React.createElement('div');
ReactDOM.render(
React.cloneElement(div, {className:'myClass'},
React.createElement('h2', null, 'itbilu.com'),
React.createElement('hr')
),
document.getElementById('example')
);
2.3 React.DOM命名空间
React.DOM命名空间中是创建各种HTML元素的工厂方法，所有的方法都是对React.createElement()方法的封装，通过这个命名空间也以快捷的创建各个HTML元素。
ReactElement DOM.HTML_TAG( [object props], [children ...] )
创建一个名HTML_TAG的ReactElement，其参数如下：
props，可选参数，表示对象的属性children，第三个参数及其后的参数都会被认为是元素的子元素- 返回值：
ReactElement对象
React.DOM.*只是createElement()方法的快捷方式，它帮我们自动添加了createElement()方法的第一个参数type。以下两种方式执行结果相同：
React.createElement('div');
React.DOM.div();
2.4 有效元素判断：isValidElement()
React提供了isValidElement()方法，用于判断传入对象是否是有效的ReactElement。
boolean isValidElement(* object)
示例如下：
var div = React.createElement('div');
React.isValidElement(div); // true
React.isValidElement(document.getElementById('example')); // fase
3. 组件操作API
组件（Component）是对一个或一系列ReactElement的封装，在React中组件被认为是最小的功能分离点。合理的利用组件，可以解耦业务复杂度，更可以高效的完成UI的编写。
3.1 创建组件类：createClass()
ReactClass createClass(object specification)
创建并返回一个组件类（ReactClass）。组件内部必须实现render()方法，并且返回一个单个子级，而其内部可能会有很深的子级结构。
示例，将前面示例中的HTML结构定义成一个组件（createClass.html）：
var App = React.createClass({displayName: 'App',
render: function () {
return (React.createElement('div', {className:'myClass'},
React.createElement('h2', null, this.props.children),
React.createElement('hr')
));
}
});
创建组件类后，要将其渲染到页面除可以使用JSX语法引用组件外，还可以使用以下两种方法：
- 使用
createElement()方法创建ReactElement - 使用
createFactory()方法创建一个工厂函数，该函数会返回一个ReactElement
3.2 创建元素工厂函数：createFactory()
factoryFunction createFactory( string/ReactClass type )
创建一个返回ReactElements的工厂函数：
type，HTML标签（如：div、body等）或ReactClass
如，对前面的组件类创建一个工厂函数（createFactory.html）：
var AppClass = React.createClass({displayName: 'App',
render: function () {
return (React.createElement('div', {className:'myClass'},
React.createElement('h2', null, this.props.children),
React.createElement('hr')
));
}
});
var App = React.createFactory(AppClass);
创建后就不再需要使用JSX或cerateElement()方法：
ReactDOM.render(
App(null, 'itbilu.com'),
document.getElementById('example')
);
JSX可以减少定义组件的复杂性，但对于React来说JSX并不是必须的，JSX标签最终会被转换为原生的JavaScript。除使用JSX语法外，还可以使用React提供的API来创建组件。本文将介绍使用React创建元素，及一些React中重要的API。
React引用- 元素操作API
- 2.1 创建元素：
React.createElement() - 2.2 元素克隆：
React.cloneElement() - 2.3
React.DOM命名空间 - 2.4 有效元素判断：
isValidElement()
- 2.1 创建元素：
- 组件操作API
- 3.1 创建组件类：
createClass() - 3.2 创建元素工厂函数：
createFactory()
- 3.1 创建组件类：
1. React引用
React是React库的入口，React中所有的方法都是通过该对象调用，React支持AMD和CommonJS（CMD）两种规范引用。
AMD规范的预编译包，React是全局的，可以像下现这样引用：
CommonJS模块系统（如：Node.js）中，使用require来引用React：
// 引用React
var React = require('react');
// 使用React
React.render(……);
2. 元素操作API
使用非JSX语法创建组件，首先要创建React元素（ReactElement）。React提供了创建元素、复制元素等方法。
2.1 创建元素：React.createElement()
ReactElement createElement( string/ReactClass type, [object props], [children ...] )
该方法创建并返回一个ReactElement对象，其参数如下：
type，可以是一个HTML标签或是一个React组件（ReactClass）props，可选参数，表示对象的属性children，第三个参数及其后的参数都会被认为是元素的子元素- 返回值：
ReactElement对象
示例，创建一个如下结构的组件：
itbilu.com
使用createElement()方法操作如下：
ReactDOM.render(
React.createElement('div', {className:'myClass'},
React.createElement('h2', null, 'itbilu.com'),
React.createElement('hr')
),
document.getElementById('example')
);
// itbilu.com
完整代码：createElement.html
2.2 元素克隆：React.cloneElement()
ReactElement cloneElement( ReactElement element, [object props], [children ...] )
该方法会从已有的ReactElement中复制，并返回一个新的ReactElement对象，其参数如下：
element，一个React元素（ReactElement）props，可选参数，表示对象的属性children，第三个参数及其后的参数都会被认为是元素的子元素- 返回值：
ReactElement对象
示例，已有如下元素：
React.createElement('div');
使用cloneElement()复制这个元素，并最终生前面示例中的HTML。复制方法如下，详见cloneElement.html：
var div = React.createElement('div');
ReactDOM.render(
React.cloneElement(div, {className:'myClass'},
React.createElement('h2', null, 'itbilu.com'),
React.createElement('hr')
),
document.getElementById('example')
);
2.3 React.DOM命名空间
React.DOM命名空间中是创建各种HTML元素的工厂方法，所有的方法都是对React.createElement()方法的封装，通过这个命名空间也以快捷的创建各个HTML元素。
ReactElement DOM.HTML_TAG( [object props], [children ...] )
创建一个名HTML_TAG的ReactElement，其参数如下：
props，可选参数，表示对象的属性children，第三个参数及其后的参数都会被认为是元素的子元素- 返回值：
ReactElement对象
React.DOM.*只是createElement()方法的快捷方式，它帮我们自动添加了createElement()方法的第一个参数type。以下两种方式执行结果相同：
React.createElement('div');
React.DOM.div();
2.4 有效元素判断：isValidElement()
React提供了isValidElement()方法，用于判断传入对象是否是有效的ReactElement。
boolean isValidElement(* object)
示例如下：
var div = React.createElement('div');
React.isValidElement(div); // true
React.isValidElement(document.getElementById('example')); // fase
3. 组件操作API
组件（Component）是对一个或一系列ReactElement的封装，在React中组件被认为是最小的功能分离点。合理的利用组件，可以解耦业务复杂度，更可以高效的完成UI的编写。
3.1 创建组件类：createClass()
ReactClass createClass(object specification)
创建并返回一个组件类（ReactClass）。组件内部必须实现render()方法，并且返回一个单个子级，而其内部可能会有很深的子级结构。
示例，将前面示例中的HTML结构定义成一个组件（createClass.html）：
var App = React.createClass({displayName: 'App',
render: function () {
return (React.createElement('div', {className:'myClass'},
React.createElement('h2', null, this.props.children),
React.createElement('hr')
));
}
});
创建组件类后，要将其渲染到页面除可以使用JSX语法引用组件外，还可以使用以下两种方法：
- 使用
createElement()方法创建ReactElement - 使用
createFactory()方法创建一个工厂函数，该函数会返回一个ReactElement
3.2 创建元素工厂函数：createFactory()
factoryFunction createFactory( string/ReactClass type )
创建一个返回ReactElements的工厂函数：
type，HTML标签（如：div、body等）或ReactClass
如，对前面的组件类创建一个工厂函数（createFactory.html）：
var AppClass = React.createClass({displayName: 'App',
render: function () {
return (React.createElement('div', {className:'myClass'},
React.createElement('h2', null, this.props.children),
React.createElement('hr')
));
}
});
var App = React.createFactory(AppClass);
创建后就不再需要使用JSX或cerateElement()方法：
ReactDOM.render(
App(null, 'itbilu.com'),
document.getElementById('example')
);