1.useEffect的概念和使用(类似nextTick())
useEffect 是 React 中的一个内置 Hook,用于处理副作用操作,例如数据获取、订阅或手动更改 React 组件中的 DOM 。它在函数组件中提供了类似 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法的能力。
导入:import {useEffect} from 'react';
useEffect的两个参数 -- 1. 回调函数,和 2. 依赖项
空数组只执行一次;
清除useEffect的副作用,就是在离开组件的时候执行某些代码
具体使用:
2.自定义hook函数
官方的hook都是use开头的 比如:useState,useEffect。 逻辑的封装和复用
原来的写法
使用hook复用解决耦合
react hook 的使用规则
3.redux快速入门(集中状态管理工具)
和vuex,pina等工具类似。
下面是具体的使用流程:
3.1 定义一个reducer函数
3.2 使用reducer函数生成store实例
参数:3.1定义的reducer函数。
js
const store = Redux.createStore(reducer)
3.3 通过store的subssribe订阅数据的变化
subscribe回调函数在state每次发生变化的时候执行。
js
store.subcribe(() => {
// 回调函数执行
})
3.4 通过store实例的dispatch函数提交action更改状态
3.5 redux的三个核心概念
4.react中使用redux
使用之前需要安装两个额外的插件 redux-toolkit react-redux
a:创建react项目
js
npx create-react-app react-redux
b: 安装依赖包
js
npm i @reduxjs/toolkit react-redux
c: 启动项目
js
npm run start
具体在react中的使用:
4.1 store目录的使用
4.2 案例使用 -- counter 模块
4.3 为 react 注入store
4.4 react组件中使用store的数据
4.5 react组件中修改store中的数据
修改(提交)action的时候传递参数
4.6 异步修改store
5.react的调试工具
redux Developer Tools 是chrome浏览器的一个插件,可以方便的查看redux中的数据。
Redux DevTools 是 redux 的调试工具,可以方便的查看 redux 中的数据。