react props && state

1.Props 的隻讀性 不能修改自身的 props

function sum(a, b) {
  return a + b;
}
           

這樣的函數被稱為“純函數”，因為該函數不會嘗試更改入參，且多次調用下相同的入參始終傳回相同的結果。

相反，下面這個函數則不是純函數，因為它更改了自己的入參：

function withdraw(account, amount) {
  account.total -= amount;
}
           

React 非常靈活，但它也有一個嚴格的規則：

所有 React 元件都必須像純函數一樣保護它們的 props 不被更改。

需特别注意，

this.props.children

是一個特殊的 prop，通常由 JSX 表達式中的子元件組成，而非元件本身定義。

2.元件中的 state 包含了随時可能發生變化的資料。state 由使用者自定義，它是一個普通 JavaScript 對象。

State 與 props 類似，但是 state 是私有的，并且完全受控于目前元件。

1).不要直接修改 State,而是應該使用

setState()

this.setState({comment: 'Hello'});
           

2).構造函數是唯一可以給

this.state

指派的地方

constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
           

3).State 的更新可能是異步的 ,是以你不要依賴他們的值來更新下一個狀态。并且出于性能考慮，React 可能會把多個

setState()

調用合并成一個調用。

解決異步問題可以

setState傳入對象

this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});