当前位置：首页 > news >正文

01_React简介、基础入门

news 文章来源：https://blog.csdn.net/qq_46143850/article/details/141256121 2025/5/17 20:43:55

React 简介、基础入门

一、React 简介
- 1、是什么？
- 2、谁开发的？
- 3、为什么要学？
- 4、React 的特点
- 5、学习 React 之前你要掌握的 Javascript 基础知识
二、React 入门
- 1、相关 js 库
- 2、Hello React 入门小例子---React16.8.0 版本
- 3、为什么不用 js ，而需要使用 jsx
- - 3.1 使用 jsx 创建虚拟 DOM
  - 3.2 使用 js 创建虚拟 DOM
  - 3.3 通过对比发现
- 4、虚拟 DOM 与真实 DOM
- - 4.1 关于虚拟 DOM
- 5、JSX 语法规则
- - 5.1 例子
  - 5.2 语法规则
  - 5.3 JSX 小练习
  - - 5.3.1 区分：【js 语句（代码）】与【js 表达式】
  - 5.4 模块与组件、模块化与组件化的理解
  - - 5.4.1 模块
    - 5.4.2 组件
    - 5.4.3 模块化
    - 5.4.4 组件化

一、React 简介

1、是什么？

用于构建用户界面的 JavaScript 库
界面–》视图
只关注视图层
例子：使用原有的知识去展示数据的步骤
1）发送请求获取数据
2）处理数据（过滤、整理格式等）
3）操作 DOM 呈现页面（React 只关注这一步骤）

React 是一个将数据渲染为 HTML 视图的开源 Javascript 库

2、谁开发的？

由 Facebook 开发的，且开源
时间线：
1）起初由 Facebook 的软件工程师 Jordan Walke 创建
2）于 2011 年部署于 Facebook 的 newsfeed
3）随后在 2012 年部署于 Instagram（INS）
4）2013 年 5 月宣布开源
…
近十年 “陈酿”React 正在被腾讯、阿里等一线大厂广泛使用

3、为什么要学？

1）原生 Javascript 操作 DOM 繁琐、效率低（DOM-API 操作 UI）

document.getElementById('app')
document.querySelector('#app')
document.getElementsByTagName('span')

2）使用 Javascript 直接操作 DOM，浏览器会进行大量的重绘重排
3）原生 Javascript 没有组件化编码方案，代码复用率低
js 的模块化：将非常庞大的 js 按照功能点拆分成一个个小的 js，这就要做模块化
组件化：将结构和 js 都拆分成小的部分

以上是原生 JavaScript 的痛点。

4、React 的特点

1）采用组件化模式、声明式编码，提高开发效率及组件复用率。
命令式编程：缺少任何一个步骤都没法得到结果
声明式编程：只需要说出想要的结果，过程可以省略
2）在 React Native 中可以使用 React 语法进行移动端开发。
3）使用虚拟 DOM + 优秀的 Diffing 算法，尽量减少与真实 DOM 的交互

5、学习 React 之前你要掌握的 Javascript 基础知识

1）判断 this 的指向
2）class（类）
3）ES6 语法规范，模板字符串等
4）npm 包管理器
5）原型、原型链
6）数组常用方法，筛选最值、条件求和等
7）模块化

二、React 入门

文档： https://react.docschina.org/

1、相关 js 库

1） react.js: React 核心库

jsx
在 js 的基础上增加一些语法和规范，使用 babel 来转换

2）react-dom.js 提供操作 DOM 的 react 扩展库
3）babel.min.js 解析 JSX 语法代码转为 JS 代码的库

2、Hello React 入门小例子—React16.8.0 版本

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="test"></div><!-- 引入 react 核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入 react-dom，用于支持 react 操作DOM --><scripttype="text/javascript"src="../js/react-dom.development.js"></script><!-- 引入babel， 用于将 jsx 转为 js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 此处一定要写babel --><script type="text/babel">// 1、创建虚拟 DOM. 此处一定不要写引号，因为不是字符串const vDom = <h1>Hello, React</h1>// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM，容器)ReactDOM.render(vDom, document.getElementById('test'))</script></body>
</html>

3、为什么不用 js ，而需要使用 jsx

3.1 使用 jsx 创建虚拟 DOM

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="test"></div><!-- 引入 react 核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入 react-dom，用于支持 react 操作DOM --><scripttype="text/javascript"src="../js/react-dom.development.js"></script><!-- 引入babel， 用于将 jsx 转为 js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 此处一定要写babel --><script type="text/babel">// 1、创建虚拟 DOM. 此处一定不要写引号，因为不是字符串const vDom = <h1>Hello, React</h1>// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM，容器)ReactDOM.render(vDom, document.getElementById('test'))</script></body>
</html>

3.2 使用 js 创建虚拟 DOM

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="test"></div><!-- 引入 react 核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入 react-dom，用于支持 react 操作DOM --><scripttype="text/javascript"src="../js/react-dom.development.js"></script><script type="text/javascript">// 1、创建虚拟 DOM React.createElement(标签名， 标签属性， 标签内容)const vDom = React.createElement('h1', { id: 'title' }, 'Hello, React')// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM，容器)ReactDOM.render(vDom, document.getElementById('test'))</script></body>
</html>

3.3 通过对比发现

当标签内容都是 ‘Hello, React’ 的时候差别不大。
但是当标签 h1 需要嵌套一个 span 标签再显示 ‘Hello, React’ 的时候，
js 创建就需要这么写

React.createElement('h1',{ id: 'title' },React.createElement('span', {}, 'Hello, React'),
)

jsx 就这么写

const vDom = (<h1><span>Hello, React</span></h1>
)

jsx 创建虚拟 DOM 就是原生 js 写语法糖

4、虚拟 DOM 与真实 DOM

4.1 关于虚拟 DOM

（1）本质是 Object 类型的对象（一般对象）
（2）虚拟 DOM 比较“轻”，属性比较少，真实 DOM 比较“重”。因为虚拟 DOM 是 React 内部在用，无需真实 DOM 上那么多的属性。
（3）虚拟 DOM 最终会被 React 转化为真实 DOM，呈现在页面上。

5、JSX 语法规则

5.1 例子

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>JSX 语法规则</title><style>.title {background-color: aquamarine;}</style></head><body><div id="test"></div><!-- 引入 react 核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入 react-dom，用于支持 react 操作DOM --><scripttype="text/javascript"src="../js/react-dom.development.js"></script><!-- 引入babel， 用于将 jsx 转为 js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 此处一定要写babel --><script type="text/babel">let MyId = 'TestIn'// 1、创建虚拟 DOM. 此处一定不要写引号，因为不是字符串const vDom = (<div><h1 className="title" id={MyId.toLowerCase()}><span style={{ color: 'red', fontSize: '120px' }}>Hello, React</span></h1><h1 className="title" id={MyId.toUpperCase()}><span style={{ color: 'red', fontSize: '80px' }}>Hello, React</span></h1><input type="text"></input><Good></Good></div>)// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM，容器)ReactDOM.render(vDom, document.getElementById('test'))</script></body>
</html>

5.2 语法规则

（1）全称 Javascript XML
（2）react 定义的一种类似于 XML 的 JS 扩展语法：JS+XML
a. XML 早期用于存储和传输数据

<student><name>Tom</name><age>19</age>
</student>

使用 json 进行存储： “{“name”: “Tom”, “age”: 19}”

（3）定义虚拟 DOM 时，不要写引号
（4）标签中混入 JS 表达式时要用花括号 {}
（5）样式的类名指定不要用 class，需要使用 className
a. class 是 es6 中的关键字，react 在设计的时候避开了这个，所以用 className
（6）内联样式，要用 style={{key: value}} 的形式去写
（7）虚拟 DOM 必须只有一个根标签
（8）标签必须闭合
（9）标签首字母
a. 若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错
b. 若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错

5.3 JSX 小练习

在页面上动态展示前端 js 框架列表

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>jsx小练习</title></head><body><div id="test"></div><!-- 引入 react 核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入 react-dom，用于支持 react 操作DOM --><scripttype="text/javascript"src="../js/react-dom.development.js"></script><!-- 引入babel， 用于将 jsx 转为 js --><script type="text/javascript" src="../js/babel.min.js"></script><!-- 此处一定要写babel --><script type="text/babel">/*一定注意区分：【js 语句（代码）】与【js表达式】1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方下面这些都是表达式:(1) a(2) a+b(3) demo(1)(4) arr.map()(5) function test(){}2.js语句（代码）：控制代码走向的下面这些都是语句（代码）:(1) if(){}(2) for(){}(3) switch(){case: xxx}*/let data = ['Angluar', 'React', 'Vue']// 1、创建虚拟 DOM.const vDom = (<div><h1>前端 js 框架列表</h1><ul>{data.map((el, inx) => {return <li key={inx}>{el}</li>})}</ul></div>)// 2、渲染虚拟 DOM 到页面// ReactDOM.render(虚拟DOM，容器)ReactDOM.render(vDom, document.getElementById('test'))</script></body>
</html>

5.3.1 区分：【js 语句（代码）】与【js 表达式】

1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式:
(1) a
(2) a+b
(3) demo(1)
(4) arr.map()
(5) function test(){}

2.js 语句（代码）：控制代码走向的
下面这些都是语句（代码）:
(1) if(){}
(2) for(){}
(3) switch(){case: xxx}

5.4 模块与组件、模块化与组件化的理解

5.4.1 模块

1）理解：向外提供特定功能的 js 程序，一般就是一个 js 文件
2）为什么要拆分成模块：随着业务逻辑增加，代码越来越多且复杂
3）作用：复用 js ，简化 js 的编写，提高 js 运行效率

5.4.2 组件

1）理解：用来实现局部功能效果的代码和资源的集合（html、css、js、image 等）
2）为什么：一个界面的功能更复杂
3）作用：复用编码，简化项目编码、，提供运行效率

5.4.3 模块化

当应用的 js 都以模块来编写，这个应用就是一个模块化的应用

5.4.4 组件化

当应用是以多组件的方式实现，这个应用就是一个组件化的应用