React学习之高级ReactDOM（二十四）

1.概述

react-dom

中的顶级

API

render()
unmountComponentAtNode()
findDOMNode()

浏览器支持情况

React

支持所有流行的浏览器，包括

IE9+

2.函数具体

render()

ReactDOM.render(
element,
container,
[callback]
)

将

React

元素插入到被提供的容器中，同时返回一个组件的引用。

如果

React

元素已经渲染到了容器中，那么当前的

render

操作就会变成更新。

回调函数发生在组件被渲染到

DOM

或者更新完之后。

注意

ReactDOM.render()

进行渲染的是针对于你提供的容器，同时其中任何已经存在的

DOM

元素都会在第一次渲染时被替换，接下来的更新就是基于

DOM diff

算法来优化。

ReactDOM.render()

不会修改容器，只会修改容器的孩子，它的渲染会覆盖之前存在的孩子内容

ReactDOM.render()

返回一个根组件的实例，然而，这个返回值是以前版本留下来的兼容做法，以后可能会被抛弃，所以如果你需要用到根组件的实例，请使用

ref

来获取，而不是得到那个返回值。

unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)

将一个被装载的组件从

container

中卸载下来并且清除它绑定的事件和状态，这里要注意如果你设置了定时器的话，可能没有停止，请在

componentWillUnmount()

将定时器给清除掉。

如果

container

内部没有组件，则这个函数什么用也不做，如果组件被卸载了，就会返回

true

否则返回

false

。

findDOMNode()

ReactDOM.findDOMNode(component)

如果该组件已经被装载在

DOM

上了，该函数就会返回浏览器中的

DOM

节点元素。

这个方法是非常有用的，它可以读取到被转载到

DOM

中的元素的

value

值和相关绑定事件。当然更多情况下，你都是通过

ref

去获取

DOM

节点而避免使用

findDOMNode

，当

render

返回

null

或者

false

的时候，

findDOMNode

返回

null.

当然

ref

和

findDOMNode

有着本质上的差别，

ref

获取的是当前组件的实例，而不是

DOM

，如果

ref

放在

DOM

中获取的就是

DOM

节点元素，如果是组件则是组件实例，而

findDOMNode

获得的则是一个容器或者说一个组件中的

DOM

元素，也就是说，如果你用了多重组件嵌套，那么它会获得最开始出现的

DOM

元素。

所以说

findDOMNode

具有一定程度的穿透性，它能穿透一层又一层的组件，找到底层的

DOM

节点。

findDOMNode

只能作用于已经被装载的组件，当然如果你传入一个

DOM

元素的话会返回它本身，如果你使用了一个没有装载完的元素就获取不到任何信息。

还有一个点需要注意的是，

findDOMNode

不能用于函数式组件

下一篇将讲

React

的

ReactDOMServer