React基础 第十二章（State快照）

理解state的行为对于编写可预测和高效的组件至关重要。本文将深入探讨state作为快照的概念，以及它在事件处理函数中的表现。我们将提供实用的开发技巧、示例代码以及注意事项，以帮助你更好地管理state。

State作为快照

在React中，state更像是组件在特定渲染时间点的快照，而不是一个可变的数据源。当你设置state时，你不是在修改当前的state，而是在排队一个新的渲染，这个新的渲染将会使用新的state值。

技巧：

• 使用state更新函数来确保state的更新基于最新的state值。
• 在事件处理函数中，不要期望state立即更新，而是要基于state的快照来编写逻辑。

示例：

function Counter() {
  const [number, setNumber] = useState(0);

  function handleClick() {
    setNumber(prevNumber => prevNumber + 1);
  }

  return (
    <>
      <h1>{number}</h1>
      <button onClick={handleClick}>+1</button>
    </>
  );
}

注意事项：

• 不要在事件处理函数中直接使用state来计算新的state值，因为它可能不是最新的。
• 使用函数式更新来确保state的更新是基于最新的state值。

正确代码：

setNumber(prevNumber => prevNumber + 1);

错误代码：

setNumber(number + 1); // 这可能不会使用最新的state值

State更新的异步性

在React中，state的更新是异步的。这意味着在设置state后，state不会立即更新，而是在下一次组件渲染时更新。

技巧：

• 了解state更新的异步性，不要依赖同步代码来检查state的更新。
• 在需要最新的state值时，使用useEffect或其他生命周期方法。

示例：

function MessageSender() {
  const [message, setMessage] = useState('');

  function handleSubmit() {
    sendMessage(message);
    setMessage(''); // 异步更新state
  }

  // 使用useEffect来响应state的更新
  useEffect(() => {
    if (message === '') {
      console.log('Message sent!');
    }
  }, [message]);

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={message}
        onChange={e => setMessage(e.target.value)}
      />
      <button type="submit">Send</button>
    </form>
  );
}

注意事项：

• 在事件处理函数中，不要期望在设置state之后立即看到更新。
• 使用useEffect来响应state的更新，而不是在事件处理函数中检查state。

正确代码：

useEffect(() => {
  // 响应state更新
}, [state]);

错误代码：

setMessage('new message');
console.log(message); // 这不会打印出'new message'

State在事件处理中的快照

在React中，当你在事件处理函数中使用state时，你访问的是该函数被调用时的state值。这个值是固定的，不会因为后续的state更新而改变。这就是所谓的"state快照"。

技巧：

• 在编写事件处理函数时，假设你获取的state值是不会变的快照。
• 当需要在事件处理函数中使用最新的state时，考虑使用状态更新函数。

示例：

function DelayedMessage() {
  const [message, setMessage] = useState('Initial message');

  function handleClick() {
    setTimeout(() => {
      alert(message); // 这将显示点击时的state快照
    }, 3000);
  }

  return (
    <>
      <button onClick={handleClick}>Show Message After 3 Seconds</button>
      <input
        type="text"
        value={message}
        onChange={e => setMessage(e.target.value)}
      />
    </>
  );
}

如果你在事件处理函数中设置了一个异步操作（比如使用setTimeout），并在这个异步操作中引用了state，那么无论state在异步操作完成之前是否发生了变化，你获取的都将是异步操作开始时的state值。

注意事项：

• 在异步代码（如setTimeout或Promise）中使用state时，记住你使用的是事件发生时的快照。
• 不要期望在异步代码中访问到最新的state值。

正确代码：

function DelayedMessage() {
  const [message, setMessage] = useState('Initial message');

  function handleClick() {
    setTimeout(() => {
      // 这里的message是handleClick被调用时的值，即state快照
      alert(message);
    }, 3000);
  }

  return (
    <>
      <button onClick={handleClick}>Show Message After 3 Seconds</button>
      <input
        type="text"
        value={message}
        onChange={e => setMessage(e.target.value)}
      />
    </>
  );
}

在这个正确的代码示例中，我们理解并接受了message在setTimeout回调函数中是一个快照，因此它将显示设置延时时的message值。

错误代码：

function DelayedMessage() {
  const [message, setMessage] = useState('Initial message');

  function handleClick() {
    setMessage('Updated message');
    setTimeout(() => {
      // 这里错误地假设message会是'Updated message'
      alert(message);
    }, 3000);
  }

  return (
    <>
      <button onClick={handleClick}>Show Message After 3 Seconds</button>
      <input
        type="text"
        value={message}
        onChange={e => setMessage(e.target.value)}
      />
    </>
  );
}

在这个错误的代码示例中，开发者可能错误地期望在setTimeout的回调函数中message会是最新的值（即'Updated message'）。但实际上，由于state的更新是异步的，alert将显示handleClick被调用时的message值，而不是setMessage之后的值。