useReducer 和带有回调的 useState 之间有实际区别吗？

Question

假设我们有一个像这样的基本减速器函数：

function reducer(state, action) {
    if(action.type === 'add')
        return state + action.value;
    if(action.type === 'multiply')
        return state * action.value;
    return state;
}

使用我们的减速器与

useReducer

:

有实际区别吗

const [x, dispatch] = useReducer(reducer, 1);
dispatch({ type: 'add', value: 2 });
dispatch({ type: 'multiply', value: 10 });

或者使用我们的减速器

useState

:

const [x, setX] = useState(1);
setX(x => reducer(x, { type: 'add', value: 2 }));
setX(x => reducer(x, { type: 'multiply', value: 10 }));

我要问的是，react 处理这些示例的方式是否存在根本区别，或者

useReducer

是否真的只是

useState

和语法糖。

Answer 1

“实际差异”是代码的可读性和可维护性。

React 处理它们的方式确实非常相似，你几乎可以说相同（目前）。

一般在React中，它应该被视为高级抽象，你应该只遵循规则和建议，而不需要询问实现细节。您甚至可能愿意为了更干净的代码而牺牲一些性能（在非性能关键情况下）。

即两种 React 机制可能工作方式完全相同或完全不同，但这并不重要，您正在使用 React 编写声明性代码和众所周知的模式，并让 React 处理实现。

例如想象一下

useState

或

useReducer

今天可能会以某种方式实施，但明天他们会从根本上改变其中之一，因为他们注意到在人们大多数遵循建议的假设下可以显着优化某些内容。但它们的用法将保持不变，你不必关心，就你而言，React 只是变得更快了一点。

但是当然，好奇是好事：

你的假设是正确的，

useState

和

useReducer

几乎是一样的。据我所知（不是100％确定），

useState

甚至在内部使用

useReducer

。这意味着

useState

将是

useReducer

的语法糖，而不是相反。

关于性能：

当然，一个函数声明和/或函数调用或多或少，就像在你的例子中一样，理论上应该对性能产生影响，但这应该可以忽略不计，甚至在实践中不正确（可能是由于编译器优化。我不知道）不知道）。但这可能不是你问题的重点。

另请参阅： 比较 useState 和 useReducer