React——props&stateprops&state

props&state

關于props

props主要用于元件之間傳遞參數，React中資料是自上而下（由父元件向子元件）單向流動的。外界/父元件的屬性值對于子元件來說是隻讀的，無法直接修改。使用props主要用于元件之間資料的傳遞。

注意事項

1. props除了可以傳遞字元串、數字，還可以傳遞數組、對象以及回調函數。
2. 如果想要對props進行修改，隻能通過外部元件傳入新的props來重新渲染子元件，否則子元件的props以及展現形式不會發生改變。

關于state

state主要用于元件的更新控制，通過修改state的值可以實作更新元件或者使用者界面的重新渲染，可以根據與使用者的互動來改變。使用state主要用于元件内部資料的更新和修改。

注意事項

在React中可以通過this.setState()來修改state的值，但是需要注意以下幾點：

1. 不能直接對state進行修改，必須通過this.setState()來對state的值進行修改，才能成功出發render，實作界面的重新渲染。

2. state的更新是異步的，props的更新也是異步的。

   調用this.setState()時，元件state并不會立即改變，而是把需要修改的狀态放入事件隊列中，由于React的優化機制，導緻事件隊列中的待更新狀态并不一定能立即得到更新，React很有可能将多次state更新合并成一次。是以，不要依靠目前的state來計算下一個state。例如·：

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)
           

以上執行兩次相同的操作，React會将兩次state更新合并成一次進行修改，後面的操作覆寫了前面的操作，是以最後的結果中數值隻增加1。對于這種情況，可以通過使用另一個函數作為參數的setState，這個函數有兩個參數，一個是本次元件修改前的狀态，一個參數時目前最新的props。如下：

this.setState((preState,props)=>counter:preState.quantity+1)
           

1. state的更新可以是局部的更新。

   當調用this.setState()進行元件狀态改的修改時，隻需要傳入發生改變的state數值就可以，不需要傳入所有的數值。React在依據state進行元件狀态改的更新時，會将修改的state值對應的元件部分進行變動并合并到元件中，而元件其它地方保持不變。

2. 沒有state的元件叫做無狀态元件，盡量多使用props少使用state，即盡量多寫一些無狀态元件。

參考文獻

React中props和state差別

在React中正确修改state

關于props與state的基礎知識與差別

元件&props

State&生命周期