React入门学习 #

花果山大圣

React是什么 #

https://reactjs.org/

https://beta.reactjs.org/

全球使用率都很高的热门前端框架，进阶必备

视图层，高效的渲染网页 & 更新，良好的开发体验

组件化 & 虚拟Dom & 跨端 & ConCurrent ...

UI = f(state)

阿里，字节，腾讯等大厂必备

1. 生态齐全
2. 成功案例
3. 跨端（Native)

核心：组件化 + 工具函数（Hooks)

第一个React应用 #

学前知识（自检） #

1. Javascript
   1. 模块化
   2. 箭头函数
   3. 解构赋值
   4. 常见数组和对象操作 ( map， filter...)
   5. async + await && Promise
   6. ...
2. HTML 和 CSS
3. Nodejs + VSCode + Chrome开发

环境 #

❯ node -v
v16.17.1
❯ npm -v
8.15.0
❯ pnpm -v
7.13.4

官方的cra，我更喜欢用vite （入门区别不大）

npm create vite@latest
# or
pnpm create vite

React的基本代码 #

1. React组件
2. React渲染组件
3. JSX

class组件和function组件 #

React组件的两种写法

1. 类写法
2. 函数写法（主流，重点学习）

组件的进阶

1. 组件 & 模块
2. 组件嵌套
3. Props & State
4. 积木式开发

JSX是什么 #

长得像HTML，本质是JS

1. 基本语法
2. {}
3. css
4. 循环渲染
5. 条件渲染

处理用户交互 && 事件处理 #

1. 用户输入
2. 事件绑定
3. Hooks尝鲜
4. 复杂对象和数组的更新

useEffect副作用 #

副作用：UI = f(state, effect)

useEffect(()=>{
  副作用变了之后，执行的代码
},[deps])

本地存储实现

其他API #

值：useState,useContext,useReducer, useRef ...

副作用：useEffect,useLayoutEffect ...

性能优化 useMemo, useCallback ...

优先级：useTransition, useDeferredValue ....

下一步 #

React生态

1. 工程化工具Vite & Webpack
2. 路由
3. 数据流
4. CSS
5. 组件库
6. 网络请求
7. React进阶API (优化)
8. 组件化进阶
9. 封装自己的Hooks ...