useReducer

一 介绍

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

二 示例一：数字加或乘任意数字

import React, {useReducer} from 'react';
import ReactDOM from 'react-dom';


const initial = {n: 1};
//把对数据的操作封装起来
const reducer = (state, action) => {
    if (action.type === 'add') {
        return {n: state.n + action.number};
    } else if (action.type === 'multi') {
        return {n: state.n * action.number};
    } else {
        throw new Error('没有对应操作');
    }
};


const App = () => {
    //将初始值和所有操作传给useReducer，已得到读写API
    const [state, dispatch] = useReducer(reducer, initial);
    return (
        <>
            <div>
                {/*读数据*/}
                {state.n}
                {/*写数据*/}
                <button onClick={() => dispatch({type: 'add', number: 10})}>+10</button>
                <button onClick={() => dispatch({type: 'multi', number: 5})}>x5</button>
            </div>
        </>
    );
};


ReactDOM.render(
    <App/>,
    document.getElementById('root')
);

三 示例二：表单

import React, {useReducer} from 'react';
import ReactDOM from 'react-dom';


const initialFormDate = {
    name: '芋圆',
    color: '紫色',
    count: '15'
};

const reducer = (state, action) => {
    switch (action.type) {
        case 'patch':
            return {...state, ...action.newFormDate};
        case 'reset':
            return initialFormDate;
        default:
            throw new Error('错误');
    }
};


const App = () => {
    //将初始值和所有操作传给useReducer，已得到读写API
    const [formData, dispatch] = useReducer(reducer, initialFormDate);

    const onSubmit=()=>{

    }
    const onReset=()=>{
        dispatch({type:'reset'})
    }
    return (
        <form onSubmit={onSubmit} onReset={onReset}>
            <div>
                <div>
                    <label>名称
                        <input value={formData.name} onChange={e=>dispatch({type:'patch',newFormDate:{name:e.target.value}})} />
                    </label>
                </div>
                <div>
                    <label>颜色
                        <input value={formData.color} onChange={e=>dispatch({type:'patch',newFormDate:{color:e.target.value}})} />
                    </label>
                </div>
                <div>
                    <label>数目
                        <input value={formData.count} onChange={e=>dispatch({type:'patch',newFormDate:{count:e.target.value}})} />
                    </label>
                </div>
                <div>
                    <button type='submit'>提交</button>
                    <button type='reset'>重置</button>
                </div>
                {JSON.stringify(formData)}
            </div>
        </form>
    );
};


ReactDOM.render(
    <App/>,
    document.getElementById('root')
);

四 总结

1. 创建初始initialState
2. 创建所有操作reducer(state,action)
3. 传给useReducer，得到读写API
4. 调用写API，参数要包含{type:'操作类型'}