哪个更快和高性能:useState 还是 useReducer?

Question

正如我在文档中看到的，useState和useReducer做同样的工作。 只是useReducer需要手动完成一些事情，并且更适合复杂状态。

我的问题是，哪个更快？我的意思是哪个会在更短的时间内完成工作？

目前我正在使用useState：

const [messages, setMessages] = useState({});
const setMessage = (message, room) => {
setMessages(messages => {
if (messages[room] !== undefined)
return {...messages, [room]: [message, ...messages[room]] };
else return { ...messages, [room]: [message] };
});
}

在这里，如您所见，我使用setMessages存储每个房间的消息。 这效果很好，但是我很困惑如果我使用useReducer而不是useState会更快吗？

我的消息对象如下：

const message = {
id: 'randomid',
text: 'a message text',
date: new Date(),
user: 'user1',
sent: false,
received: false,
delevered: false
}
const room = 'somerandomeroomid';

Answer 1

正如穆罕默德·拉姆拉米所说——

useState 正在使用引擎盖下的 useReducer

所以理论上使用减速器是更快的，记住

Premature optimization is the root of all evil

所以专注于代码质量和可读性，你应该在开始遇到甚至可能不会发生的它们时使用一些测量技术来解决性能问题，React 非常优化。

Answer 2

useState正在使用引擎盖下的useReducer(React 源代码(：

function updateState<S>(initialState: (() => S) | S,): [S, Dispatch<BasicStateAction<S>>] {
return updateReducer(basicStateReducer, (initialState: any));
}

我认为根本不会有任何性能差异。