【转】React 相关方法（API）介绍－ReactDom、Re

http://itbilu.com/javascript/react/EJiqU81te.html

React组件及子组件最终通过render
方法渲染到DOM中，该方法由ReactDOM
类库提供。页面的渲染可以在客户端或服务端完成，ReactDOMServer
类库使你可以在服务端完成组件的渲染。通过this.props.children
属性可以访问组件的子节点，而对子节点的处理的方法则由React.Children
类提供。

ReactDOM类库
1.1 渲染ReactElement：ReactDOM.render
1.2 移除组件：ReactDOM.unmountComponentAtNode
1.3 查找节点：findDOMNode()

ReactDOMServer类库
2.1 渲染为HTML：renderToString()
2.2 渲染为静态HTML：renderToStaticMarkup()

React.Children类
3.1 React.Children.map
3.2 React.Children.forEach
3.3 React.Children.count
3.4 React.Children.only
3.5 React.Children.toArray

1. ReactDOM类库

react-dom包提供了DOM操作的具体方法，如：组件渲染、节点找查等。你可以在程序的最顶层使用它，除了必要的DOM操作，大多数组件不需要使用这个模块。
1.1 渲染ReactElement：ReactDOM.render

ReactComponent render( ReactElement element, DOMElement container, [function callback])
渲染一个ReactElement
到DOM中
element
，要渲染的的ReactElement
container
，渲染结果在DOM中插入的位置
callback
，回调函数，可选。传入该值时，会在组件渲染完或更新完成后调用
返回值：React组件
如，渲染一个组件到DOM中（render.html）：

var App = React.createClass({ render: function () { 
    return (    <div className="divider">
        <h2>{this.props.children}</h2><hr/>
    </div> )}});
ReactDOM.render( <App>itbilu.com</App>, document.getElementById('example'), function(){
    console.log('rendered done'); 
});// rendered done

1.2 移除组件：ReactDOM.unmountComponentAtNode

boolean unmountComponentAtNode(DOMElement container)
container
，要清除组件的container

返回值：true或false

移除一个已经加载到DOM中的React组件，并清除对应的事件处理器和状态。如果container
中没有组件，则不会做任何操作。
示例，从DOM中移除React组件（unmountComponentAtNode.html）：
ReactDOM.render( <div className="divider"> <h2>itbilu.com</h2>

---

</div>, document.getElementById('example'));var result = ReactDOM.unmountComponentAtNode(document.getElementById('example'));console.log(result); // true

1.3 查找节点：findDOMNode()

DOMElement findDOMNode(ReactComponent component)
component
，React组件或DOM元素
返回值：DOM元素或null

当组件已经挂载到DOM中，会返回浏览器中的DOM元素。这个方法从DOM中读取值时很有用，如：读取DOM的尺寸等。大多数情况下，应该使用DOM的固定引用而非使用findDOMNode
方法。当render
返回null时findDOMNode
也会返回null。
示例，使用findDOMNode
方法查找渲染到DOM中的组件：
var App = React.createClass({ render: function () { return ( <div className="divider"> <h2>{this.props.children}</h2>

---

</div> )}});var reactEle = ReactDOM.render( <App>itbilu.com</App>, document.getElementById('example'));var element = ReactDOM.findDOMNode(reactEle);

2. ReactDOMServer
   类库
   react-dom/server
   包提供了组件的服端渲染功能。
   2.1 渲染为HTML：renderToString()

string renderToString(ReactElement element)
element
，React元素
返回值：HTML

渲染ReactElement
为原始HTML，这个方法只应该用在服务器端（虽然客户端也可以用）。你可以使用这个方法在服务端生成HTML字符串，并在页面请求时返回以使页面快速加载，并且生成的页面可以被搜索引擎SEO跟踪。
如果在服务器端已经渲染完成页面后，再调用ReactDOM.render()
方法，React会保留它且只做事件处理，以便有非常良好的首次加载体验。
示例：React不推荐在客户端使用renderToString
方法，为了操作方便，我们在下例中使用这个方法在客户端渲染一个ReactElement
为HTML（renderToString.html）：
var html = ReactDOMServer.renderToString( <div className="divider"> <h2>itbilu.com</h2> </div>);document.getElementById('example').innerHTML = html;

2.2 渲染为静态HTML：renderToStaticMarkup()

string renderToStaticMarkup(ReactElement element)
element
，React元素
返回值：HTML

该方法与renderToString
方法类似，但这个方法不会生成额外的DOM特性，如：data-react-id
等 React内部所使用的特性。当你想使用一个简单的静态页面生成器时这个方法非常有用，它会剥离额外的特性且会节省大量字节。

3. React.Children
   类
   React.Children
   是一个工具类，它提供了对组件不透明数据结构this.props.children
   的处理功能。
   3.1 React.Children.map

array React.Children.map(object children, function fn [, object thisArg])
在每个直接子元素（children
）上调用fn
函数。如果 children
是一个内嵌的对象或者数组，它将被遍历（不会传入容器对象到fn
中）。如果children
参数是 null 或者 undefined，那么返回 null 或者 undefined 而不是一个空对象。

3.2 React.Children.forEach

React.Children.forEach(object children, function fn [, object thisArg])
与React.Children.map
方法功能类似，但不返回数组。

3.3 React.Children.count

number React.Children.count(object children)
统计children
中的子组件数，和传递给map
、forEach
回调函数的调用次数一致。

3.4 React.Children.only

number React.Children.only(object children)
返回children
中仅有的子级。否则抛出异常。

3.5 React.Children.toArray

array React.Children.toArray(object children)
将不透明的子组件children
转换为一个水平的数组。这在你操作子组件集合使用render
方法时非常有用，特别是在你想在传递结果前重新排列或分隔this.props.children
时。