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（React source code）：

function updateState<S>(initialState: (() => S) | S,): [S, Dispatch<BasicStateAction<S>>] {

  return updateReducer(basicStateReducer, (initialState: any));
}

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

Answer 2

如穆罕默德·拉姆拉米（Mohamed Ramrami）所说-

useState在后台使用useReducer

因此从理论上讲useReducer更快，请记住

Premature optimization is the root of all evil

因此，专注于代码质量和可读性，当您开始遇到甚至可能不会发生的情况时，应该使用某种测量技术来解决性能问题，React进行了优化。

哪个更快，性能更好：useState或useReducer？

2 个答案: