如何处理use效应闭包内的陈旧状态值？

Question

下面的示例是一个计时器组件，它有一个按钮（用于启动计时器）和两个标记，显示经过的秒数和经过的秒数乘以2。

但是，它不工作（CodeSandbox演示）

守则

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

const Timer = () => {
  const [doubleSeconds, setDoubleSeconds] = useState(0);
  const [seconds, setSeconds] = useState(0);
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    let interval = null;
    if (isActive) {
      interval = setInterval(() => {
        console.log("Creating Interval");
        setSeconds((prev) => prev + 1);
        setDoubleSeconds(seconds * 2);
      }, 1000);
    } else {
      clearInterval(interval);
    }
    return () => {
      console.log("Destroying Interval");
      clearInterval(interval);
    };
  }, [isActive]);

  return (
    <div className="app">
      <button onClick={() => setIsActive((prev) => !prev)} type="button">
        {isActive ? "Pause Timer" : "Play Timer"}
      </button>
      <h3>Seconds: {seconds}</h3>
      <h3>Seconds x2: {doubleSeconds}</h3>
    </div>
  );
};

export { Timer as default };

问题

在使用效果调用中，秒值将始终等于上次呈现使用效果块时（当isActive上次更改时）的值。这将导致setDouble秒（秒*2）语句失败。React Hooks ESLint插件给我一个关于这个问题的警告：

React Hook useEffect缺少依赖项：“秒”。包括它或删除依赖项数组。如果“setDoubleSeconds”需要当前值“seconds”，您还可以使用useReducer替换多个useState变量。（反应钩/详尽的deps）eslint

正确地说，向依赖数组添加“秒”（并将setDouble秒（秒*2）更改为setDouble秒（（秒1) * )将呈现正确的结果。然而，这有一个令人讨厌的副作用，即导致间隔在每个渲染上被创建和破坏（console.log（“破坏间隔”）在每个渲染上触发）。

因此，现在我在看ESLint警告中的另一条建议：“如果'setDoubleSeconds'需要当前的'seconds'值，您还可以用useReducer替换多个useStatehtml" target="_blank">变量。”。

我不理解这项建议。如果我创建一个减速器，并像这样使用它：

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

const reducer = (state, action) => {
    switch (action.type) {
        case "SET": {
            return action.seconds;
        }
        default: {
            return state;
        }
    }
};

const Timer = () => {
    const [doubleSeconds, dispatch] = useReducer(reducer, 0);
    const [seconds, setSeconds] = useState(0);
    const [isActive, setIsActive] = useState(false);

    useEffect(() => {
        let interval = null;
        if (isActive) {
            interval = setInterval(() => {
                console.log("Creating Interval");
                setSeconds((prev) => prev + 1);
                dispatch({ type: "SET", seconds });
            }, 1000);
        } else {
            clearInterval(interval);
        }
        return () => {
            console.log("Destroying Interval");
            clearInterval(interval);
        };
    }, [isActive]);

    return (
        <div className="app">
            <button onClick={() => setIsActive((prev) => !prev)} type="button">
                {isActive ? "Pause Timer" : "Play Timer"}
            </button>
            <h3>Seconds: {seconds}</h3>
            <h3>Seconds x2: {doubleSeconds}</h3>
        </div>
    );
};

export { Timer as default };

陈旧值的问题仍然存在（CodeSandbox演示（使用减缩器））。

问题

那么这个场景的推荐是什么呢？我是否接受性能打击，简单地向依赖数组添加“秒”？我是否创建了另一个依赖于"秒"并在其中调用"setDouble秒（）"的use效应块？是否将“秒”和“双秒”合并到单个状态对象中？我使用裁判吗？

此外，您可能会想“为什么不简单地更改

谢谢




Answer 1

• 我是否需要性能命中并简单地向依赖数组添加“秒”？
• 我是否创建了另一个依赖于秒并在那里调用setDouble秒（）的use效应块？
• 是否将秒和双秒合并到单个状态对象中？
• 我使用参考文献吗？

尽管我个人更愿意选择第二种方法，但它们都能正常工作：

useEffect(() => {
    setDoubleSeconds(seconds * 2);
}, [seconds]);

然而：

在我的实际应用程序中，doubleSeconds被传递给子组件，我不希望子组件知道如何将seconds映射到doubleSeconds，因为这会降低子组件的可重用性

这是值得怀疑的。子组件可以实现如下：

const Child = ({second}) => (
  <p>Seconds: {second}s</p>
);

和父组件应如下所示：

const [seconds, setSeconds] = useState(0);
useEffect(() => {
  // change seconds
}, []);

return (
  <React.Fragment>
    <Child seconds={second} />
    <Child seconds={second * 2} />
  </React.Fragment>
);

这将是一种更加清晰和简洁的方式。

Answer 2

匿名用户

您可以通过几种方式访问效果回调中的值，而无需将其添加为dep。

1. 设置状态。您可以通过状态变量的setter点击状态变量的最新值

setSeconds(seconds => (setDoubleSeconds(seconds * 2), seconds));

const secondsRef = useRef(0);
const [seconds, setSeconds] = useReducer((_state, action) => (secondsRef.current = action), 0);

然后可以使用secondsRef。当前访问代码块中的秒，而不触发deps更改。

setDoubleSeconds(secondsRef.current * 2);

在我看来，你永远不应该从deps数组中省略依赖项。如果你需要deps不改变，使用像上面这样的黑客来确保你的值是最新的。

首先要考虑的是，是否有一些更优雅的方式编写代码，而不是将值放入回调中。在您的示例中，doubleSeconds可以表示为seconds的导数。

const [seconds, setSeconds] = useState(0);
const doubleSeconds = seconds * 2;

有时候应用程序并不那么简单，所以你可能需要使用上面描述的黑客。