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://m.elefans.com/xitong/1728693314a1169867.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论