react的hook之useReducer
import React, { useState, memo, useMemo, useCallback, useReducer, useContext } from 'react'; import ReactDOM from 'react-dom'; export function Three() { let initialState = 0; // 如果你希望初始状态是一个{number:0} // 可以在第三个参数中传递一个这样的函数 ()=>({number:initialState}) // 这个函数是一个惰性初始化函数,可以用来进行复杂的计算,然后返回最终的 initialState const init = (initialState) => { return { number: initialState }; } const reducer = (state, action) => { debugger switch (action.type) { case 'increment': return { number: state.number + 1 }; case 'decrement': return { number: state.number - 1 }; default: throw new Error(); } }; const [state, dispatch] = useReducer(reducer, initialState, init); return ( <> Count: {state.number} <button onClick={() => dispatch({ type: 'increment' })}>+</button> <button onClick={() => dispatch({ type: 'decrement' })}>-</button> </> ) }
下面和上面一样,只是参数改了下形式,对比看下
import React, { useState, memo, useMemo, useCallback, useReducer, useContext } from 'react'; import ReactDOM from 'react-dom'; export function Three() { let initialState = { number: 0 }; // 如果你希望初始状态是一个{number:0} // 可以在第三个参数中传递一个这样的函数 ()=>({number:initialState}) // 这个函数是一个惰性初始化函数,可以用来进行复杂的计算,然后返回最终的 initialState const reducer = (state, action) => { //debugger switch (action.type) { case 'increment': return { number: state.number + 1 }; case 'decrement': return { number: state.number - 1 }; default: throw new Error(); } }; const [state, dispatch] = useReducer(reducer, initialState); return ( <> Count: {state.number} <button onClick={() => dispatch({ type: 'increment' })}>+</button> <button onClick={() => dispatch({ type: 'decrement' })}>-</button> </> ) }
总结:
第一个参数是(state, action) => newState
的 reducer,第二个参数是state的值
reducer里面的action就是底下dispatch的参数,state就是initialState的值
有点类似于vue3.0的ref,reactive,一个是简单数据结构的state,一个是声明复杂数据结构的state
还可以参考https://www.jianshu.com/p/14e429e29798