这篇“React-dom的作用是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“reac
这篇“React-dom的作用是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“react-dom的作用是什么”文章吧。
“react-dom”的作用是将虚拟DOM渲染到文档中变成实际DOM;“react-dom”是react开发项目时需要使用的工具包,提供了DOM特定的方法,可以在应用程序的顶层使用,也可以作为React模型之外的特殊操作DOM的接口。
本教程操作环境:windows10系统、react17.0.1版、Dell G3电脑。
在使用react开发网页时,会下载两个包,一个是react,一个是react-dom,其中react包是react的核心代码,react-dom则是React剥离出的涉及DOM操作的部分。
react的核心思想是虚拟DOM,react包含了生成虚拟DOM的函数react.createElement,及Component类。当我们自己封装组件时,就需要继承Component类,才能使用生命周期函数等。而react-dom包的核心功能就是把这些虚拟DOM渲染到文档中变成实际DOM。
react-dom是react开发项目时需要使用的工具包,是一种针对dom的平台实现,主要用于在WEB端进行渲染。react-dom包提供了DOM特定的方法,可以在应用程序的顶层使用,也可以作为React模型之外的特殊操作DOM的接口。
react-dom主要包含三个api:findDOMnode、unmountComponentAtNode 和 render。下面按触发先后顺序进行介绍。
1、render
render用于将React渲染的虚拟DOM渲染到浏览器DOM,一般在顶层组件使用。该方法把元素挂载到 container 中,并且返回 element 的实例(即 refs 引用),如果是无状态组件,render 会返回 null。当组件装载完毕时,callback 就会被调用。其语法为:
render(ReactElement element,DOMElement container,[function callback])
例如:
import React from 'react'
import ReactDOM from 'react-dom'
import Router from './router'
import { Provider } from 'react-redux'
import store from './store'
// Provider react-redux的内容
ReactDOM.render(
<Provider store={store}>
<Router/>
</Provider>, document.getElementById('root'))
2、findDOMNode
findDOMNode用于获取真正的DOM元素,以便对DOM节点进行操作。
在此之前,首先要知道:在React中,虚拟DOM真正被添加到html中转变为真实DOM是在组件挂载(render())后,故而我们可以在componentDidMount和componentDidUpdate这两个方法中获取。示例如下:
import { findDOMNode } from 'react-dom';
<Example ref={ node=>{ this.node = node} }> // 利用ref获取Example组件的实例
const dom = findDOMNode(this.node); // 通过findDOMNode获取实例对应的真实DOM
注意:当涉及复杂操作时,还有很多元素DOM API可用,然而DOM操作会对性能产生很大影响,所以,应当尽量减少DOM操作。
3、unmountComponentAtNode
unmountComponentAtNode用于执行卸载操作,执行在componentWillUnmount之前。
以上就是关于“react-dom的作用是什么”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网html频道。
--结束END--
本文标题: react-dom的作用是什么
本文链接: https://www.lsjlt.com/news/97418.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0