01_React简介、基础入门

qiao若huan喜2024-08-20 9:20

React 简介、基础入门

  • [一、React 简介](#一、React 简介)
  • [二、React 入门](#二、React 入门)
    • [1、相关 js 库](#1、相关 js 库)
    • [2、Hello React 入门小例子---React16.8.0 版本](#2、Hello React 入门小例子---React16.8.0 版本)
    • [3、为什么不用 js ，而需要使用 jsx](#3、为什么不用 js ，而需要使用 jsx)
      • [3.1 使用 jsx 创建虚拟 DOM](#3.1 使用 jsx 创建虚拟 DOM)
      • [3.2 使用 js 创建虚拟 DOM](#3.2 使用 js 创建虚拟 DOM)
      • [3.3 通过对比发现](#3.3 通过对比发现)
    • [4、虚拟 DOM 与真实 DOM](#4、虚拟 DOM 与真实 DOM)
      • [4.1 关于虚拟 DOM](#4.1 关于虚拟 DOM)
    • [5、JSX 语法规则](#5、JSX 语法规则)
      • [5.1 例子](#5.1 例子)
      • [5.2 语法规则](#5.2 语法规则)
      • [5.3 JSX 小练习](#5.3 JSX 小练习)
        • [5.3.1 区分：【js 语句（代码）】与【js 表达式】](#5.3.1 区分：【js 语句（代码）】与【js 表达式】)
      • [5.4 模块与组件、模块化与组件化的理解](#5.4 模块与组件、模块化与组件化的理解)
        • [5.4.1 模块](#5.4.1 模块)
        • [5.4.2 组件](#5.4.2 组件)
        • [5.4.3 模块化](#5.4.3 模块化)
        • [5.4.4 组件化](#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）

javascript 复制代码 
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 版本

html 复制代码 
<!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 -->
    <script
      type="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

html 复制代码 
<!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 -->
    <script
      type="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

html 复制代码 
<!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 -->
    <script
      type="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 创建就需要这么写

javascript 复制代码 
React.createElement(
  'h1',
  { id: 'title' },
  React.createElement('span', {}, 'Hello, React'),
)

jsx 就这么写

javascript 复制代码 
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 例子

html 复制代码 
<!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 -->
    <script
      type="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 早期用于存储和传输数据

javascript 复制代码 
<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 框架列表

html 复制代码 
<!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 -->
    <script
      type="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 组件化

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

相关推荐
jingling5553 分钟前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
Freedom风间5 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军6 小时前
🚀🚀🚀 Openapi：全栈开发神器，0代码写后端！
前端·javascript·next.js
萌萌哒草头将军6 小时前
🚀🚀🚀 Prisma 爱之初体验：一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪6 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer6 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
山海上的风6 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发7 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
亭台烟雨中7 小时前
【前端记事】关于electron的入门使用
前端·javascript·electron
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07西电B测-计算机网络综合实验(含验收问题)08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09苍穹外卖面试总结102025tg最新免费社工库机器人