ibeautiful
2022-07-08 18:35:30
我正在學(xué)習(xí) React Hooks,并試圖了解 useState 如何與數(shù)組一起工作。所以,我有這個(gè)代碼: const App = () => { const initialTodos = [ { id: 'a', task: 'Learn React', complete: true, }, { id: 'b', task: 'Learn Firebase', complete: true, }, { id: 'c', task: 'Learn GraphQL', complete: false, },]; const [todos, setTodos] = useState(initialTodos); const [task, setTask] = useState(''); const handleChangeInput = event => { setTask(event.target.value); }; const handleSubmit = event => { if (task) { setTodos(todos.concat({ id: 'd', task, complete: false })); } setTask(''); event.preventDefault(); }; ... };我想問的問題是,為什么我們要使用 concat 將新對(duì)象不變地添加到數(shù)組中,如果 mutate 并使用 push() 會(huì)怎樣?
2 回答

瀟湘沐
TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超6個(gè)贊
如果變異并使用 push() 會(huì)怎樣?
正如反應(yīng)文檔中所說:
永遠(yuǎn)不要直接改變 this.state,因?yàn)橹笳{(diào)用 setState() 可能會(huì)替換你所做的改變。將 this.state 視為不可變的。
原因:
1/ setState 是批量工作的,這意味著不能指望 setState 立即進(jìn)行狀態(tài)更新,它是一種異步操作,因此狀態(tài)更改可能會(huì)在稍后的時(shí)間點(diǎn)發(fā)生,這意味著手動(dòng)改變狀態(tài)可能會(huì)被 setState 覆蓋。
2/ 性能。當(dāng)使用純組件或 shouldComponentUpdate 時(shí),它們將使用 === 運(yùn)算符進(jìn)行淺比較,但如果您改變狀態(tài),對(duì)象引用仍將相同,因此比較會(huì)失敗。
來源:這篇優(yōu)秀的媒體文章。

qq_笑_17
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超7個(gè)贊
setTodos(prevTodos => prevTodos.concat({ id: 'd', task, complete: false }));
不要忘記這todos
是一個(gè)數(shù)組。
添加回答
舉報(bào)
0/150
提交
取消