react总结

说明

React 起源于Meta公司（Facebook）的内部项目，并于 2013 年 5 月开源。

React 是一个用于动态构建用户界面的 JAVASCRIPT 库

官网

英文官网: https://reactjs.org/

中文官网: https://react.docschina.org/

特点

声明式编码（封装了细节，只需要告诉它做什么，不需要详细告诉它每一步怎么做）
组件化编码
React Native 编写原生应用
高效（优秀的Diffing算法,最小化页面重绘）（通过虚拟DOM的使用，最大限度地减少与真实DOM的交互）

js库说明

react.js：React核心库。
react-dom.js：提供操作DOM的react扩展库。
babel.min.js：解析JSX语法代码转为JS代码的库。

创建 React 应用的方式

按照node.js和修改本地策略

使用如下命令验证是否安装

node -v
npm -v

使用工具创建项目需要安装node.js

从 Node.js 官网下载并安装最新版本。在安装过程中，npm 会被自动包含。https://nodejs.org/zh-cn

打开 PowerShell（以管理员身份）。

输入以下命令并回车，以更改执行策略为允许运行本地脚本：

Set-ExecutionPolicy RemoteSigned

如果不执行上面的命令会遇到

如果执行npm -v

PS C:\Users\xgss> npm -v
npm : 无法加载文件 F:\myFiles\program\nodejs\npm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.micros
oft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

Create-React-App（cra）

react 官方团队提供的脚手架工具，在你启动项目时，它会用 Webpack 把所有代码提前打包好，再启动开发服务器。项目越大，启动越慢

命令：

npx create-react-app react-basic

其中：react-basic React为自定义的项目的名称

vscode打开项目后，打开控制台，执行命令即可

如果有如下错误提示，说明 Node.js 和 npm 没有被正确安装，或者它们的可执行文件没有被添加到系统的环境变量中。

npx : 无法将“npx”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径
，请确保路径正确，然后再试一次。

成功后，会发现创建了项目结构

结构说明

react-basic/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock (或 package-lock.json)

node_modules/

存放所有项目的依赖包。这个目录由 npm 或 yarn 自动生成，包含了项目运行所需的所有第三方库和模块。

public/

存放静态文件，Webpack 不会对这个目录中的文件进行处理。public 目录下的文件会被直接复制到构建目录。

favicon.ico：浏览器标签页上的小图标。
index.html：HTML 模板文件，React 组件将被挂载到这个文件中的 div 元素中。
logo192.png 和 logo512.png：不同尺寸的 React logo 图标。
manifest.json：Web 应用清单文件，用于定义应用的名称、图标等元数据。
robots.txt：用于告诉搜索引擎哪些页面可以被抓取。

src/

存放应用的源代码。这里是你主要进行开发的地方。

App.css：App 组件的样式文件。
App.js：主组件文件，定义了一个基础的 React 组件。
App.test.js：App 组件的测试文件。
index.css：全局样式文件。
index.js：应用的入口文件，负责渲染 React 组件到 DOM 中。
logo.svg：React logo 的 SVG 文件。
reportWebVitals.js：用于性能监测的文件，可以帮助你了解和分析应用的性能。
setupTests.js：用于设置测试环境的文件。

.gitignore

列出 Git 应该忽略的文件和目录，例如 node_modules/ 和构建输出的目录。

package.json

项目的配置文件，包含项目信息、脚本、依赖项等。

README.md

项目的自述文件，包含项目的基本信息和使用说明。

yarn.lock 或 package-lock.json

锁定文件，记录了确切的依赖版本，确保在不同环境中安装的依赖一致。

启动项目：

cd react-basic/
npm start

在浏览器中打开 http://localhost:3000/

修改js文件后，不需要重启项目，刷新就可以看到效果

Vite方式

利用了现代浏览器原生支持的 ES Module 特性，在你请求某个文件时才即时编译，启动速度特别快

同样需要先按照node.js之后再执行如下命令

npm create vite@latest react-basic --template react

创建的结构如下

结构说明：

my-react-app
├── public/              # 存放不会被编译的静态资源，如 favicon.ico
├── src/                 # 核心代码目录，我们 99% 的工作都在这里
│   ├── assets/          # 存放组件内部使用的静态资源，如图片、CSS
│   ├── App.css          # App 组件的样式文件
│   ├── App.jsx          # App 根组件文件
│   ├── index.css        # 全局样式文件
│   └── main.jsx         # 整个应用的 JavaScript 入口文件
├── .eslintrc.cjs
├── .gitignore
├── index.html           # 整个应用的 HTML 入口文件 (是的，只有一个)
├── package.json         # 项目信息和依赖配置文件
└── vite.config.js       # Vite 的配置文件

# 进入项目目录
cd react-basic

# 安装项目所需的依赖包
npm install

# 启动开发服务器
npm run dev

浏览器访问http://localhost:5173

使用Ctrl+C按键即可终止服务

jsx

JSX（JavaScript XML）是一种类 XML 的语法扩展，用于在 JavaScript 中直接编写类似 HTML 或 XML 的结构。它不是标准的 JavaScript 语法，而是由 React 推广开来的一种语法糖，使得在 JS 中构建 UI 更加直观和易读。

JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行

React 不强制使用 JSX，但推荐使用以提升开发体验。

只能有一个根元素；
每个元素都需要闭合，即使是单元素；

在JSX中可以通过大括号语法 {} 识别 JavaScript 中的表达式，if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中

四个高频场景：

使用引号传递字符串；
使用JS变量；
函数调用和方法调用；
使用JS对象；

// 项目的根组件
const message = '使用JS变量';
const obj = {
  name: '名字'
};
const getName = () => obj.name + '_666';
function App() {
  return (
    <div>
      <h1>this is title</h1>
      {/* 使用引号传递字符串 */}
      {'你好，我好，大家好'}
      
      {/* 使用JS变量 */}
      {message}
      
      {/* 函数调用和方法调用 */}
      {getName()}
      {new Date().getTime()}
      
      {/* 使用JS对象 */}
      {/* 外层是识别表达式的语法，内层是识别的对象结构 */}
      <div style={{ color: 'red' }}>this is div</div>
    </div>
  );
}

export default App;

列表渲染：

在JSX中可以使用原生JS中的 map 方法遍历渲染列表；

需要添加上一个独一无二的key；
key：string 或者 number；
作用：React内部使用，提升更新性能的；

const list = [
  { id: '1000', name: 'jQuery', flag: false },
  { id: '1001', name: 'Vue', flag: true },
  { id: '1002', name: 'React', flag: true },
  { id: '1003', name: 'Angular', flag: false }
];
function App() {
  return (
    <ul>
      {/* map 循环哪个结构 return 哪个结构 */}
      {list.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default App;

条件渲染：

通过逻辑运算符(&&)、三元表达式(?:) 实现基础的条件渲染；

逻辑运算符(&&)：控制单个标签的显示隐藏；
三元表达式(?:)：两个标签的切换；

const flag = true;
function App() {
    return (
        <div>
            {/* 逻辑与：flag为true显示span元素，否则不显示 */}
            {flag && <span> 开始学习 React </span>}
            
            <br />
            
            {/* 三元运算：flag为true和false显示不同的内容 */}
            {flag ? <span> 看会小姐姐 </span> : <span> 玩会游戏 </span>}
        </div>
    );
};

假值说明：

在js中，我们熟悉的假值有以下几个：false '' null undefined 0 NaN

0和NaN作为值的显示区别：0和NaN作为条件都是假，作为内容0会输出，NaN不会输出

// 示例1：直接渲染 0（会显示 "0"）
<div>{0}</div> // 输出: 0

// 示例2：条件渲染（0 被视为假，不渲染）
{0 && <span>不会渲染</span>} // 输出: 空

// 示例3：三元运算符
{0 ? <span>真</span> : <span>假</span>} // 输出: "假"

// 示例1：直接渲染 NaN（不显示任何内容）
<div>{NaN}</div> // 输出: 空

// 示例2：条件渲染（NaN 被视为假）
{NaN && <span>不会渲染</span>} // 输出: 空

// 示例3：三元运算符
{NaN ? <span>真</span> : <span>假</span>} // 输出: "假"

jsx解析器/编译器

Babel

Babel是一个JavaScript编译器，允许开发人员使用最前沿的JavaScript编写代码，然后Babel将其转换为老式的JavaScript，让更多的浏览器能够理解。

主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为 es5 语法，让开发者无视用户浏览器的差异性，并且能够用新的 JS 语法及特性进行开发。除此之外，Babel 能够转换 JSX 语法，并且能够支持 TypeScript 转换为 JavaScript。

编译JSX语法的包为：@babel/preset-react；

官网：https://babeljs.io/

官网可以查看转换后的标准js内容，点击Try it out，选择上react即可输入，jsx的内容看转换后的内容

posted @ 2025-04-21 13:01 星光闪闪阅读(11) 评论(0) 收藏举报

刷新页面返回顶部