javascript - 为什么调用 setState 两次导致单次状态更新？

Question

这可能是 React 初学者的错误，但我想使用“add2Messages”调用“addMessage”两次，但它只注册一次。我猜这与钩子(Hook)在 React 中的工作方式有关，我怎样才能让它工作？

export default function MyFunction() {
  const [messages, setMessages] = React.useState([]);

  const addMessage = (message) => {
    setMessages(messages.concat(message));
  };

  const add2Messages = () => {
    addMessage("Message1");
    addMessage("Message2");
  };

  return (
    <div>
      {messages.map((message, index) => (
        <div key={index}>{message}</div>
      ))}
      <button onClick={() => add2Messages()}>Add 2 messages</button>
    </div>
  );
}

我正在使用 React 17.0.2

Answer 1

当使用正常形式的状态更新时，React 会将多个 setState 调用分批为单个更新并触发一次渲染以提高性能。

使用功能状态更新将解决这个问题:

const addMessage = (message) => {
  setMessages(prevMessages => [...prevMessages, message]);
};

const add2Messages = () => {
  addMessage('Message1');
  addMessage('Message2');
};

---

更多关于功能状态更新:

功能状态更新是更新状态的另一种方法。这通过传递一个回调函数来实现，该回调函数将更新后的状态返回给 setState。

React 将使用之前的状态调用此回调函数。

当您只想将先前状态递增 1 时，功能状态更新如下所示:

setState((previousState) => previousState + 1)

优点是:

1. 您可以访问之前的状态作为参数。因此，当新状态依赖于先前状态时，该参数很有帮助，因为它解决了陈旧状态的问题(当您使用正常状态更新来确定下一个状态时可能会遇到的问题，因为状态是异步更新的)

2. 不会跳过状态更新。

3. 在使用 useCallback 时更好地内存处理程序，因为大多数时候依赖项可以为空:

   const addMessage = useCallback((message) => {
     setMessages(prevMessages => [...prevMessages, message]);
   }, []);