1 . 构建应用 npm install -g create-react-app , create-react-app happyApp

2. 结构目录
   入口文件 index.js
   
   image.png
   
   APP.js相当于vue中APP.vue, 渲染的主屏

3. 页面结构
   顶部是 import 各种需要引入的文件
   中间是一个 class extends 组件
   有一个构造器constructor 接收props 和 state

   
   
   image.png

4. 父子通信
   父组件给子组件传值 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 方法直接去循环整个组件

image.png

7. 生命周期
   4个大的生命周期

   
   
   image.png

初始化阶段
就是构造函数constructor在此阶段完成的,包括
props和state.

image.png

需要注意的是这个阶段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')
}

8. 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

image.png

image.png

一些常用的方法 .
1.getters 利用vue computed 属性快速得到多个state
computed: {
// 使用对象展开运算符将 getters 混入 computed 对象中
...mapGetters
([
'name',
])
}
2.将store注册到全局对象中

image.png

this."s"store.dispatch('方法名');
接下来就是正题了 REDUX-THUNK

image.png

image.png

reducers

image.png

reducers 写法

image.png

根据流程我们知道actions 是需要 action creators

image.png

image.png

在组件中使用

image.png

image.png