# React.js快速进坑
> **React** 用于构建 Web 和原生交互界面的库 。
## 1. Vue.js 对比 React
都是构建UI的框架，但关注点不同：
- Vue.js 对 HTML 进行了扩展。各种指令
- React 对 JavaScript 进行了扩展，新增一个语法-JSX
**因此，Vue在构建页面上更便捷，而React在构建页面时可以使用全部的JS能力。**
## 2. 安装
> 与Vue.js一样，有CDN链接；也可以通过npm独立安装；当然也有对应的脚手架工具。
为了更快下载必要js文件，将CDN链接上的js下载本地。
- babel: 转译jsx语法，即将jsx 转换成 js对象（虚拟DOM）
- React核心库：提供核心功能。比如如何定义组件，Hook等等
- React DOM库：提供与DOM相关的功能。比如 将React组件 渲染到页面中，输出信息...
### 2.1 Hello, world
```html
Hello
```
## 3. JSX
> 形似 `Hello, World.
`这样的语法，看着 既不是 HTML 标签， 也不是 JS中数据类型。它就是 `jsx`.
### 3.1 渲染数据
在React中，可以使用`{}`将一个JS表达式的值 绑定到 JSX 中。
```jsx
let username = 'guoguo';
// 在React中可以使用 "{}" 去 在jsx中渲染数据
// 在"{js表达式}"中，编写的是 JS表达式。类似与 Vue的插值语法"{{}}"
let element = Hello, {username}.
; // Hello, daxia.
```
### 3.2 绑定属性
> 在开发UI时，jsx的操作会像HTML标签那样去指定各种属性。
**由于 JSX 最终会被 babel 转译成 JS对象。因此JSX的属性命名规则要遵从JS规范。**
- 不能使用js中关键字后者保留字
- 属性名字 推荐使用 驼峰命名法 camelCase
实现时注意以下几点：
1. 那些是关键字或保留字的HTML属性需要改名：for => htmlFor; class => className
2. 那些包含多个单词的HTML属性需要转换成驼峰命名：rowspan =>rowSpan; colspan => colSpan; ...
3. 剩下那些就无需改变，直接可以使用。
```jsx
// let element = (
//
// Hello, React.
//
// );
/**
*! 1. jsx元素必须闭合
*! 2. 在jsx中注释内容的话 需要使用 绑定语法
*/
let element = (
{/* jsx元素必须闭合*/}
);
ReactDOM.createRoot(document.getElementById('root')).render(element);
```
## 4. 事件处理
## 5. 组件
### 5.1 props
### 5.2 state
### 5.3 组件生命周期
## 6. 条件渲染
## 7. 列表渲染
### 7.1 JS各种循环
### 7.2 数组map方法
## 8. Hooks
### 8.1 useState
### 8.2 useEffect
### 8.3 useMemo
### 8.4 useCallback
## 9. refs & dom