2021-05-11

将函数组件转换成 class 组件

通过以下五步将 Clock 的函数组件转成 class 组件：

1. 建一个同名的 ES6 class，并且继承于 React.Component。
2. 添加一个空的 render() 方法。将函数体移动到 render() 方法之中。
3. 在 render() 方法中使用 this.props 替换 props。
4. 在 render() 方法中使用 this.props 替换 props。
5. 删除剩余的空函数声明。

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}