ReactJS：为什么来自一个州的不同价值观？

Question

所以我开始使用非常基本的组件来学习 Reactjs。我正在从不同的函数注销相同的状态，但我看到的是不同的值。

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

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

  useEffect(()=>{
      setInterval(() => {
        console.log("count in interval is:", count);
      }, 1000);
  },[props]);

  function btnClick() {
    const newCount = count + 1;
    setCount(newCount);
    console.log("count changed to: ", newCount);
  }
  return (
    <div>
      count is {count}
      <br></br>
      <button onClick={btnClick}>+</button>
    </div>
  );
};

export default Test;

点击等待后输出，日志为：

Test.js:8 count in interval is: 0
Test.js:15 count changed to:  1
Test.js:15 count changed to:  2
Test.js:15 count changed to:  3
Test.js:15 count changed to:  4
(8 rows) Test.js:8 count in interval is: 0

我希望 "count" 在两个函数中相同。谁能解释一下？

非常感谢。

Answer 1

Test 只有一个 setInterval 函数，其中 count 总是 0。因为它仅在初始渲染期间创建。

从未创建另一个setInterval，因为效果从未被触发，[props]作为依赖.

要在每次重新渲染时更改 setInterval 的计数：

删除依赖项
Return effect 中的清理函数

useEffect(
  () => {
    const t = setInterval(() => {
      console.log("count in interval is:", count);
    }, 1000);

    return () => clearInterval(t); // cleanup on every re-render
  }
  // no dependency: effect runs on every re-render
);

但是上面的代码会有警告：

"missing count dependency"

所以只需添加 count 作为对 的依赖，仅运行影响 当 count 改变时。

useEffect(
  () => {
    const t = setInterval(() => {
      console.log("count in interval is:", count);
    }, 1000);

    return () => clearInterval(t); // cleanup "old" setInterval
  }
  , [count] // ony run effect every time count changes
);

Answer 2

count 的值没有改变，这是预期的行为，尽管不是很明显。

看，你甚至将 count 声明为 const count，它是不可变的。相反，在第一次渲染期间，count 获得了 0 的赋值。 count 的值永远不会改变，而是每次更改状态时都会调用组件 Test，函数 useState 会为常量 count 分配不同的值，每次都是新常量。

因此在第一次渲染期间，const count 的值被 closure 在您的函数中捕获，该函数被 setInterval 调用并且该值永远保持 0。

ReactJS：为什么来自一个州的不同价值观？

ReactJS: Why different values from one state?

javascript

reactjs

react-hooks