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