Question

我正在构建包含功能组件和挂钩的Pomodoro计时器组件。我注意到该组件会随着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;

Answer 1

您的组件没有安装和卸载，而只是重新渲染。每当其状态或道具更新时，组件就会重新渲染。而且由于您将timeLeft放在了useEffect调用的依赖项数组中，所以回调将在timeLeft更新时随时运行。

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

清除功能（从useEffect回调返回的值）在组件卸载时和在useEffect回调的下一次执行之前（如果您有一个非空的依赖数组）都运行。这类似于基于类的componentWillUnmount和componentWillUpdate生命周期方法。有关更多信息，请参见Effects with Cleanup。

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

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

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

React组件应该多久安装和卸载一次？

1 个答案: