您的位置：首页 > Web前端 > React

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

2016-09-09 17:04 585 查看
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><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
时。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航