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