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

Question

我正在构建一个涉及功能组件和钩子的番茄钟计时器组件。 我注意到组件随着 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

您的组件没有安装和卸载，它只是重新渲染。 组件会在其 state 或 props 更新时重新渲染。 由于您将timeLeft放在useEffect调用的依赖项数组中，回调将在timeLeft更新时运行。

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

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

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

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

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