【React】hooks 之 useReducer

1 useState
2 useEffect
3 useContext
4 useReducer

---

4 useReducer() action 钩子

useReducer可用于提高应用性能，当更新逻辑比较复杂时，可以考虑使用useReducer。

任何有使用useState的地方，都可以替换成 useReducer。

4.1 创建初始值 initialState

const initialState = { count: 0 }

4.2 创建 reducer 函数

reducer 有两个必不可少的形参，分别是传入的值与将要执行操作的类型。

在函数中整合了所有类型的操作。

const reducerName = (state, action) => {
	switch (action.type){
		case 'add'
            return { count: state.count + 1 }
    	case 'sub'
    		return { count: state.count - 1 }
		default:
			break
    }
}

4.3 使用 useReducer

使用 useReducer 需要传入两个参数，分别是reducer函数和初始值initialState。

返回一个数组，第一项state保存的是值，第二项是dispatch

const [state, dispatch] = useReducer(reducerName, initialState);

4.4 使用state 与 调用 dispatch

通过onClick事件调用dispatch，并传入一个有操作类型的对象。

return (<>
	<p>count值：{state.count}</p>
	<button onClick={() => dispatch({ type: 'add' })}>加1</button>
	<button onClick={() => dispatch({ type: 'sub' })}>减1</button>
</>)

4.5 完整示例：

import React, { useReducer } from 'react';

const initialState = { count: 0 }// 初始参数

const reducerName = (state, action) => {// 创建 reduce 函数
	switch (action.type){
		case 'add'
            return { count: state.count + 1 }
    	case 'sub'
    		return { count: state.count - 1 }
		default:
			break
    }
}

const Test = () => {
    const [state, dispatch] = useReducer(reducerName,initialState);
    return (<>
		<p>count值：{state.count}</p>
        <button onClick={() => dispatch({ type: 'add' })}>加1</button>
        <button onClick={() => dispatch({ type: 'sub' })}>减1</button>
	</>)
}