时间戳

首页 > 解决方案 > React 组件应该多久挂载和卸载一次？

javascript - React 组件应该多久挂载和卸载一次？

问题描述

我正在构建一个涉及功能组件和挂钩的番茄钟计时器组件。我注意到组件在 setInterval() 的每个滴答声中都会安装和卸载。这是预期的行为吗？组件经常挂载和卸载似乎很奇怪，所以我想知道我是否应该以不同的方式做事。这是我的代码：

import React, { useState, useEffect } from 'react';

function Pomodoro({ seconds }) {
    const [timeLeft, setTimeLeft] = useState(seconds);
    
    useEffect(() => {
        console.log('mount')
        const interval = setInterval(() => {
            setTimeLeft(timeLeft - 1);
        }, 1000);

        return () => {
            console.log('unmount')
            clearInterval(interval);
        }
    }, [timeLeft])

    return <code>{timeLeft}</code>
}

export default Pomodoro;

标签： javascriptreactjs

解决方案

您的组件没有安装和卸载，它只是重新渲染。组件在其状态或道具更新时重新渲染。而且由于您放入timeLeft了useEffect调用的依赖数组，因此回调将在任何timeLeft更新时运行。

请注意，这useEffect就像基于类的componentDidMount和的组合componentDidUpdate，其中一个空的依赖数组导致与 相同的行为componentDidMount，否则行为类似于componentDidUpdate。

清理函数（useEffect回调的返回值）在组件卸载时和useEffect回调的下一次执行之前（如果你有一个非空的依赖数组）运行。这类似于基于类componentWillUnmount和componentWillUpdate生命周期的方法。有关详细信息，请参阅带有清理的效果。

因此，简而言之，这是预期的行为，您的组件设计似乎很好。

值得回顾 React 的组件生命周期：

反应组件生命周期

来自：https ://projects.wojtekmaj.pl/react-lifecycle-methods-diagram

推荐阅读