react hooks--useReducer

概述

很多人看到useReducer的第一反应应该是redux的某个替代品，其实并不是

◼ useReducer仅仅是useState的一种替代方案：

 在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；
 或者这次修改的state需要依赖之前的state时，也可以使用；

基本用法

useReducer仅仅是useState的一种替代方案：

 在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；

 或者这次修改的state需要依赖之前的state时，也可以使用

◼ 数据是不会共享的，它们只是使用了相同的counterReducer的函数而已。

◼ 所以，useReducer只是useState的一种替代品，并不能替代Redux

useReducer 接受一个 reducer 函数作为参数，reducer 接受两个参数一个是 state 另一个是 action 。然后返回一个状态 count 和 dispath，count 是返回状态中的值，而 dispatch 是一个可以发布事件来更新 state 的

语法：

const [state, dispatch] = useReducer(reducer, initialArg, init);

state：组件内部的数据，更改后也会引起组件的渲染

dispatch：和redux中dispatch功能是类似的，也是需要派发一个action通知reducer更新数据。

特别说明：

useState的替代方案接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法

在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数

useReducer相当于一个简化版的redux。

演示示例

App.js

import React from 'react'
import UseFun from './components/UseFun'
import CountFun from './components/CountFun'
import UseReducer from './components/UseReducer'export default function App() {let msg = '132'return (<div><UseReducer /></div>)
}

components/UseReducer.jsx

import React from 'react'
import { useReducer } from 'react';const intiState = {count: 0
}const reducer = (state, action) => {switch(action.type) {case 'add':state.count += action.payload.numreturn {...state,count: state.count}case 'reduce':state.count -= action.payload.num;return JSON.parse(JSON.stringify(state))default: return state;}
}export default function UseReducer(props) {const [state, dispatch] = useReducer(reducer, intiState)// 增加const addCount = () => {dispatch({type: 'add',payload: {num: 10}})}// 减少const reduceCount = () => {dispatch({type: 'reduce',payload: {num: 2}})}return (<div><p>{state.count}</p><button onClick={addCount}>增加count</button><button onClick={reduceCount}>减少count</button></div>)
}

如果发现操作reducer数据时，计算了两次，那么你需要考虑将数据深拷贝出来进行单独操作，不要对state中的数据进行修改。

总结

const [state, dispatch] = useReducer(reducer, initialArg, init); useState 的替代方案，它接收一个 (state, action) => newState 的 reducer 处理函数，并返回当前的 state 和配套的 dispatch 方法。使用方法与 redux 非常相似。某些场景下，useReducer 比 useState 更加适用：当状态变量比较复杂且包含多个子值的时候下一个 state 依赖之前的 state