新人全栈工程师的React练习（2） - 熟悉React，为按钮增加切换（toggle）功能

这个网页最开始的代码是这样的：

import React, { useState } from 'react';


function App() {
  const [showMessage, setShowMessage] = useState(false);

  const handleClick = () => {
    setShowMessage(true);
  };

  return (
    <div className="App" style={styles.container}>
      <h1 style={styles.title}>我今天完成了第一件小事：我整理了书桌。</h1>
      <button onClick={handleClick} style={styles.button}>我准备开始下一步</button>
      {showMessage && <p style={styles.message}>你已经走在进步的路上！继续加油 💪</p>}
    </div>
  );
}

const styles = {
  container: {
    textAlign: 'center',
    marginTop: '20vh',
    fontFamily: 'Arial',
    padding: '20px',
  },
  title: {
    color: '#333',
  },
  button: {
    padding: '12px 24px',
    fontSize: '16px',
    marginTop: '20px',
    cursor: 'pointer',
    backgroundColor: '#222',
    color: '#fff',
    border: '2px solid white',
    borderRadius: '50px',
  },
  message: {
    marginTop: '20px',
    fontSize: '18px',
    color: '#006400',
  },
};

export default App;

里面的按钮是点击一次，就出现了隐藏的文字。

现在修改一下，按钮点击来控制它“显示”或者“隐藏”。

于是，我们只用修改setShowMessage的方法。变成：

const handleClick = () => {
    setShowMessage(prev => !prev);
  };

即可。

这里，prev => !prev的意思是：取到当前的state的值，并取反。

相对于直接取showMessage的值，这个prev一定能取到state当前的值，所以推荐这么用。

如果直接取showMessage的值，chatgpt说有可能会因为项目过大，出现取到错误值的可能。

=======

原话是：

你也可以写成：

setShowMessage(!showMessage);

这在很多时候也能正常工作。但当你在复杂组件、短时间内多次更新 state时，这种方式可能拿到的是“过时的旧值” 。