React 中的 定义组件的 两种方式

React 中创建 Components 的方式有两种：Function and Class

定义一个组件最简单的方法就是写一个 JavaScript 函数

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

因为Welcome函数接受单个携带数据的props对象并且返回一个React元素，所以它就是一个组件。这种通过字面表达式函数创建的组建通常叫做functional

当然你也可以通过ES6 class的语法来定义一个组件

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

要说明的是从 React's 的角度以上两种定义组件的效果是相等的

那什么时候需要用 Class 方式来定义组件呢

在需要使用一些额外的特点的时候比如 state 和 lificycle 的情况下，就应该使用 Class 来定义组件

• 在 Class 中添加 State

官方文档指明：Class 方式创建的组件必须总是调用带有 props 的构造器

class Clock extends React.Component {
  constructor(props) { // 注意这里将props传入了构造器 Class 方式创建的组件必须总是调用带有 props 的构造器
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

• 在 Class 中添加 lifecycle方法

在有很多组件的大型应用中，当在组件被销毁的时候及时地释放资源是非常重要的。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  // 当 Clock 第一次渲染到 DOM 时创建一个定时器，在 React 中叫做 mounting
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  // 当 Clock 被移除的时候需要清理掉这个定时器， 在 React 中叫做 unmounting
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

componentDidMount 和 componentWillUnmount 被叫做 lifecycle hooks