将生命周期方法添加到类中
在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。
每当 Clock 组件第一次加载到 DOM 中的时候，我们都想生成定时器，这在 React 中被称为挂载。
同样，每当 Clock 生成的这个 DOM 被移除的时候，我们也会想要清除定时器，这在 React 中被称为卸载。
我们可以在组件类上声明特殊的方法，当组件挂载或卸载时，来运行一些代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
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, zzw learning react tired!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
class ClockZzw 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, zzw learning react tired!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<ClockZzw />,
document.getElementById(‘example‘)
);
</script>
</body>
</html>
实例解析：
componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。
在组件输出到 DOM 后会执行 componentDidMount() 钩子，我们就可以在这个钩子上设置一个定时器。
this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。
代码执行顺序：
- 当
<Clock />被传递给ReactDOM.render()时，React 调用Clock组件的构造函数。 由于Clock需要显示当前时间，所以使用包含当前时间的对象来初始化this.state。 我们稍后会更新此状态。 - React 然后调用
Clock组件的render()方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配Clock的渲染输出。 - 当
Clock的输出插入到 DOM 中时，React 调用componentDidMount()生命周期钩子。 在其中，Clock组件要求浏览器设置一个定时器，每秒钟调用一次tick()。 - 浏览器每秒钟调用
tick()方法。 在其中，Clock组件通过使用包含当前时间的对象调用setState()来调度UI更新。 通过调用setState()，React 知道状态已经改变，并再次调用render()方法来确定屏幕上应当显示什么。 这一次，render()方法中的this.state.date将不同，所以渲染输出将包含更新的时间，并相应地更新 DOM。 - 一旦
Clock组件被从 DOM 中移除，React 会调用componentWillUnmount()这个钩子函数，定时器也就会被清除。
原文地址：https://www.cnblogs.com/zzzzw/p/10411480.html
时间： 2024-11-10 14:46:07