render()
ReactDOM.render(element, container[, callback])
该方法用于将react组件挂载至一个html标签中,该挂载方式会覆盖掉html标签中本来有的元素,因此一般以一个空的div作为挂载点。
该方法会返回一个该组件的ref,但若渲染的React元素为无状态组件时,则返回null
unmountComponentAtNode()
ReactDOM.unmountComponentAtNode(container)
该方法与render()相对应,用于卸载html节点上的React组件,返回一个bool值表示有没有组件被移除。
findDOMNode()
ReactDOM.findDOMNode(component)
如果组件已经被挂载到 DOM 上,此方法会返回浏览器中相应的原生 DOM 元素。此方法对于从 DOM 中读取值很有用,例如获取表单字段的值或者执行 DOM 检测(performing DOM measurements)。大多数情况下,你可以绑定一个 ref 到 DOM 节点上,可以完全避免使用 findDOMNode。
当组件渲染的内容为 null
或 false
时,findDOMNode
也会返回 null
。当组件渲染的是字符串时,findDOMNode
返回的是字符串对应的 DOM 节点。从 React 16 开始,组件可能会返回有多个子节点的 fragment,在这种情况下,findDOMNode
会返回第一个非空子节点对应的 DOM 节点。
findDOMNode 只在已挂载的组件上可用(即,已经放置在 DOM 中的组件)。如果你尝试调用未挂载的组件(例如在一个还未创建的组件上调用 render() 中的 findDOMNode())将会引发异常。findDOMNode
不能用于函数组件。
findDOMNode
是一个访问底层 DOM 节点的应急方案(escape hatch)。在大多数情况下,不推荐使用该方法,因为它会破坏组件的抽象结构。严格模式下该方法已弃用。
createPortal()
ReactDOM.createPortal(child, container)
第一个参数(child
)是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment。第二个参数(container
)是一个 DOM 元素。
该方法可以将一个其子节点渲染到任意一个DOM节点中(甚至是React组件结构之外,body中的任何一个DOM)
一个 portal 的典型用例是当父组件有 overflow: hidden
或 z-index
样式时,但你需要子组件能够在视觉上“跳出”其容器。例如,对话框、悬浮卡以及提示框。
Portal实际上还是在React树中,因此他的事件冒泡路径是React的组件中,而不是被挂载的DOM(container)