1.組件的state（狀態）

1.選擇合適的state

　　state所代表的一個組件UI呈現的完整狀態集又可以分成兩類數據：用作渲染組件時使用到的數據的來源以及用作組件UI展現形式的判斷依據。

示例：

class Hello extends react.Component{
    constructor(props){
        super(props);
        this.state={
            user:‘React‘,　　　　　　　　　　　　　　　　　　　　　　　　//用作渲染組件使用到的數據的來源
            display:true　　　　　　　　　　　　　　　　　　　　　　　   //用作組件UI展現形式的判斷依據
        }
    }
render(){
    return(
        <div>
            {
                this.state.display ?                              //三元運算符進行判斷
                 <h1>Hello,{this.state.user}</h1>:null
            }
            </div>
        );
    }
}
 

　　說明：state丶props實際上是組件的屬性，只不過它們是React為我們在Component classs中預定好的屬性。除了state丶props以外的其他組件的屬性稱為組件的普通屬性。當我們在組件中需要使用一個變量，並且它與組件的渲染無關時，就應該把這個變量定義成組件的普通屬性，直接掛載到this下，為不是作為組件的state。在render（）函數內部沒有使用到的屬性就是一個普通屬性。

　　註意：props和state的變化都會觸發組件重新進行渲染，但是props對於使用它的組件來說是只讀的，是通過父組件進行傳遞的，要想修改props只能在父組件進行修改，而state是組件內部自己維護的狀態，是可變的。

2.state的修改

　1.不能直接修改state，直接修改不會觸發render重新渲染

//Error
this.state.title=‘React‘;

//正確的修改方式是使用setState();
//correct
this.setState({title:‘React‘});

　2.state的更新是異步的

　　調用setState時，組件的state並不會立即改變，setState只是把要修改的狀態放入一個隊列中，React會優化真正的執行時機，並且出於性能原因，可能會將多次setState的狀態修改合並成一次狀態修改

　3.state的更新是一個合並的過程

//初始狀態
this.state={
    title:‘React‘,
    content:‘content‘
}

//當只需要修改title時，將修改後的title傳給setState即可：
this.setState({title:‘WXF‘}）；

//React會合並新的title到狀態中，同時保留原本的狀態content
{
    title:‘WXF‘,
    content:‘content‘
}

3.state與不可變對象

　　當state中的某個狀態發生變化時，應該重新創建這個對象而不是修改原來的狀態,所以React中的state應該是不可變對象，即不可變化只能重建。

1.狀態類型是不可變狀態（數字丶字符串丶布爾值丶null丶undefined）
    this.setState({
        count:1,
        title:‘React‘,
        success:true
})

2.狀態類型是數組
    this.setState(preState=>({
        Arrays:preState.Arrays.concat([‘Arrays‘]);
}))

3.狀態類型是對象
    this.setState(preState=>({
        owner:{...preState.owner,name:‘Jason‘};
}))

React學習筆記之react進階篇（1）