React 学习笔记

更新: 10/1/2024 字数: 0 字 时长: 0 分钟

还是得记笔记，好记性不如烂笔头，之前学的 React 也仅限于会用，很多 API 的具体用法，原理还是忘，今年寒假 4 天把黑马出的 React 视频过一遍再做一个笔记。

初识 React

React 是 meta(原 facebook)公司开源的前端框架，与 vue 相似，都是基于虚拟 DOM 的。但是相对 vue 而言有这些优势:

• 由于出现的比较早，社区资源更丰富，更流行
• 稳定性和扩展性好
• 写起来自由度更高，语法更贴近 js 原生
• 性能比 vue 更好，还能进行各种自定义优化

React 入门

React 使用 JSX 语法，你可以使用 JSX 语法来描述 UI 的结构，JSX 代码最终会被编译为 React.createElement 函数调用，JSX 语法更接近自然语言，更直观，代码可读性更高。

JSX 是什么

​JSX 全称 JavaScript XML，是一种由 meta(原 facebook)公司推出的一个 JS 语法扩展，它允许开发者在 js 代码中写类似于 HTML 的标记语法，这种语法在 React 中应用广泛，浏览器不能识别 JSX 代码，需要通过如 Babel 这种构建工具编译以后使用。基本的用法是类似于

const text = 'Hello, world!'
const element = <h1>{text}</h1>

需要注意的是，大括号只能插入表达式而不能插入语句，函数、变量、模版字符串这些都可以，但是不能写如

const text = 'Hello, world!'
const element = <h1>{text}</h1>
const element = <h1>{if(true) {return 'Hello, world!'}}</h1>

初始化 React 项目

使用 Vite 创建 React 项目。

npx 是 npm 的扩展，允许执行包中的命令而无需全局安装这些包，如果没有在执行过程中下载，执行命令完毕以后自动移除这个包。

使用 npx 或 pnpm 初始化 React 项目的方式如下：

npx

npx create-vite-app my-react-app --template react-ts

pnpm

pnpm create vite-app my-react-app --template react-ts

yarn

yarn create vite-app my-react-app --template react-ts

bun

bun create vite-app my-react-app --template react-ts

安装时候可能有点慢，三个包管理工具配置镜像源的命令如下：

npm

npm config set registry https://registry.npmmirror.com

pnpm

pnpm config set registry https://registry.npmmirror.com

yarn

yarn config set registry https://registry.npmmirror.com

bun

bun config set registry https://registry.npmmirror.com

项目结构