React中的state

組件局部狀態 state

是組件內部維護的一組用於反映組件UI變化的狀態集合。

class Welcome extends React.Component{
    constructor(props){
        super(props);
        this.state={}
    }
}

state特點

1. 不可直接修改state
   需要調用this.setState()方法進行修改
2. state的更新是異步的
3. state的更新是一個淺合併的過程
   只需要傳入需要修改的數據即可完成修改，state中未被修改的數據不會改變

---

• state 和 props 主要的區別在於 props 是不可變的，而 state 可以根據與用戶交互來改變。容器組件需要定義 state 來更新和修改數據。 而子組件只能通過 props 來傳遞數據。

---

使用this.setState()修改時狀態類型

React官方建議把State當作是不可變對象，一方面是如果直接修改this.state，組件並不會重新render；另一方面State中包含的所有狀態都應該是不可變對象。當State中的某個狀態發生變化，我們應該重新創建這個狀態對象，而不是直接修改原來的狀態。那麼，當狀態發生變化時，如何創建新的狀態呢？根據狀態的類型，可以分成三種情況：

1. 狀態的類型是不可變類型(數組，字符串，布爾值，null，undefined)
   直接賦新值
2. 狀態類型是數組
   通過concat方法或者ES6數組擴展方法

//ES6數組解構賦值
arr: [...this.state.arr, 3]
//concat方法
arr: this.state.arr.concat([3])

注意不要使用push、pop、shift、unshift、splice等方法修改數組類型的狀態，因爲這些方法都是在原數組的基礎上修改，而concat、slice、filter會返回一個新的數組。

3. 狀態類型是普通對象
   通過Object.assign()方法或者對象擴展語法

obj: Object.assign({}, this.state.obj, {name:'tom'})
obj:{...this.state.obj,name:'tom'}

---