javascript - 类组件和函数组件定时器每秒加1的区别？

Question

有大佬帮忙看看这两种的区别吗，功能就是定时器每秒加1
函数组件

useEffect(() => {
        let timer = setInterval(() => {
            setCount(a + 1);
        }, 1000);

        return () => {
            clearInterval(timer)
        }
    }, []);

类组件

componentDidMount() {
        this.timer = setInterval(() => {
            const { n } = this.state
            this.setState({ n: n+1 })
        }, 1000);
    }

为啥类组件可以实现功能，函数组件不行呢？写成函数形式就都可以实现

Answer 1

这就是react经典的闭包陷阱了，原因是在函数组件中，a的值一直是初始值，有几种方案可以解决：
1、把a加到useEffect的第二个参数中，即：

useEffect(() => {
        let timer = setInterval(() => {
            setCount(a + 1);
        }, 1000);

        return () => {
            clearInterval(timer)
        }
    }, [a]);

2、利用函数更新：

useEffect(() => {
        let timer = setInterval(() => {
            setCount(p => p + 1);
        }, 1000);

        return () => {
            clearInterval(timer)
        }
    }, []);

3、用useRef保存count的值

闭包陷阱可以搜索引擎搜一下，有很多相关的内容

Answer 2

在 React 中，类组件和函数组件（特别是使用了 Hooks 的函数组件）在功能实现上应该是等价的，都能实现定时器每秒加1的功能。不过，你提到的函数组件代码示例中存在一个常见的问题，这会导致它不能正确工作。

函数组件的问题

在你的函数组件示例中，setCount(a + 1); 这行代码存在一个问题：a 并没有在 useEffect 的闭包中被定义或更新，因此它可能是一个未定义的变量或者是一个初始值（取决于 a 的来源），这将导致每次定时器触发时 setCount 接收到的值都是相同的，除非 a 在组件的其他部分被更新，但这在标准的定时器场景中是不适用的。

正确的做法是使用函数组件的状态 count（假设状态变量名为 count 而不是 a），并通过 setCount 函数更新它。这里是一个修正后的函数组件示例：

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

function FunctionalComponent() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        let timer = setInterval(() => {
            setCount(count => count + 1); // 使用函数形式来确保获取最新的 count 值
        }, 1000);

        return () => {
            clearInterval(timer);
        };
    }, []);

    return <div>{count}</div>;
}

类组件的实现

你的类组件实现是正确的，它通过 setInterval 在 componentDidMount 生命周期方法中设置了一个定时器，并在状态 n 上递增。当组件卸载时，componentWillUnmount（虽然你没有直接展示，但通常会在那里或相应的清理逻辑中调用 clearInterval）将清除定时器，防止内存泄漏。

总结

• 函数组件和类组件在功能上是等价的，都能实现定时器每秒加1的功能。
• 在函数组件中，确保你正确地使用了状态更新函数（如 setCount），并考虑使用函数形式来更新状态，以确保获取到最新的状态值。
• 类组件和函数组件在处理定时器时的主要区别在于它们的生命周期方法和 Hooks 的使用。类组件使用 componentDidMount 和（可能的）componentWillUnmount，而函数组件使用 useEffect。