为什么这个 useEffect （第一个）不能在依赖项更改时运行？

Question

export default function App() {

  // as the useState runs before useEffect, 
  // it means count is avaliable to use in the useEffect 
  // but why it is not running?
  useEffect(() => {
    console.log("I only run on first render.", count);
  },[count]);

  useEffect(() => {
    console.log("I runs on every render/re-render", count);
  });

  // if i use const in place of var, it throws error of lexical scope
  // but as useState run before the effect the count is already in scope, right?
  var [count, setCount] = useState(0);

  useEffect(() => {
    console.log("run on first render and whenever the count changes", count);
  }, [count]);


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

我认为这是第一次渲染的执行顺序：

运行惰性初始化器（或者我们可以说运行 useState）->雷德纳-> dom更新->布瑟油漆->运行效果

对于重新渲染：除了惰性初始化器和运行新效果之前的效果清理之外的所有内容。

Answer 1

Eslint 像这样发出警告

var count：数字“count”在定义之前已被使用。
（定义前不使用）eslint

您需要将 useState for count 声明移动到将其用作依赖项的 useEffect 之前。

  var [count, setCount] = useState(0);

  useEffect(() => {
    console.log("I only run on first render.", count);
  }, [count]);

Answer 2

您的第一个效果是在定义之前使用 count，因此它始终是 undefined。