React Hook功能发布后，允许在Function Component中使用useState(状态)、useEffect(副作用)。
useState的单条声明的方式相当于变相的把React组件分解的越来越小。（因为一条一条写太麻烦了呀～）。但是在开发中，一个组件中出现几十个状态的也是常有的事情。
像这样：
const page = () => {
const [dataSource, setDataSource] = useState([]);
const [loading, setLoading] = useState(false);
const [visible, setVisible] = useState(false);
const [fifterName,setFifterName] = useState('');
...
const [order, setOrder] = useState(-1);
}
这能忍吗？？？（突然有点怀念class component了～）
再想一下每一个state还有一个对应的专门改变state的函数，还要管理这些函数
啊心态崩了
莫慌,useReducer他来了
先看看useReducer改造下它的代码吧
const [state, dispach] = useReducer(reducer, initialState);
const initialState = {
dataSource: [],
loading: false,
visible: false,
filterName: '',
...
order: -1
}
const reducer = (state, action) => {
let newState = {...state};
switch(action.type) {
case 'SET_DATA':
newState.dataSource = action.dataSource;
break
case 'OPEN_LOADING':
newState.loading = true;
break
...
default:
newState = state;
}
return newState
}
// 改变状态只需要发送一个action即可
const getData = () => {
axios(...).then(res => {
const dataSource = res.data.data || [];
const action = {
type: 'SET_DATA',
dataSource
}
dispach(action)
})
}
useReducer可以接受两个参数
- initialState: 初始化的state
- reducer : 处理action的纯函数。
注意！reducer中不建议去做逻辑运算，会使你的代码看起来很乱
useReducer返回两个参数
- 当前时刻的state
- 负责发送action的dispach函数
想要改变某个state?很简单，你只需要用dispach向useReducer发送一个action,然后用action.type来区分reducer收到这个action后的行为即可。
例如：
//在上述代码中，我们在setDataSource的同时，应该关掉loading。
// 我们只需要在 case 为 ’SET_DATA‘下增加一条
newState.loading = false
// 即可
