React 的useReducer 的用法
const [state, dispatch] = useReducer(reducer, init);
当我们的 useEffect 里面涉及到两个变量的时候,我们就可以 使用useReducer, 可以看一下 下面的例子:
import React, { useReducer, useEffect } from "react";
import ReactDOM from "react-dom";
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
const { count, step } = state;
useEffect(() => {
const id = setInterval(() => {
dispatch({ type: 'tick' });
}, 1000);
return () => clearInterval(id);
}, [dispatch]);
return (
<>
<h1>{count}</h1>
<input value={step} onChange={e => {
dispatch({
type: 'step',
step: Number(e.target.value)
});
}} />
</>
);
}
const initialState = {
count: 0,
step: 1,
};
function reducer(state, action) {
const { count, step } = state;
if (action.type === 'tick') {
return { count: count + step, step };
} else if (action.type === 'step') {
return { count, step: action.step };
} else {
throw new Error();
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Counter />, rootElement);
React的其他hooks用法: 链接 大佬写的非常的好,推荐可以看一下