初学react入门知识整理

最新推荐文章于 2025-06-23 09:20:50 发布

原创

最新推荐文章于 2025-06-23 09:20:50 发布 · 803 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react #前端 #学习入门

这篇博客总结了React入门所需的关键知识点，包括如何引入必要的JS文件，使用map进行遍历，以及在render中运用三目运算符。同时，讲解了在组件中设置状态并处理不同类型的数据，如数值和null。读者可以通过提供的链接查看完整代码和运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学react总结：

react的最大优点：
1、组件化
类似于web component的组件封装，面向未来。
可复用，可组合的组件框架
2、虚拟dom（virtual dom）
虚拟dom与直接innerhtml的比较：
innerHTML: render html string + 重新创建所有 DOM 元素
Virtual DOM: render Virtual DOM + diff + 必要的 DOM 更新
简单通俗来讲：在我们数据有变动时，不直接全部重新渲染dom结构，而是先在
虚拟dom进行修改，在让虚拟dom与真实dom进行比较，只将有数据改动的dom进行
修改。
3、JSX语法
JSX 是 JavaScript 语言的一种语法扩展，遇到html标签，按照html规则进行
解析；遇到代码块，就按照javasript规则进行解析。

react的学习目录

一、安装
二、HTML如何引入react
三、ReactDOM.render（）语法
四、JSX语法
五、组件（component）
1、render方法
1、props
2、proptypes
3、state／setState
六、虚拟DOM(Virtual DOM)
七、表单
八、组件的生命周期
九、如何实现ajax请求获取数据来源

react的学习内容

一、安装
react.js全家桶概念：
1⃣️主体：开发、生产阶段都需要一堆工具和库辅助，编译需要借助babel；
2⃣️redux：--？？（待完善）
3⃣️react-router：使用React Router路由控制跳转（待完善）

安装步骤：
安装node=》
npm install -g create-react-app=》
create-react-app hello-react=》
cd hello-react
npm start=》
终端会提示成功！

二、HTML如何引入react

react 是一定要引入三个js文件：

<head>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="./browser.min.js"></script>
</head>

react.js：这个是react的技术主体，是核心库
react-dom.js：提供与DOM相关的功能，其react-dom的核心功能就是把这些虚拟Dom渲染到文档中变成实际dom
browser.min.js：browser.js在浏览器端转换jsx文件
由于browser.min.js文件太大，可以用CDN链接加载 https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js

三、ReactDOM.render（）语法
ReactDOM.render（）是将我们用的模版转为HTML语言，并插入到指定的dom节点

趣味理解-例如：
ReactDOM.render(
模板（什么东西）
dom节点（要到哪里去）
);
实例：

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);

最低0.47元/天解锁文章

200万优质内容无限畅学