1 . 构建应用 npm install -g create-react-app , create-react-app happyApp
- 结构目录
入口文件 index.js
image.png
APP.js相当于vue中APP.vue, 渲染的主屏 -
页面结构
顶部是 import 各种需要引入的文件
中间是一个 class extends 组件
有一个构造器constructor 接收props 和 state
image.png -
父子通信
父组件给子组件传值 props
image.png
子组件给父组件传值 通过调用方法
image.png
去调用传递过来的方法 ,这个地方有点小坑,不能直接去改变state 的值 ,只能使用setState 去改变,还有一个点就是你不能再改变后马上拿到新值,而是在这个setState方法的回调函数中才能拿到.
image.png
5.路由
image.png
image.png
image.png
image.png
image.png
6.渲染方法与VUE的区别
1.条件渲染
REACT 通过三目运算符去渲染,也可以通过 if 判断
image.png
2.循环渲染
REACT 是通过 map 方法直接去循环整个组件
-
生命周期
4个大的生命周期
image.png
初始化阶段
就是构造函数constructor在此阶段完成的,包括
props和state.
需要注意的是这个阶段render是跟随state和props刷新的,但是剩下的2个生命函数只会再页面刷新的时候执行一次
更新阶段 Updation
1.shouldComponentUpdate( ) {
console.log('shouldComponentUpdate---组件发生改变前执行')
return true
} 必须要有返回值
2.componentWillUpdate在组件更新之前，但shouldComponenUpdate之后被执行。但是如果shouldComponentUpdate返回false，这个函数就不会被执行了。
3.componentDidUpdate(){
console.log('componentDidUpdate----组件更新之后执行')
}
销毁阶段
//当组件从页面中删除的时候执行
componentWillUnmount(){
console.log('child - componentWillUnmount')
}
-
redux-thunk 跟 redux-saga 对state 的管理
redux-thunk 是 redux 的一个中间件
他可以让state可以进行异步请求操作
回顾 一下 VUEX 参考其写法
VUEX 有 5个属性 ,其实只有4个.
1.state 状态管理 可以设置默认值
2.getters 指向state与之对应
3.mutations 提交mutation是更改Vuex中状态的唯一方法。
4.actions Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。
5.Modules 不同模块单独建立
image.png
一些常用的方法 .
1.getters 利用vue computed 属性快速得到多个state
computed: {
// 使用对象展开运算符将 getters 混入 computed 对象中
...mapGetters
([
'name',
])
}
2.将store注册到全局对象中
this."s".store.name; s是代表$
this."s"store.dispatch('方法名');
接下来就是正题了 REDUX-THUNK
[图片上传中...(image.png-c62f87-1612172159759-0)]
入口文件
reducers
reducers 写法
根据流程我们知道actions 是需要 action creators
在组件中使用
