React Doc 简单摘要（二）_doc.react-CSDN博客

本文链接：https://blog.csdn.net/anyicheng2015/article/details/78051976

本文介绍如何使用React创建一个显示实时时间的Clock组件。通过将功能组件转换为类组件，并使用state来存储时间状态，每秒更新一次显示的时间。此外，还介绍了如何利用生命周期方法进行定时任务的启动和清理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

State 的生命周期

这是前面文档中例子：

function tick() {
    const element = (
        <div>
            <h1>Hello, world!</h1>
            <h2>It is {new Date().toLocalTimeString()}.</h2>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('root');
    );
}
setInterval(tick, 1000);

把这个例子包装成一个名为 clock 的 component，这个 component 会显示时间并每隔一秒钟更新一次。

function Clock(props) {
    return (
        <div>
            <h1>Hello, world!</h1>
            <h2>It is {props.date.toLocalTimeString()}.</h2>
        </div>
    );
}

function tick() {
    ReactDOM.render(
        <Clock date={new Date()} />,
        document.getElementById('root')
    );
}

setInterval(tick, 1000);

但包装之后，它的封装性并不好。我们希望这个 component 可以这样使用：

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

为了实现一个可以这样使用的 component，我们需要给 Clock 加上 state。state 和 props 类似，但是它是 component 私有的，并且完全被它控制。另外，component 使用 class 来定义，才能够使用 state。

把一个 Function 转化为 Class

需要创建一个 ES6 class，并且是继承 React.Component 的。同时需要实现一个 render 方法。

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

为这个 Class 添加 State

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

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

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

为 Class 增加生命周期相关的方法

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

    componentDidMount() {
        this.timerID = setInterval(
            () => this.tick(),
            1000
        );
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

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

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

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