【React Hooks&Redux--学习小结】

一、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的工作模式：发布-订阅模式