是否可以重新创建类组件的状态行为使用useReducer?

Question

所以在react hooks中我们可以在组件中有多个状态:

const [stateA, setStateA] = useState(0);
const [stateB, setStateB] = useState('Hello World');
const [stateC, setStateC] = useState(true);

，但有一种情况，我们需要一次更新多个状态。比如当点击event:

const handleClick = () => {
setStateA(prev => prev+1);
setStateB('John Doe');
setStateC(false);
}

我们可以看到，我需要逐个更新这些状态。因此，为了一次更新所有状态并确保所有更新在同一批处理中，我尝试制作这个reducer:

const stateReducer => (prev, next) {
switch (typeof next) {
case 'object':
return { ...prev, ...next };
case 'function':
return { ...prev, ...next(prev) };
default:
return prev;
}
...
const [state, setState] = useReducer(stateReducer, {
stateA: 0,
stateB: 'Hello World',
stateC: true
});
...
// just set single state
setState({stateA: 0});
// set multiple state
setState({
stateA: 5,
stateB: 'John Doe'
});
// set multiple state with prev state
setState(prev => ({
stateA: prev.stateA +1,
stateB: 'John Doe',
stateC: !prev.stateC,
}));

的作品!但这对表演有什么影响呢?还是这样可以?

Answer 1

您的性能不会受到影响。

在react hooks引用中的功能更新部分，当我们需要管理不同的状态变量时，它们会发布useReducer作为useState的替代。

另一个选项是useReducer，它更适合于管理包含多个子值的状态对象。

性能关键不在于useState或useReducer本身的使用，它更多的是关于你为什么需要使用它，正如他们在useReducer文档中所说，你正在很好地使用它，简化了处理这三个状态变量的方式。

当你有复杂的状态逻辑，涉及到多个子值，或者下一个状态依赖于前一个状态时，useReducer通常比useState更可取。

不是100%确定，但我认为useState内部使用useReducer。