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 组件化

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

相关推荐
范文杰3 小时前
AI 时代如何更高效开发前端组件？21st.dev 给了一种答案
前端·ai编程
拉不动的猪3 小时前
刷刷题50（常见的js数据通信与渲染问题）
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy4 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架：快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js：如何选择合适的框架
前端·javascript·面试
uhakadotcom5 小时前
React与Next.js：基础知识及应用场景
前端·面试·github
uhakadotcom5 小时前
Remix 框架：性能与易用性的完美结合
前端·javascript·面试
uhakadotcom5 小时前
Node.js 包管理器：npm vs pnpm
前端·javascript·面试
LaoZhangAI6 小时前
2025最全GPT-4o图像生成API指南：官方接口配置+15个实用提示词【保姆级教程】
前端
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04【AUTOSAR 基础软件】Can模块详解（Can栈之驱动模块）05RAG 实践- Ollama+RagFlow 部署本地知识库06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07Mac cursor设置jdk、Maven版本08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09如何本地部署AI智能体平台，带你手搓一个AI Agent10纯离线部署本地知识库LLM大模型