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

1.概述

react-dom中的顶级API

render()
unmountComponentAtNode()
findDOMNode()

浏览器支持情况

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

2.函数具体

render()

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

将React元素插入到被提供的容器中，同时返回一个组件的引用。
如果React元素已经渲染到了容器中，那么当前的render操作就会变成更新。
回调函数发生在组件被渲染到DOM或者更新完之后。

注意

1. ReactDOM.render()进行渲染的是针对于你提供的容器，同时其中任何已经存在的DOM元素都会在第一次渲染时被替换，接下来的更新就是基于DOM diff算法来优化。

2. ReactDOM.render()不会修改容器，只会修改容器的孩子，它的渲染会覆盖之前存在的孩子内容

3. 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