admin管理员组文章数量:1614997
历史文章目录连接: https://blog.csdn/yy763496668/article/details/113117040 此链接为CSDN连接,目的为方便大家一览博客目录!内容会定期更新。 |
微信公众号:猿媛大本营 |
概述:
上一篇文章记录了如何创建一个react 工程,本篇文章记录如何react和react dom的关系及如何创建和渲染元素到页面 |
正文:
react和react dom
React 在v0.14之前是没有 ReactDOM 的,所有功能都包含在 React 里。从v0.14(2015-10)开始,React 才被拆分成React 和 ReactDOM。为什么要把 React 和 ReactDOM 分开呢?因为有了 ReactNative。React 只包含了 Web 和 Mobile 通用的核心部分,负责 Dom 操作的分到 ReactDOM 中,负责 Mobile 的包含在 ReactNative 中。
相同的是都需要import React from 'react'。
而Web应用需要import ReactDOM from 'react-dom';
Mobile应用需要import {Text, View} from 'react-native'
创建元素React.createElement
修改main.tsx源码
const title = React.createElement('h1',null,"hello world");
渲染元素ReactDOM.render
通过React.createElement创建的元素并不能在浏览器页面上看到,需要把元素挂载到某个元素下才可以看到
ReactDOM.render(title,document.getElementById('root'));
root 是入口文件index.html页面中的某个元素的id
main.tsx完整源码如下:
import React from 'react'
import ReactDOM from 'react-dom'
const title =React.createElement('h1',null,"hello world");
ReactDOM.render(title,document.getElementById('root'));
运行的结果如下:
单独使用ReactDOM.render 函数也可,该函数既可以创建元素也可以直接将元素挂载到目标节点之下。
修改main.tsx源码
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
<div>这是入口文件呀</div>,
document.getElementById('root')
)
结果如下图:
如果单文件中的源码行数太多,这时候也可以使用组件的方式来加载文件。
操作如下:
在src目录下创建App.tsx 如果src目录下有此文件则删除里面的所有源码。
填充如下代码,并保存:
import React from 'react'
function App() {
return (
<div>这是入口文件</div>
)
}
export default App
修改main.tsx中的源码如下:
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)
这次不同于之前的文件中需要通过
import App from './App'
引入APP.tsx文件 中的APP组件
通过ReactDOM.render 进行渲染到页面,
在以上代码中直接替换ReactDOM.render 中的代码如下也可:
ReactDOM.render(
<App />,
document.getElementById('root')
)
结果将是一样的。
但是使用<React.StrictMode></React.StrictMode> 将<App /> 包裹主要有以下优点:
StrictMode 是一个用来检查项目中潜在问题的工具。与 Fragment 一样,StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。
严格模式检查仅在开发模式下运行;它们不会影响生产构建。
StrictMode 目前有助于:
1、识别不安全的生命周期
2、关于使用过时字符串 ref API 的警告
3、关于使用废弃的 findDOMNode 方法的警告
4、检测意外的副作用
5、检测过时的 context API
【文章导航】
https://blog.csdn/yy763496668/article/details/113117040
THANKS ALL !!
【关注、点赞,收藏】 关注公众号,您将第一时间收到文章更新 微信公众号:猿媛大本营 QQ群号:1056320746 |
版权声明:本文标题:002-react项目入口文件 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1728693314a1169867.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论