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.1React.Children.map
   • 3.2React.Children.forEach
   • 3.3React.Children.count
   • 3.4React.Children.only
   • 3.5React.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)

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




3.React.Children类

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

3.1React.Children.map

array React.Children.map(object children,function fn [,object thisArg])

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




3.2React.Children.forEach

React.Children.forEach(object children,sans-serif; font-size:14px; line-height:20px"> 与React.Children.map方法功能类似，但不返回数组。
 
 
 
 
 3.3React.Children.count
 
number React.Children.count(object children)
 
 统计children中的子组件数，和传递给map、forEach回调函数的调用次数一致。
 
 
 
 
 3.4React.Children.only
 
number React.Children.only(object children)
 
 返回children中仅有的子级。否则抛出异常。
 
 
 
 
 3.5React.Children.toArray
 
array React.Children.toArray(object children)
 
 将不透明的子组件children转换为一个水平的数组。这在你操作子组件集合使用render方法时非常有用，特别是在你想在传递结果前重新排列或分隔this.props.children时。
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!