【青训营】React

225 阅读1分钟
git clone https://github.com/xuchaobei/react-redux-demo

01 React

项目创建

JSX

组件

纯函数

函数组件和类组件(列表中的key)

函数组件不需要render

组件内部的可变状态

render函数中间不能有副作用代码

state

  • 部分修改,而非全量修改

Props vs State

受控组件

非受控组件

React hooks

State Hook

Effect Hook

git checkout effect-hooks

自定义hooks

git checkout custom-hooks

规则

Why Hooks

  • 状态管理逻辑封装与复用
  • 面向React未来(类组件)

02 React Router

路由分类

  • 服务端路由
  • 客户端路由

基础示例

Router

  • BrowserRouter
  • HashRouter

Route

Switch

路由跳转

Hooks API

继承React Router

03 Redux (RTK)

Redux 是什么?

  • state
  • view
  • action

什么时候用Redux

  • 直接使用localstorage进行数据共享会有什么问题?

Redux术语

Store

Action

  • Dispatch发送一个Action

  • Reducer: 根据当前的应用状态,和接收到的action,计算新的状态

Redux数据流

Redux Toolkit(RTK)

创建store

创建slice模块

slice示例

slice使用

同步数据流完整示例

异步数据流完整示例

  • 放在extraReducers中的

创建文章

redux-async

  • AddPost1

  • AddPost2

文章详情页

像设计数据库一样设计Redux状态

不应该在redux做服务端的状态管理

其他状态管理方案

  • 低代码平台的状态放在redux里面