React學習之State

本文基於React v16.4.1

初學react，有理解不對的地方，歡迎批評指正^_^

1、定義組件的兩種方式

一、函數定義組件

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

二、類定義組件

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

　　這兩種方式均可以定義一個組件，區別在於類定義的組件有State和生命週期。另外，還要注意的是組件名稱要以大寫字母開頭。

2、爲組件添加State

以下，是官網的一個例子：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  render() {
    return (
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
    );
  }
}

　　能夠看到，上面的代碼在類中添加了constructor()方法，並在其中初始化了this.state 。

　　關於constructor() ：constructor()方法是類必須有的，若是沒寫，會自動添加。

　　關於super(props) ：super()方法將父類中的this對象繼承給子類，添加參數props，就可使用this.props 。

3、使用State

　　一、不能直接修改State

初始化this.state只能在constructor()裏面，修改State要用setState()方法。

二、多是異步的

　　調用setState，組件的state並不會當即改變，setState只是把要修改的狀態放入一個隊列中，React會優化真正的執行時機，而且React會出於性能緣由，可能會將屢次setState的狀態修改合併成一次狀態修改，因此不能用當前的state來計算下一個state。例以下面的寫法是錯誤的：

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});　　

　　應改成： 

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

　　三、state的更新是淺合併的

例如，下面的state中有title和comments兩個變量，當調用this.setState({title: 'react'})修改title時，react會把新的title合併進去，不會改變comment。           

constructor(props) {
    super(props);
    this.state = {
      title: 'abc',
      comments: []
    };
  }

【補】

今天遇到了一個問題，react會渲染兩次state，一次是初始設置的state，一次是set後的state。

緣由：由於react渲染機制形成組建掛載以前，也就是componentDidMount生命週期以前自動獲取了原始的state數據，componentDidMount以後state變化已經沒法再次獲取了。

解決辦法：設置一個state，例如hasFetch: false，在set時把hasFetch設爲true，根據hasFetch的值判斷是不是set後的值。

END-------------------------------------