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

    xiaoxiao2021-03-25  22

    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

    转载请注明原文地址: https://ju.6miu.com/read-150388.html

    最新回复(0)