React中pros和state的差別

props是一個父元件傳遞給子元件的資料流，這個資料流可以一直傳遞到子孫元件。

state代表的是一個元件内部自身的狀态（可以是父元件、子孫元件）。

state 和 props 主要的差別在于 props 是不可變的，而 state 可以根據與使用者互動來改變。其實這種說法有問題。可以參考一篇文章《React中state與props介紹與比較》

元件中的props本質作用是一種父級向子級傳遞資料的方式。props是可以改變的，隻是沒有提供API可以在子元件裡直接修改，我們可以在父元件裡把要給子元件的屬性值修改。

改變一個元件自身狀态，從語義上來說，就是這個元件内部已經發生變化，有可能需要對此元件以及元件所包含的子孫元件進行重渲染。

而props是父元件傳遞的參數，可以被用于顯示内容，或者用于此元件自身狀态的設定（部分props可以用來設定元件的state），不僅僅是元件内部state改變才會導緻重渲染，父元件傳遞的props發生變化，也會執行。

下面詳說一下有關state的有關内容：

什麼是state?

　　　　state是React中元件的一個對象.React把使用者界面當做是狀态機,想象它有不同的狀态然後渲染這些狀态,可以輕松讓使用者界面與資料保持一緻.

　　　　 React中,更新元件的state,會導緻重新渲染使用者界面(不要操作DOM).簡單來說,就是使用者界面會随着state變化而變化.

　　2.state工作原理

　　　　常用的通知React資料變化的方法是調用setState(data,callback).這個方法會合并data到this.state,并重新渲染元件.渲染完成後,調用可選的

　　　　callback回調.大部分情況不需要提供callback,因為React會負責吧界面更新到最新狀态.

　　3.那些元件應該有state?

　　　　大部分元件的工作應該是從props裡取資料并渲染出來.但是,有時需要對使用者輸入,伺服器請求或者時間變化等作出響應,這時才需要state.

　　　　元件應該盡可能的無狀态化,這樣能隔離state,把它放到最合理的地方(Redux做的就是這個事情?),也能減少備援并易于解釋程式運作過程.

　　　　常用的模式就是建立多個隻負責渲染資料的無狀态(stateless)元件,在他們的上層建立一個有狀态(stateful)元件并把它的狀态通過props傳給子級.有狀态的元件封裝了所有的使用者互動邏輯,而這些無狀态元件隻負責聲明式地渲染資料.

　　4.哪些應該作為state?

　　　　state應該包括那些可能被元件的事件處理器改變并觸發使用者界面更新的資料.這中資料一般很小且能被JSON序列化.當建立一個狀态化的元件的時候,應該保持資料的精簡,然後存入this.state.在render()中在根據state來計算需要的其他資料.因為如果在state裡添加備援資料或計算所得資料,經常需要手動保持資料同步.

　　5.那些不應該作為state?

　　　　this.state應該僅包括能表示使用者界面狀态所需要的最少資料.是以,不應該包括:

　　　　　　1.計算所得資料:

　　　　　　2.React元件:在render()裡使用props和state來建立它.

　　　　　　3.基于props的重複資料:盡可能保持用props來做作為唯一的資料來源.把props儲存到state中的有效的場景是需要知道它以前的值得時候,因為未來的props可能會變化.