组件创建

创建 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
  };
}