React 相关方法（API）介绍－ReactDom、ReactDOMServer、子节点

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

1. ReactDOM类库
   • 1.1 渲染ReactElement：ReactDOM.render
   • 1.2 移除组件：ReactDOM.unmountComponentAtNode
   • 1.3 查找节点：findDOMNode()
2. ReactDOMServer类库
   • 2.1 渲染为HTML：renderToString()
   • 2.2 渲染为静态HTML：renderToStaticMarkup()
3. 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><hr/>  </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><hr/></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时。