My App

Effect Lint 规则

Effect Lint 规则

这是视频中的沙盒 + 内存可视化:

import React from 'react';

function App() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log(count);
  }, []);

  return (
    <>
      <p>The count is: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </>
  );
}

export default App;

screenshot-20250228-164521

解决方法?

在少数情况下,我们需要在Effect中访问状态变量的最新“版本”,但我们希望该Effect在变量发生变化时不重新运行。

我们将在本模块稍后讨论如何应对这种情况,当我们谈论陈旧值时。