image.png
如果state中有复杂的逻辑的话
import React, { memo, useState } from "react";
const App = memo(() => {
const [count, setCount] = useState(0);
return (
<div>
<h2>当前计数:{count}</h2>
<button onClick={(e) => setCount(count + 1)}>+1</button>
<button onClick={(e) => setCount(count - 1)}>-1</button>
<button onClick={(e) => setCount(count + 5)}>+5</button>
<button onClick={(e) => setCount(count - 5)}>-5</button>
<button onClick={(e) => setCount(count + 100)}>+100</button>
</div>
);
});
export default App;
不适用useState，使用useReducer
import React, { memo, useReducer } from "react";
function reducer(state, action) {
const { data, type } = action;
switch (type) {
case "increment":
return { ...state, count: state.count + 1 };
case "decrement":
return { ...state, count: state.count - 1 };
case "add_number":
return { ...state, count: state.count + data };
case "sub_number":
return { ...state, count: state.count - data };
default:
return state;
}
}
const App = memo(() => {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<h2>当前计数:{state.count}</h2>
<button onClick={(e) => dispatch({ type: "increment", data: 1 })}>
+1
</button>
<button onClick={(e) => dispatch({ type: "decrement", data: 1 })}>
-1
</button>
<button onClick={(e) => dispatch({ type: "add_number", data: 5 })}>
+5
</button>
<button onClick={(e) => dispatch({ type: "sub_number", data: 5 })}>
-5
</button>
<button onClick={(e) => dispatch({ type: "add_number", data: 100 })}>
+100
</button>
</div>
);
});
export default App;
当点击加或者减的时候，本质是派发事件，就来到reducer函数，对事件进行处理，返回一个新的state，state发生改变，整个App组件就会重新执行，重新执行useReducer，拿到新的reducer，继而拿到新的状态。重新渲染jsx。
优点
管理非常复杂的数据的时候使用。
比如state里面有
{ counter: 0, friends: [], user: {} }
需要管理。
如果使用useState的化，需要定义三次
const [counter, setCounter] = useState(0)
const [friends, setFriends] = useState([])
const [user, setUser] = useState({})
使用useReducer的化，就只用定义一次。
const [state, dispatch] =
useReducer(reducer, { counter: 0, friends: [], user: {} })
然后在functionreducer(state, action)里面的switch里面统一做修改。
总结：数据复杂，操作复杂，就放到reducer里面，在reducer里面执行所有的逻辑。用的很少，因为想改变数据，就要到reducer里面来，某种程度上不是很方便。一般不使用reducer。
