React学习day09-class API、zustand（极简的状态管理工具）

21、class API

（1）作用：编写类组件

（2）语法

1）定义类

2）定义数据（通过state属性）

3）定义方法修改数据（通过setState方法）

4）通过render写UI模版

5）在父组件使用类（与组件用法相同）

6）效果：

点击后自增

（3）类组件的生命周期

1）生命周期函数概念：组件从创建到销毁的各个阶段自动执行的函数

2）常用生命周期函数

①componentDidMount：组件挂载完毕之后自动执行

②componentWillUnmount：组件卸载时自动执行

3）示例：

初始

componentDidMount：

componentWillUnmount

（4）类组件的组件通信

1）概念：类组件和Hooks编写的组件在组件通信上逻辑一致

2）分类

①父传子（通过prop绑定数据）

将data传给子组件

初始代码（准备好父子组件）：

②子传父（通过prop绑定父组件中的函数在，子组件调用）

为父组件准备一个方法

将方法传递给子组件

子组件通过this.props调用父组件的方法，传递参数

效果

③兄弟通信（状态提升，通过父组件做桥接）

22、zustand（极简的状态管理工具）

（1）安装（通过npm I zustand）

（2）使用步骤

1）在App.js导入

2）创建store，提供状态和修改状态的方法

创建实例时其中有一个自带的set参数，用于修改状态，在set中可以通过state参数获取状态

3）将实例赋值给新量

4）在组件中调用，并解构

5）使用

6）效果

（2）set语法

1）语法1：参数是函数需要使用老数据

2）语法2：不用老数据，直接传对象

（3）zustand的异步与支持

1）启动json-server，虚拟端口，提供数据

2）发送请求，获取数据，使用set重新设置

3）在根组件中解构、调用

4）渲染使用

（4）切片模式

1）应用场景：当单个store比较大时，可以采用切片模式进行模块的拆分组合，类似于模块化

2）步骤

①拆分

②组合并将参数传下去

③使用（效果和之前一样）

代码不变