React学习 Hooks的使用（二）

**

useReducer

**
useReducer是useState的替代方案，当state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等，useReducer 会比 useState 更适用

从useReducer的名字就可以看出，其用法了，如果熟悉 Redux 的话，就已经知道它如何工作了。但是它的作用还是与redux中的reducer有很大不同。它返回一个state和dispatch。

并且接收两个参数，一个是reducer和一个state的初始值。

reducer中包含传入的state以及action，由button中dispatch相应的action来改变state的值，这里的用法跟reducer差不多。

初始值如果是一个简单的number类型，那么在改变state的时候只需要直接修改state即可，获取state的值也是直接拿就可以，如下图所示

如果初始值是一个对象，那么在reducer中返回的值就要先对state进行一个拷贝，再修改counter的值，并且要通过state.counter来拿到state的值。这是个注意点。

---

**

useMemo

**

useMemo返回一个memoized 值，并且调用useMemo时接收两个参数，第一个是一个回调函数，第二个是依赖值，只有当依赖值发生改变了，才会调用回调值。这样的作法是为了优化性能。

---

**

useRef

**

定义：useRef返回一个ref对象，返回的ref对象在组件的整个生命周期中保持不变.

useRef使得我们可以在函数式组件中拿到DOM的属性，只需要在想要的DOM属性中定义一个ref，通过useRef 返回的一个 ref 对象来拿到这个DOM节点，并对其进行操纵。

需要注意的是，当子组件是函数式组件的时候不能用ref来获得函数式组件的DOM节点，只有类组件才可以用ref获得。