jsx和vue模版区别
5 - Hooks
内置Hooks
useState
state是异步更新
变量不用与JSX 就使用useRef
setState(pre + 1) setState(pre => pre + 1) 不会被合并
state不可变数据，不能去直接修改state的值，而是需要你传入一个新的值
type FunctionComponent<P = {}> = (props: P) => ReactElement | null;
状态提升，父状态，子通过函数调用
immer 改变 不可变数据
数组方法
find findIndex indexof map filter splice push
useEffect
组件挂载时 组件更新时 组件卸载时
为什么执行两次？ react18开始，会在开发环境下执行两次 模拟组件的创建销毁， 再创建的完整流程
useRef
操作DOM
或者定一个JS变量，不驱动视图更新
useMemo
缓存数据，针对大数据
useCallback
缓存函数
自定义Hooks
DOM 事件 定时器 AJAX
第三方Hooks
ahooks react-use
6 - react样式处理
旧时的CSS规范
BEM
CSS Module
sass
CSS in js
styled-components
styled.a
styled-jsx
emotion
7- react-router
useLocation 获取pathname useNavigate 创建跳转对象
8 - UI组件库
Popconfirm Modal
Manage UI 管理页面UI展示 我的问卷： 列表卡片 + loadMore 星标问卷： 列表卡片 + 分页 回收站： 表格 + 分页
9- 表单组件/受控组件
HTML元素添加事件的方式
- 标签属性
- onXxxxx
- addEvenListener
类似Vue双向绑定/受控组件
dangerouslySetInnerHTML html解析
原始html使用
- input
- textarea
- radio
- checkbox
- select
- form
搜索组件
- 点击搜索(或者清空)
- 跳转路由（增加参数） 也是受控组件，数据双向绑定
点击登录
-
查看remember值
-
true 就记住密码
-
false 就忘记密码
-
组件挂载的时候
-
获取LocalStorge的密码
-
设置密码到表单 利用Antd Form组件的hook useForm
表单校验
- antd的rules
- 第三方校验库
10 - mock koa craco
mock 模拟数据
koa启动服务
const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa()
app.use(router.routes())
app.listen(3001)12 Redux
原始状态管理
createContext 创建 Provider 提供者 useContext 消费
useReducer --》 useReducer
创建全局状态信息