React学习（五）：组件的生命周期-电子钟表实例

阿里云服务器0元试用，首购低至0.9元/月起
【开发云】年年都是折扣价，不用四处薅羊毛
前置内容阅读 React学习（四）：通过 React State 编写点赞按钮
结果预览：

1. 环境准备

// 启动工程
npm start

// index.js 中引入bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'

2. 编写组件

新建文件 src\componets\DigitalClock.js

import { render } from "@testing-library/react";
import React from "react";

class DigitalClock extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            date: new Date()
        }
    }
    componentDidMount() {
        this.timer = setInterval(() => {
            this.setState({
                date: new Date()
            })
        },1000)
    }
    componentWillUnmount() {
        clearInterval(this.timer)
    }
    render() {
        return (
            <div className="digital-clock-component jumbotron">
                <h1>{this.state.date.toLocaleTimeString()}</h1>
            </div>
        )
    }
}
export default DigitalClock

3. App.js 中引入该组件

import logo from './logo.svg';
import './App.css';
// 引入时钟组件
import DigitalClock from './componets/DigitalClock';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <DigitalClock />
    </div>
  );
}

export default App;

4. 结果预览