使用useState，useEffect显示电流时间

Question

我正在学习钩子，所以我尝试编写显示当前时间的代码。

我在每一行代码中都有注释，这是我写它的原因。所以：

1. 我明白了吗？
2. 有什么不好的做法吗？
3. 还有什么需要改进的？

import * as React from 'react'

function App() {
  // Define a state for keeping track of time
  const [time, setTime] = React.useState("");

  // Logic, computation to update time (which is side-effect) should put inside useEffect
  React.useEffect(() => {
    // Running side-effect when component mounted (componentDidMount)
    const myInterval = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);

    // Clear side-effect when component unmount (componentWillUnmount)
    return () => {
      clearInterval(myInterval);
    }
  })

  return (
    <div className="App">
      <h1>{time}</h1>
    </div>
  );
}

export default App;

Answer 1

默认情况下，useEffect将在每个呈现上运行。因为您在useEffect中设置状态，所以状态将在每个呈现上呈现，从而导致不必要的呈现循环。

要解决这个问题，请将一个空依赖数组传递给useEffect：

React.useEffect(() => {
  // ...
}, [])