【React HooksRedux--学习小结】
目录
- 一、React Hooks
- 1、useState： 可以在函数组件中使用state
- 2、useRef：看成是createRef的Hook版。
- 3、useEffect
- 4、Hooks的使用规则
- 5、自定义Hooks：在应用中可以将一些需要重复使用的逻辑自定义成Hook
- 二、Redux
- 1、三大核心：
- 2、Redex的函数：
- 3、store对象提供的方法：
一、React Hooks
1、useState： 可以在函数组件中使用state
2、useRef：看成是createRef的Hook版。
使用方法：
(1)先将ref存入变量
let el = useRef()
(2)再将变量与DOM节点进行绑定，通过ref的current属性来获取DOM节点
<p ref={ el }>web开发</p>
el.current
useRef的作用：
(1)可以绑定DOM组件
(2)可以获取组件渲染之前的数据
3、useEffect
useEffect：在类组件中副作用通常在componentDidMount、componentDidUpdate、componentWillUnMount 生命周期函数中进行处理。
在函数组件中useEffect相当于以上三个钩子函数的集合体。
包含两个参数：第一参数是执行时的回调函数、第二个参数是依赖参数；并且回调函数,还有一个返回函数。
(1)依赖参数：是一个数组,数组中存放的是要依赖的数据，当这些数据更新时就会执行回调函数
(2)执行过程：
组件挂载–>执行副作用(回调函数)–>组件更新–>执行清理函数(返回函数)–>执行副作用(回调函数)–>组件准备卸载–>执行清理函数(返回函数) -->组件卸载
4、Hooks的使用规则
(1)只能在函数组件和自定义的Hooks中调用Hooks。类组件和普通函数不能使用Hooks
(2)只能在函数的第一层中调用Hooks。在函数中若使用了流程控制语句(if、for、while),在流程控制语句不能使用Hooks;若函数中定义了子函数，子函数中也不能使用Hooks
5、自定义Hooks：在应用中可以将一些需要重复使用的逻辑自定义成Hook
示例：自定义一个Hook，返回一个和滚动条位置实时同步的state
二、Redux
Redux：是一个状态管理的库。不是React内置的，是独立的JavaScript的状态容器，提供可预测的状态管理,在React中使用Redux，可以把所有的state集中到组件的顶部，能够灵活地将所有的state分发给所有组件。方便了开发者管理React中的状态,也方便了不同组件间的通信
1、三大核心：
(1)store：是一个数据容器,用来管理和保存整个项目的state。整个项目中只能有一个store
(2)state：是一个对象，在state中存储相应的数据，当开发者需要使用数据时,可以通过store提供的方法来获取state
(3)action：是一个通知命令，用于对state进行修改。通过store提供的方法可以发起action完成对state的修改
2、Redex的函数：
(1)action：本质是JavaScript对象，在action中包含一个字符串类型的type属性，作用是指定要对state进行何种操作。action会通过store将要进行的操作传给reducer函数，由reducer 函数完成对state的修改
action({type:‘add’,data:‘’})
(2)reducer：是一个纯函数。有两个参数state和action。该函数一定有一个返回值，是修改后的state
纯函数：
a、纯函数在执行过程中没有任何副作用。如定时器、网络请求
b、如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部状态或 数据的变化。
function reducer(state={ count:1},action){
switch(action.type){
case ‘ADD’:
return {count: state.count+1 }
case ‘SUB’:
return {count: state.count-1 }
}
return state;
}
(3)createStore：用于创建store,参数必须是reducer,reducer函数名可以自定义
3、store对象提供的方法：
(1)getState：用来获取state
(2)dispatch(action)：派发action给reducer
(3)subscribe(listener)：会注册一个监听器来监听state的变化。会返回一个注销监听器的方法
Redux的工作模式：发布-订阅模式