React学习之高级ReactDOM(二十四)

前端之家收集整理的这篇文章主要介绍了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.

当然reffindDOMNode有着本质上的差别,ref获取的是当前组件的实例,而不是DOM,如果ref放在DOM获取的就是DOM节点元素,如果是组件则是组件实例,而findDOMNode获得的则是一个容器或者说一个组件中的DOM元素,也就是说,如果你用了多重组件嵌套,那么它会获得最开始出现的DOM元素。

所以说findDOMNode具有一定程度的穿透性,它能穿透一层又一层的组件,找到底层的DOM节点。

findDOMNode只能作用于已经被装载的组件,当然如果你传入一个DOM元素的话会返回它本身,如果你使用了一个没有装载完的元素就获取不到任何信息。

还有一个点需要注意的是,findDOMNode不能用于函数式组件

下一篇将讲ReactReactDOMServer

猜你在找的React相关文章