钩子的陷阱：了解闭包的作用范围，避免状态更新问题

2023-12-18 22:16:38

在React中，钩子是一种强大的功能，允许我们在函数组件中使用状态和生命周期方法。然而，在使用钩子时，了解闭包的作用范围非常重要。闭包可能导致状态更新问题，例如在useEffect闭包中使用定时器时，count变量可能无法获取最新值。

让我们来看一个具体的例子：

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

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count); //始终打印1
    }, 1000);

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

export default App;

在这个例子中，我们使用了一个useEffect钩子来创建了一个定时器，每隔1秒打印count变量的值。我们期望每次点击按钮时，count变量的值都会增加，并在控制台打印出来。然而，我们会发现，控制台始终打印1，即使我们多次点击按钮。

这是因为useEffect闭包中的count变量是一个局部变量，它只在useEffect函数内部可见。当useEffect函数第一次运行时，count变量的值为0，因此定时器每次运行时都会打印0。即使我们多次点击按钮，count变量的值在useEffect闭包外部发生了变化，但useEffect闭包内部的count变量却无法感知到这些变化。

为了解决这个问题，我们需要将count变量提升到useEffect闭包之外，使其成为一个组件级别的变量。我们可以通过将count变量声明在App函数组件的顶部，并使用useState钩子来初始化其值。

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

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count); //现在会打印最新的count值
    }, 1000);

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

export default App;