React - 生命周期

最新推荐文章于 2025-04-24 17:19:08 发布

原创最新推荐文章于 2025-04-24 17:19:08 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

4 篇文章

订阅专栏

本文深入解析React组件的三个生命周期状态：Mounting、Updating和Unmounting，重点介绍componentDidMount和componentWillUnmount方法的作用，以及如何在Clock组件中利用这两个方法实现时间实时更新。

React 组件的生命周期

组件的生命周期可分为3个状态：

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

生命周期的方法有：

componentWillMount：在渲染前调用，再客户单也在服务端。
componentDidMount：在第一次渲染后调用，只在客户端。之后组件已经生成了对应的 DOM 结构，可以通过【this.getDOMNode()】来进行访问。如果你想和其他Javascript框架一起使用，可以在这个方法中调用 setTimeout,setInterval 或者 AJAX 请求等操作（防止异步操作阻塞UI）

在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。
比如，每当 Clock 组件第一次加载到 DOM 中，我们都想生成一个定时器，这在 React 中被称为【挂载】。
同样，每当 Clock 生成的 DOM 被移除时，我们也要清除定时器，这在 React 中称为【卸载】。

实现一个时间实时变化的实例：

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>现在是：{this.state.date.toLocaleTimeString()}</h2>
            </div>
        )
    }
}