扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了react-dom的五个接口是什么,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
目前创新互联建站已为数千家的企业提供了网站建设、域名、网络空间、网站运营、企业网站设计、张家口网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。react-dom是react开发项目时需要使用的工具包,是一种针对dom的平台实现,主要用于在web端进行渲染。react-dom包提供了DOM特定的方法,可以在应用程序的顶层使用,也可以作为React模型之外的特殊操作DOM的接口。
使用react开发网页的话,我们难免会下载两个包,一个是react,一个是react-dom,其中react是react的核心代码。
react-dom 的 package 提供了可在应用顶层使用的 DOM(DOM-specific)方法,react-dom 包提供了 DOM 特定的方法,可以在你的应用程序的顶层使用,如果有需要,你可以把这些方法用于 React 模型以外的地方,作为 React模型 之外的特殊操作DOM的接口。不过一般情况下,大部分组件都不需要使用这个模块。
如果你使用 npm 和 ES6,你可以用import ReactDOM from 'react-dom'
进行引入。如果你使用 npm 和 ES5,你可以用var ReactDOM = require('react-dom')
进行引入。
react-dom的五个接口
1、render()
ReactDOM.render(element, container[, callback])
在提供的 container 里渲染一个 React 元素,并返回对该组件的引用(或者针对无状态组件返回 null)。
如果 React 元素之前已经在 container 里渲染过,这将会对其执行更新操作,并仅会在必要时改变 DOM 以映射新的 React 元素。
如果提供了可选的回调函数,该回调将在组件被渲染或更新之后被执行。
2、hydrate()
ReactDOM.render(element, container[, callback]) // 渲染一个 React 元素到由 container 提供的 DOM 中,并且返回组件的一个 引用(reference) (或者对于 无状态组件 返回 null )
3、unmountComponentAtNode()
ReactDOM.unmountComponentAtNode(container) // 从 DOM 中移除已装载的 React 组件,并清除其事件处理程序和 state 。 如果在容器中没有挂载组件,调用此函数什么也不做。 如果组件被卸载,则返回 true ,如果没有要卸载的组件,则返回 false
4、findDOMNode() 不建议使用
ReactDOM.findDOMNode(component) // 如果组件已经被装载到 DOM 中,这将返回相应的原生浏览器 DOM 元素。在大多数情况下,你可以绑定一个 ref 到 DOM 节点上,从而避免使用findDOMNode。
5、createPortal() 这个很有用处,啊啊啊!
ReactDOM.createPortal(child, container) // 创建一个 插槽(portal) 。 插槽提供了一种方法,可以将子元素渲染到 DOM 组件层次结构之外的 DOM 节点中
感谢你能够认真阅读完这篇文章,希望小编分享react-dom的五个接口是什么内容对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,遇到问题就找创新互联网站建设公司,,详细的解决方法等着你来学习!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流