元件建立

建立 React 元件時，會呼叫許多函式：

• 如果你使用的是 React.createClass（ES5），則會呼叫 5 個使用者定義的函式
• 如果你使用的是 class Component extends React.Component（ES6），則會呼叫 3 個使用者定義的函式

getDefaultProps()（僅限 ES5）

這是第一個呼叫的方法。

如果在例項化元件時未定義此函式返回的 Prop 值，則它們將用作預設值。

在以下示例中，如果沒有另外指定，this.props.name 將預設為 Bob：

getDefaultProps() {
  return {
    initialCount: 0,
    name: 'Bob'
  };
}

getInitialState()（僅限 ES5）

這是第二種方法。

getInitialState() 的返回值定義了 React 元件的初始狀態。React 框架將呼叫此函式並將返回值賦給 this.state。

在以下示例中，this.state.count 將使用 this.props.initialCount 的值初始化：

getInitialState() {
  return {
    count : this.props.initialCount
  };
}

componentWillMount()（ES5 和 ES6）

這是第三種方法。

此功能可用於在將元件新增到 DOM 之前對元件進行最終更改。

componentWillMount() {
  ...
}

render()（ES5 和 ES6）

這是第四種方法。

render() 函式應該是元件狀態和 props 的純函式。它返回一個元素，該元素在呈現過程中表示元件，並且應該是本機 DOM 元件（例如 <p />）或複合元件的表示。如果不呈現任何內容，則可以返回 null 或 undefined。

在對元件的道具或狀態進行任何更改後，將呼叫此函式。

render() {
  return (
    <div>
      Hello, {this.props.name}!
    </div>
  );
}

componentDidMount()（ES5 和 ES6）

這是第五種方法。

該元件已經安裝，你現在可以訪問元件的 DOM 節點，例如通過 refs。

此方法應用於：

• 準備計時器
• 獲取資料
• 新增事件偵聽器
• 操作 DOM 元素

componentDidMount() {
  ...
}

ES6 語法

如果使用 ES6 類語法定義元件，則不能使用 getDefaultProps() 和 getInitialState() 函式。

相反，我們將 defaultProps 宣告為類的靜態屬性，並在類的建構函式中宣告狀態形狀和初始狀態。在呼叫任何其他 React 生命週期函式之前，這些都是在構造時在類的例項上設定的。

以下示例演示了此替代方法：

class MyReactClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      count: this.props.initialCount
    };
  }
  
  upCount() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        Hello, {this.props.name}!<br />
        You clicked the button {this.state.count} times.<br />
        <button onClick={this.upCount}>Click here!</button>
      </div>
    );
  }
}

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

取代 getDefaultProps()

通過設定類的 defaultProps 屬性來指定元件道具的預設值：

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

取代 getInitialState()

設定元件初始狀態的慣用方法是在建構函式中設定 this.state：

constructor(props){
  super(props);

  this.state = {
    count: this.props.initialCount
  };
}