useState 入門：讓元件擁有自己的資料

相关文章推荐

淡定的盒饭 · ASP.NET 核心 Blazor ...· 2 月前 ·

失望的鸡蛋面 · 循环吧，代码 - 学习 Web 开发 | MDN· 2 月前 ·

快乐的剪刀 · 針對適用於Linux的 Windows ...· 5 月前 ·

曾经爱过的松树 · 从list中过滤出，list字段中不包含某个 ...· 1 年前 ·

飘逸的豆芽 · 1.2 TensorFlow2.3.1 ...· 2 年前 ·

一直单身的机器猫 · Mac 终端 sed 替换 - ...· 2 年前 ·

Facebook LinkedIn Tweet

更新日期： 2025 年 6 月 10 日

在學會 React 元件後，你可能會發現一個問題：當畫面重新渲染時，元件內的變數好像會「歸零」？

舉個例子，如果你寫了一個 let count = 0 ，但當使用者點按按鈕後畫面更新， count 還是從 0 開始。

那該怎麼辦呢？這就是 React 提供的第一個 Hook —— useState 派上用場的地方！

     const list = document.createElement(‘ul’);
for (let i = 0; i < items.length; i++) {
  const li = document.createElement(‘li’);
  li.textContent = items[i];
  list.appendChild(li);
container.appendChild(list);

const list = document.createElement('ul');
for (let i = 0; i < items.length; i++) {
  const li = document.createElement('li');
  li.textContent = items[i];
  list.appendChild(li);
container.appendChild(list);
function LightSwitch() {
  const [isOn, setIsOn] = useState(false);        // 控制燈泡開關
  const [color, setColor] = useState(‘yellow’);   // 控制燈泡顏色
  return (
      <p>狀態：{isOn ? ‘💡 開’ : ‘🌑 關’}，顏色：{color}</p>
      <button onClick={() => setIsOn(!isOn)}>切換開關</button>
      <button onClick={() => setColor(‘blue’)}>變藍色</button>
function LightSwitch() {
  const [isOn, setIsOn] = useState(false);        // 控制燈泡開關
  const [color, setColor] = useState('yellow');   // 控制燈泡顏色
  return (
      <p>狀態：{isOn ? '💡 開' : '🌑 關'}，顏色：{color}</p>
      <button onClick={() => setIsOn(!isOn)}>切換開關</button>
      <button onClick={() => setColor('blue')}>變藍色</button>
    </div>
      <h2>點擊了 {count} 次</h2>
      <button onClick={() => setCount(count + 1)}>再點一下</button>
    </div>
      <p>💡 燈泡目前：{isOn ? ‘💡 開著’ : ‘🌑 關著’}</p>
      <button onClick={() => setIsOn(!isOn)}>
        {isOn ? ‘關燈’ : ‘開燈’}
      </button>
function LightBulb() {
  const [isOn, setIsOn] = useState(false);
  return (
      <p>💡 燈泡目前：{isOn ? '💡 開著' : '🌑 關著'}</p>
      <button onClick={() => setIsOn(!isOn)}>
        {isOn ? '關燈' : '開燈'}
      </button>
    </div>
setCount(count + 1);
setCount(count + 1); // 這兩行其實不會 +2，因為 count 值還沒更新setCount(count + 1);
setCount(count + 1); // 這兩行其實不會 +2，因為 count 值還沒更新
正確方式：
setCount(prev => prev + 1);
setCount(prev => prev + 1); // 這樣才會變成 +2setCount(prev => prev + 1);
setCount(prev => prev + 1); // 這樣才會變成 +2
state 更新後不會立即反映在 console.log
setCount(5);
console.log(count); // ❌ 還是舊值setCount(5);
console.log(count); // ❌ 還是舊值
為畫面還沒更新完，想看到新值請用 useEffect 等待 render。