Question

它必须是一个函数，不能是一个类（类可以通过setInterval在componentDidMount中做到）

我设置了这样的内容

function DisplayTime() {
  let time = new Date().getTime();
  setInterval(() => {
    time = new Date().getTime();
  }, 1000);
  return time;
}
ReactDOM.render(<DisplayTime />, document.getElementById('root'))

问题在于函数只能运行一次，因此时间将无法获取更新。诸如setInterval(() => {ReactDOM.render(...), ...})之类的效率低下，这是不可接受的。

有什么主意吗？

===
useState是高级解决方案，是否有不使用React最新版本的解决方案？

Answer 1

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [time, setTime] = useState(new Date().getTime());
  setInterval(() => {
    setTime(new Date().getTime());
  }, 1000);
  return (
    <div className="App">
      <h1>{time}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在反应功能中每秒显示更新时间

1 个答案: