何時使用函數式setState

React 的setState 函數提供了兩種更新組件狀態的語法：直接賦值語法和函數式更新語法。

直接賦值語法：

this.setState({pictures: pics})

此語法簡單易用。它直接用提供的新值取代現有的狀態值。但是，如果在多個位置使用狀態值或在組件的生命週期方法中操作狀態值，這可能會導致潛在問題。

功能更新程式語法：

this.setState(prevState => ({
  pictures: prevState.pictures.concat(pics)
}))

函數式更新器語法是首選，因為它確保狀態更新是一致且可預測的。它將先前的狀態作為參數並傳回更新後的狀態。這可以防止意外的狀態突變並確保狀態始終是最新的。

合併和批次

React 在內部將多個 setState 呼叫合併為單一更新。當多個呼叫嘗試更新相同狀態鍵時，直接賦值語法很容易出現合併問題。例如：

this.setState({pictures: this.state.pictures.concat(pics1)})
this.setState({pictures: this.state.pictures.concat(pics2)})

功能更新程式語法會自動正確合併更新，產生反映 pics1 和 pics2 的最終狀態。

效能與效率

React會因為效能原因批次呼叫setState。透過將多個更新合併為一個，React 可以優化元件更新並減少不必要的重新渲染。功能更新器語法透過允許更新依賴先前的狀態來支援批次。

結論

雖然這兩種語法都可以用於更新狀態，但功能更新器語法是由於其一致性、安全性、合併功能以及對性能優化的支持，通常被推薦。透過使用功能更新器語法，開發人員可以避免狀態突變問題並確保其元件正確有效地更新。