React入门学习
花果山大圣
React是什么
全球使用率都很高的热门前端框架,进阶必备
视图层,高效的渲染网页 & 更新,良好的开发体验
组件化 & 虚拟Dom & 跨端 & ConCurrent ...
UI = f(state)
阿里,字节,腾讯等大厂必备
- 生态齐全
- 成功案例
- 跨端(Native)
核心:组件化 + 工具函数(Hooks)
第一个React应用
学前知识(自检)
- Javascript
- 模块化
- 箭头函数
- 解构赋值
- 常见数组和对象操作 ( map, filter...)
- async + await && Promise
- ...
- HTML 和 CSS
- Nodejs + VSCode + Chrome开发
环境
bash
❯ node -v
v16.17.1
❯ npm -v
8.15.0
❯ pnpm -v
7.13.4
官方的cra,我更喜欢用vite (入门区别不大)
bash
npm create vite@latest
# or
pnpm create vite
React的基本代码
- React组件
- React渲染组件
- JSX
class组件和function组件
React组件的两种写法
- 类写法
- 函数写法(主流,重点学习)
组件的进阶
- 组件 & 模块
- 组件嵌套
- Props & State
- 积木式开发
JSX是什么
长得像HTML,本质是JS
- 基本语法
- {}
- css
- 循环渲染
- 条件渲染
处理用户交互 && 事件处理
- 用户输入
- 事件绑定
- Hooks尝鲜
- 复杂对象和数组的更新
useEffect副作用
副作用:UI = f(state, effect)
js
useEffect(()=>{
副作用变了之后,执行的代码
},[deps])
本地存储实现
其他API
值:useState
,useContext,useReducer, useRef ...
副作用:useEffect
,useLayoutEffect ...
性能优化 useMemo
, useCallback
...
优先级:useTransition, useDeferredValue ....
下一步
React生态
- 工程化工具Vite & Webpack
- 路由
- 数据流
- CSS
- 组件库
- 网络请求
- React进阶API (优化)
- 组件化进阶
- 封装自己的Hooks ...