React DOM

196 阅读2分钟

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()

hydrateReact 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合并为一个更新请求