更新 state 中的對象

state 中可以保存任意類型的 JavaScript 值，包括對象。但是，你不應該直接修改存放在 React state 中的對象。相反，當你想要更新一個對象時，你需要創建一個新的對象（或者將其拷貝一份），然后將 state 更新為此對象。

文章及例子是參考React官方文檔教程，開發環境：React+ts+antd

學習內容:

• 如何正確地更新 React state 中的對象
• 如何在不產生 mutation 的情況下更新一個嵌套對象
• 什么是不可變性（immutability），以及如何不破壞它
• 如何使用 Immer 使復制對象不那么繁瑣

什么是 mutation？

你可以在 state 中存放任意類型的 JavaScript 值。

const [x, setX] = useState(0);
setX(5);

state x 從 0 變為 5，但是數字 0 本身并沒有發生改變。在 JavaScript 中，無法對內置的原始值，如數字、字符串和布爾值，進行任何更改。

現在考慮 state 中存放對象的情況：

const [position, setPosition] = useState({ x: 0, y: 0 });

從技術上來講，可以改變對象自身的內容。當你這樣做時，就制造了一個 mutation：

position.x = 5;

然而，雖然嚴格來說 React state 中存放的對象是可變的，但你應該像處理數字、布爾值、字符串一樣將它們視為不可變的。因此你應該替換它們的值，而不是對它們進行修改。

將 state 視為只讀的

換句話說，你應該 把所有存放在 state 中的 JavaScript 對象都視為只讀的。

在下面的例子中，我們用一個存放在 state 中的對象來表示指針當前的位置。當你在預覽區觸摸或移動光標時，紅點會跟隨著你的指針移動:

import React from 'react';
import {useState} from "react";const App: React.FC = () => {const [position, setPosition] = useState({x: 0,y: 0});return (<divonPointerMove={e => {setPosition({x: e.clientX,y: e.clientY});}}style={{position: 'relative',width: '100vw',height: '100vh',}}><div style={{position: 'absolute',backgroundColor: 'red',borderRadius: '50%',transform: `translate(${position.x}px, ${position.y}px)`,left: -10,top: -10,width: 20,height: 20,}}/></div>);
};export default App;

使用展開語法復制對象

在之前的例子中，始終會根據當前指針的位置創建出一個新的 position 對象。但是通常，你會希望把 現有 數據作為你所創建的新對象的一部分。例如，你可能只想要更新表單中的一個字段，其他的字段仍然使用之前的值。

下面的代碼中，輸入框并不會正常運行，因為 onChange 直接修改了 state ：

import React from 'react';
import {useState} from "react";const App: React.FC = () => {const [person, setPerson] = useState({firstName: 'Barbara',lastName: 'Hepworth',email: 'bhepworth@sculpture.com'});const handleFirstNameChange=(e:any)=> {person.firstName = e.target.value;}const handleLastNameChange=(e:any)=> {person.lastName = e.target.value;}const handleEmailChange=(e:any)=> {person.email = e.target.value;}return (<><label>First name:<inputvalue={person.firstName}onChange={handleFirstNameChange}/></label><label>Last name:<inputvalue={person.lastName}onChange={handleLastNameChange}/></label><label>Email:<inputvalue={person.email}onChange={handleEmailChange}/></label><p>{person.firstName}{' '}{person.lastName}{' '}({person.email})</p></>);
};export default App;

此時輸入框是不會正常運行的.
例如，下面這行代碼修改了上一次渲染中的 state：

person.firstName = e.target.value;

想要實現你的需求，最可靠的辦法就是創建一個新的對象并將它傳遞給 setPerson。但是在這里，你還需要 把當前的數據復制到新對象中，因為你只改變了其中一個字段：

setPerson({firstName: e.target.value, // 從 input 中獲取新的 first namelastName: person.lastName,email: person.email
});

你可以使用 … 對象展開 語法，這樣你就不需要單獨復制每個屬性。

setPerson({...person, // 復制上一個 person 中的所有字段firstName: e.target.value // 但是覆蓋 firstName 字段 
});

改變輸入后

請注意 … 展開語法本質是是“淺拷貝”——它只會復制一層。這使得它的執行速度很快，但是也意味著當你想要更新一個嵌套屬性時，你必須得多次使用展開語法。

更新一個嵌套對象

考慮下面這種結構的嵌套對象：

const [person, setPerson] = useState({name: 'Niki de Saint Phalle',artwork: {title: 'Blue Nana',city: 'Hamburg',image: 'https://i.imgur.com/Sd1AgUOm.jpg',}
});

如果你想要更新 person.artwork.city 的值，用 mutation 來實現的方法非常容易理解：

person.artwork.city = 'New Delhi';

但是在 React 中，你需要將 state 視為不可變的！為了修改 city 的值，你首先需要創建一個新的 artwork 對象（其中預先填充了上一個 artwork 對象中的數據），然后創建一個新的 person 對象，并使得其中的 artwork 屬性指向新創建的 artwork 對象：

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！}
});

這雖然看起來有點冗長，但對于很多情況都能有效地解決問題

使用 Immer 編寫簡潔的更新邏輯

如果你的 state 有多層的嵌套，你或許應該考慮 將其扁平化。但是，如果你不想改變 state 的數據結構，你可能更喜歡用一種更便捷的方式來實現嵌套展開的效果。Immer 是一個非常流行的庫，它可以讓你使用簡便但可以直接修改的語法編寫代碼，并會幫你處理好復制的過程。通過使用 Immer，你寫出的代碼看起來就像是你“打破了規則”而直接修改了對象：

updatePerson(draft => {draft.artwork.city = 'Lagos';
});

但是不同于一般的 mutation，它并不會覆蓋之前的 state！

Immer 是如何運行的？

由 Immer 提供的 draft 是一種特殊類型的對象，被稱為 Proxy，它會記錄你用它所進行的操作。這就是你能夠隨心所欲地直接修改對象的原因所在！從原理上說，Immer 會弄清楚 draft 對象的哪些部分被改變了，并會依照你的修改創建出一個全新的對象。

嘗試使用 Immer:

1. 運行 npm install use-immer 添加 Immer 依賴
2. 用 import { useImmer } from ‘use-immer’ 替換掉 import { useState } from ‘react’

下面我們把上面的例子用 Immer 實現一下：

import React from 'react';
import { useImmer } from 'use-immer';const App: React.FC = () => {const [person, updatePerson] = useImmer({name: 'Niki de Saint Phalle',artwork: {title: 'Blue Nana',city: 'Hamburg',}});const handleNameChange=(e:any)=> {updatePerson(draft => {draft.name = e.target.value;});}const handleTitleChange=(e:any)=> {updatePerson(draft => {draft.artwork.title = e.target.value;});}const handleCityChange=(e:any)=>{updatePerson(draft => {draft.artwork.city = e.target.value;});}return (<><label>Name:<inputvalue={person.name}onChange={handleNameChange}/></label><br/><label>Title:<inputvalue={person.artwork.title}onChange={handleTitleChange}/></label><br/><label>City:<inputvalue={person.artwork.city}onChange={handleCityChange}/></label><p><i>{person.artwork.title}</i>{' by '}{person.name}<br/>(located in {person.artwork.city})</p></>);
};export default App;

改變輸入內容:

可以看到，事件處理函數變得更簡潔了。你可以隨意在一個組件中同時使用 useState 和 useImmer。如果你想要寫出更簡潔的更新處理函數，Immer 會是一個不錯的選擇，尤其是當你的 state 中有嵌套，并且復制對象會帶來重復的代碼時。

為什么在 React 中不推薦直接修改 state？

有以下幾個原因：

• 調試：如果你使用 console.log 并且不直接修改 state，你之前日志中的 state 的值就不會被新的 state 變化所影響。這樣你就可以清楚地看到兩次渲染之間 state 的值發生了什么變化
• 優化：React 常見的 優化策略 依賴于如果之前的 props 或者 state 的值和下一次相同就跳過渲染。如果你從未直接修改 state ，那么你就可以很快看到 state 是否發生了變化。如果 prevObj === obj，那么你就可以肯定這個對象內部并沒有發生改變。
• 新功能：我們正在構建的 React 的新功能依賴于 state 被 像快照一樣看待 的理念。如果你直接修改 state 的歷史版本，可能會影響你使用這些新功能。
• 需求變更：有些應用功能在不出現任何修改的情況下會更容易實現，比如實現撤銷/恢復、展示修改歷史，或是允許用戶把表單重置成某個之前的值。這是因為你可以把 state 之前的拷貝保存到內存中，并適時對其進行再次使用。如果一開始就用了直接修改 state 的方式，那么后面要實現這樣的功能就會變得非常困難。
• 更簡單的實現：React 并不依賴于 mutation ，所以你不需要對對象進行任何特殊操作。它不需要像很多“響應式”的解決方案一樣去劫持對象的屬性、總是用代理把對象包裹起來，或者在初始化時做其他工作。這也是 React 允許你把任何對象存放在 state 中——不管對象有多大——而不會造成有任何額外的性能或正確性問題的原因。

摘要

• 將 React 中所有的 state 都視為不可直接修改的。
• 當你在 state 中存放對象時，直接修改對象并不會觸發重渲染，并會改變前一次渲染“快照”中 state 的值。
• 不要直接修改一個對象，而要為它創建一個 新 版本，并通過把 state 設置成這個新版本來觸發重新渲染。
• 你可以使用這樣的 {…obj, something: ‘newValue’} 對象展開語法來創建對象的拷貝。
• 對象的展開語法是淺層的：它的復制深度只有一層。
• 想要更新嵌套對象，你需要從你更新的位置開始自底向上為每一層都創建新的拷貝。
• 想要減少重復的拷貝代碼，可以使用 Immer。