createPortal
在Portal中提供了一种将子节点渲染到已 DOM 节点中的方式,该节点存在于 DOM 组件的层次结构之外。
也就是说createPortal可以把当前组件或element元素的子节点,渲染到组件之外的其他地方。
来看看createPortal(child, container)的入参:
child:任何可渲染的子元素container:是一个DOM元素
flushSync
可以将回调函数中的更新任务,放到一个较高级的优先级中,适用于强制刷新,同时确保了DOM会被立即更新
render
这个是我们在react-dom中最常用的Api,用于渲染一个react元素
createRoot
在React v18中,render函数已经被createRoot所替代
createRoot会控制你传入的容器节点的内容。当调用 render 时,里面的任何现有 DOM 元素都会被替换。后面的调用使用 React 的 DOM diffing 算法进行有效更新。
并且createRoot不修改容器节点(只修改容器的子节点)。可以在不覆盖现有子节点的情况下将组件插入现有 DOM 节点。
hydrate
服务端渲染用hydrate与 render()相同,但它用于在 ReactDOMServer 渲染的容器中对 HTML 的内容进行 hydrate 操作。
hydrate(element, container[, callback])
hydrateRoot()
hydrate在React v18也被替代为hydrateRoot()
hydrateRoot(container, element[, options])
unmountComponentAtNode
从 DOM 中卸载组件,会将其事件处理器(event handlers)和 state 一并清除。如果指定容器上没有对应已挂载的组件,这个函数什么也不会做。如果组件被移除将会返回 true,如果没有组件可被移除将会返回 false。
unmountComponentAtNode 同样在React 18中被替代了,替换成了createRoot中的unmount()方法
const root = createRoot(container);
root.render(element);
root.unmount()
findDOMNode
用于访问组件DOM元素节点(应急方案),官方推荐使用ref
findDOMNode只能用到挂载的组件上findDOMNode只能用于类组件,不能用于函数式组件- 如果组件渲染为
null或者为false,那么findDOMNode返回的值也是null - 如果是多个子节点
Fragment的情况,findDOMNode会返回第一个非空子节点对应的 DOM 节点。 - 在严格模式下这个方法已经被
弃用
unstable_batchedUpdates
可用于手动批量更新state,可以指定多个setState合并为一个更新请求