[TOC] ## 概述 State 與 props 類似，但是 state 是私有的，并且完全受控于當前組件。 ## state ``` // 一個用來存儲變量,一個用來設置變量 let [count, setCount] = useState(0); ``` ### 常規示例 ``` import { useState, useEffect } from "react"; export default function Demo() { let [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( <div> <button onClick={handleClick}>Click me</button> <p>Count: {count}</p> </div> ); } ``` **設置多個state 只會為下一次渲染變更 state 的值** ``` <> <h1>{number}</h1> <button onClick={() => { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3</button> </> ) ``` >**雖然觸發了三次,但是number 觸發一次,因為每次觸發時,number都是在0的狀態觸發** 等價 ``` setNumber(0+ 1); setNumber(0+ 1); setNumber(0+ 1); alert(number) //0 setTimeout(() => { // 哪怕使用 settimeout, number也是0 alert(number); }, 3000); ``` ### 多次更新state,使用匿名函數 ``` setNumber(n => n + 1); setNumber(n => n + 1); setNumber(n => n + 1); ``` ### 更新對象 ``` // 聲明 const [person, setPerson] = useState({ firstName: 'Barbara', lastName: 'Hepworth', email: 'bhepworth@sculpture.com' }); // 更新 setPerson({ firstName: e.target.value, // 從 input 中獲取新的 first name lastName: person.lastName, email: person.email }); // 更新某個值 const [person, setPerson] = useState({ ...person, email: 'bhepworth@sculpture.com' }); ``` > 以上示例只是淺拷貝 #### 使用深拷貝 ``` const [person, setPerson] = useState({ name: 'Niki de Saint Phalle', artwork: { title: 'Blue Nana', city: 'Hamburg', image: 'https://i.imgur.com/Sd1AgUOm.jpg', } }); // 方式一: 創建一個新對象 const nextArtwork = { ...person.artwork, city: 'New Delhi' }; const nextPerson = { ...person, artwork: nextArtwork }; setPerson(nextPerson); // 方式二: 使用展開,推薦 setPerson({ ...person, // 復制其它字段的數據 artwork: { // 替換 artwork 字段 ...person.artwork, // 復制之前 person.artwork 中的數據 city: 'New Delhi' // 但是將 city 的值替換為 New Delhi！ } }); // ``` ### 更新數組 | 避免使用 (會改變原始數組) | 推薦使用 (會返回一個新數組） | | --- | --- | | 添加元素 | `push`，`unshift` | `concat`，`[...arr]`展開語法（[例子](https://zh-hans.react.dev/learn/updating-arrays-in-state#adding-to-an-array)） | | 刪除元素 | `pop`，`shift`，`splice` | `filter`，`slice`（[例子](https://zh-hans.react.dev/learn/updating-arrays-in-state#removing-from-an-array)） | | 替換元素 | `splice`，`arr[i] = ...`賦值 | `map`（[例子](https://zh-hans.react.dev/learn/updating-arrays-in-state#replacing-items-in-an-array)） | | 排序 | `reverse`，`sort` | 先將數組復制一份（[例子](https://zh-hans.react.dev/learn/updating-arrays-in-state#making-other-changes-to-an-array)） | > 或者使用 immer ,可使用所有的方法 bad ``` const [artists, setArtists] = useState([]); <button onClick={() => { artists.push({ id: nextId++, name: name, }); }}>添加</button> ``` good ``` setArtists( // 替換 state [ // 是通過傳入一個新數組實現的 ...artists, // 新數組包含原數組的所有元素 { id: nextId++, name: name } // 并在末尾添加了一個新的元素 ] ); // 追加到之前 setArtists([ { id: nextId++, name: name }, ...artists // 將原數組中的元素放在末尾 ]); // 刪除元素 setArtists( artists.filter(a => a.id !== artist.id ) ); ``` ### 在相同位置重置 state **方式一: 不同位置** 由于react ,會根據組件在樹中的不同位置,判斷是否保留 state ``` export default function Scoreboard() { const [isPlayerA, setIsPlayerA] = useState(true); return ( <div> {isPlayerA && <Counter person="Taylor" /> } {!isPlayerA && <Counter person="Sarah" /> } <button onClick={() => { setIsPlayerA(!isPlayerA); }}> 下一位玩家！ </button> </div> ); } ``` **方式二:指定key** 請記住 key 不是全局唯一的。它們只能指定 父組件內部 的順序。 ``` export default function Scoreboard() { const [isPlayerA, setIsPlayerA] = useState(true); return ( <div> {isPlayerA ? ( <Counter key="Taylor" person="Taylor" /> ) : ( <Counter key="Sarah" person="Sarah" /> )} <button onClick={() => { setIsPlayerA(!isPlayerA); }}> 下一位玩家！ </button> </div> ); } ``` 指定key 的第二個示例 ``` export default function App() { const [showHint, setShowHint] = useState(false); if (showHint) { return ( <div> <p><i>提示：你最喜歡的城市？</i></p> <Form key='123' /> <button onClick={() => { setShowHint(false); }}>隱藏提示</button> </div> ); } return ( <div> <Form key='123' /> <button onClick={() => { setShowHint(true); }}>顯示提示</button> </div> ); } ``` ## reducer 整個state狀態 示例 ``` import { useReducer } from 'react'; type item = { id:number, text?:string, done?:boolean } type action = { type:string, task:item } function tasksReducer(tasks:item[],action:action):item[]{ switch(action.type){ case 'added':{ return [...tasks,action.task] } case 'update':{ return tasks.map((t:item)=>{ if(t.id===action.task.id){ return action.task } return t }) } case 'deleted':{ return tasks.filter((t:item)=>t.id!==action.task.id) } } return tasks } export default function Demo11() { const data:item[] = []; const [tasks, dispatch] = useReducer(tasksReducer, data); function handleAdd(task:item){ dispatch({ type:'added', task:task }) } function handleUpdate(task:item){ dispatch({ type:'update', task:task }) } function handleDelete(task:item){ dispatch({ type:'deleted', task:task }) } return <div> <p>{JSON.stringify(tasks)}</p> <button onClick={()=>handleAdd({id:1,text:'111',done:true})}>button1</button> <button onClick={()=>handleUpdate({id:1,text:'222',done:false})}>button2</button> <button onClick={()=>handleDelete({id:1})}>button3</button> </div> } ``` > 使用 Immer 簡化 reducer