使用create-react-app创建和学习 React 项目
1. 安装 Node.js
首先，确保电脑上安装了 Node.js 和 npm（Node 包管理器）。您可以在 Node.js 官网 下载并安装。
安装完成后，在终端中运行以下命令确认安装成功：
node -v
npm -v
2. 创建 React 应用
使用 create-react-app 快速创建 React 项目。
-
使用 npx 创建应用：
打开终端，进入想要创建项目的目录，执行以下命令：
npx create-react-app my-app
其中 my-app 是项目名称，可以根据需要更改。
-
等待安装完成：
create-react-app会自动安装所需的依赖并设置项目结构，这个过程可能需要几分钟。
3. 启动开发服务器
完成安装后，进入项目文件夹并启动开发服务器：
cd my-app
npm start
这将启动本地开发服务器，浏览器会自动打开 http://localhost:3000，显示 React 应用的默认页面。
4. 项目结构概览
创建完成后，my-app 目录下的文件结构如下：
node_modules：存放项目依赖。public：存放公共资源文件（如 HTML 模板和图标）。src：存放源码文件，主要编写和修改的内容。package.json：项目的依赖和脚本信息。
5. 编辑代码并刷新
在 src 文件夹中编辑代码（如 App.js）。保存后，浏览器会自动刷新，立即查看修改效果。
React 的 JSX 语法
在使用 create-react-app 创建项目后，你会发现 React 代码中出现了类似 HTML 的语法，这就是 JSX。下面会详细解释 JSX 是什么，以及 Babel 如何解析 JSX。
6. 什么是 JSX？
- JSX 简介：
- JSX 是 JavaScript XML 的缩写，是一种在 JavaScript 中编写类似 HTML 的语法扩展，适用于描述 UI 结构。
- React 推荐使用 JSX，因为它使代码更加直观。
- JSX 的特点：
- JSX 支持嵌入 JavaScript 表达式（通过
{}包裹）。 - 需要 Babel 转译才能被浏览器识别。
- 示例：
- 打开 Babel 在线编译器，在左侧的编辑器中输入以下代码：
let names = ['zhangsan','lisi'];
//这里封装了一个Hello组件
function Hello(){
return (
<h1>hello</h1>
)
}
<div>
this is div
{/*这里引用了Hello这个组件，打上大括号就可以写js表达式，
切记是js表达式，不是js语句，比如if、switch、const、let
这些都是不可以写的，这个注释内容babel就编译不出来*/}
<Hello/>
<h1>this is h1</h1>
<h2>this is h2</h2>
<p>
this is p<span>this is span</span>
</p>
<ul>
{/*这里使用数组的map方法循环数组，每次返回<li>{item}</li>,
返回的整体内容就是<li key='name0' >zhangsan</li><li key='name1'>lisi</li>*/}
{names.map((item,index)=> <li key={'name'+index}>{item}</li>)}
</ul>
</div>
编译器右侧会显示转换后的 JavaScript 代码，通常类似于以下内容：
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
let names = ['zhangsan', 'lisi'];
//这里封装了一个Hello组件
function Hello() {
return /*#__PURE__*/_jsx("h1", {
children: "hello"
});
}
/*#__PURE__*/_jsxs("div", {
children: ["this is div", /*#__PURE__*/_jsx(Hello, {}), /*#__PURE__*/_jsx("h1", {
children: "this is h1"
}), /*#__PURE__*/_jsx("h2", {
children: "this is h2"
}), /*#__PURE__*/_jsxs("p", {
children: ["this is p", /*#__PURE__*/_jsx("span", {
children: "this is span"
})]
}), /*#__PURE__*/_jsx("ul", {
children: names.map((item, index) => /*#__PURE__*/_jsx("li", {
children: item
}, 'name' + index))
})]
});
7. JSX 的使用注意事项
- 必须有一个根元素：每个 JSX 表达式只能返回一个根节点。可以使用
<div>包裹，或使用Fragment（即<></>）避免不必要的div嵌套。
return (
<>
<h1>Title</h1>
<p>Content</p>
</>
);
- 表达式与语句的区别：JSX 只能嵌入表达式而非语句。可以使用三元运算符或短路操作符来替代语句。
<div>
{condition ? <p>True</p> : <p>False</p>}
{names.map((name) => <li key={name}>{name}</li>)}
</div>
8. 使用 Babel 编译 JSX
Babel 是 JavaScript 的编译器，create-react-app 已自动配置 Babel 将 JSX 转换为纯 JavaScript，因此不需要额外安装。您也可以使用 Babel 在线编译器 来查看 JSX 的转译效果。
虚拟 DOM 与 React 的key 属性
9. 什么是虚拟 DOM？为什么使用它？
- 虚拟 DOM 简介：
- 虚拟 DOM（Virtual DOM）是 React 用于提升页面渲染性能的技术。
- 它是一个轻量级的 JavaScript 对象树结构，模拟了真实 DOM 树结构。
- 虚拟 DOM 的作用：
- 每次状态或数据更新时，React 会生成新的虚拟 DOM，并与旧的虚拟 DOM 进行比较。这种“diffing”算法可以高效地确定需要更新的部分，而非重新渲染整个 DOM 树。
- 最后，React 使用最小化更新的方式将变动应用到真实 DOM 中，大幅减少了实际 DOM 操作的开销，提高了性能。
10. React 中的key 属性
key属性的作用 ：
- 在 React 中遍历和渲染列表时，每个元素需要有一个唯一的
key属性，以便 React 能准确判断哪些元素被添加、移除或重排。
- 为什么需要
key属性？ ：
key帮助 React 快速定位和更新列表中的元素。例如，若key不唯一或缺失，React 可能会误判，从而导致不必要的重新渲染或错误的数据绑定。
const items = ['Apple', 'Banana', 'Cherry'];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
以上代码中，key 使用 index（索引值）作为唯一标识，通常更建议使用数据中的唯一 ID，而不是索引。
React 组件的生命周期
11. 组件生命周期概述
React 组件有一个完整的生命周期，分为三个阶段：挂载、更新和卸载。每个阶段都有不同的生命周期方法。
12. 挂载（Mounting）
挂载阶段是组件被创建并插入 DOM 的阶段。常用方法包括：
-
constructor：用于初始化组件的状态。 -
componentDidMount：组件第一次渲染完成后调用，适合执行网络请求或订阅等副作用操作。
13. 更新（Updating）
当组件的 state 或 props 发生变化时，组件进入更新阶段。常用方法有：
-
shouldComponentUpdate：在组件重新渲染前调用，返回布尔值，用于控制是否重新渲染。 -
componentDidUpdate：组件更新完成后调用，可执行更新后的操作。
14. 卸载（Unmounting）
当组件从 DOM 中移除时，会调用以下生命周期方法：
componentWillUnmount：在组件被卸载前调用，适合清理定时器、取消网络请求等。
