Question

我是React的新手，我试图按照这个滴答时钟示例进行操作，但要有所不同。我希望在ReactDOM中渲染index.js。这是我的代码：

Timer.js：

import React from 'react';

const Timer = () => {
    const tick = () => {
        return new Date().toLocaleTimeString().toString();
    };

    const element = (
        <div>
            <h1>Hello World!</h1>
            <h2>It is {tick()} !</h2>
        </div>
    );

    return (
        element
    );
};

export default Timer;

App.js：

/*jshint esversion: 8 */
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Timer from './Timer'

function App() {
  return (
    <div className="App">
      <Timer />
    </div>
  );
}

export default App;

index.js：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import App from './App';

setInterval(ReactDOM.render(<App />, document.getElementById("root")), 1000);

serviceWorker.unregister();

但是它仅在屏幕上显示当前时间，而不打勾。为什么代码setInterval(ReactDOM.render(<App />, document.getElementById("root")), 1000);在index.js上不起作用？

Answer 1

避免直接调用render函数是一个好习惯，您可以将result = np.vstack((A[0],B[0])).T设置为Component并使其随状态变化而更新，这就是反应如何对其生命周期进行处理。例如：

Timer

注意，我使用了两个React循环函数class Timer extends React.Component { constructor(props) { super(props); this.state = { time: new Date().toLocaleTimeString().toString() }; } tick() { this.setState({ time: new Date().toLocaleTimeString().toString() }); } componentDidMount() { this.intervalID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.intervalID); } render() { return ( <div> <h1>Hello World!</h1> <h2>It is {this.state.time} !</h2> </div> ); } } export default Timer;和componentDidMount，以便在完成装模后使组件再次更新，并在React卸载组件后另一个用于清除interval变量。

Answer 2

您可以使用React.useEffect将数组作为第二个参数传递，这等效于componentDidMount。

然后，您想使用setInterval每秒设置状态。

从useEffect返回一个函数以清除卸载组件的时间间隔。

请参阅工作代码和框here。

您的代码应如下所示：

const function Timer() {
  const [time, setTime] = React.useState(null);
  React.useEffect(() => {
    const tick = () => {
      return new Date().toLocaleTimeString().toString();
    };
    const intervalId = setInterval(() => {
      setTime(tick());
      return () => clearInterval(intervalId);
    }, 1000);
  }, []);

  return <h2>It is {time} !</h2>;
}

Answer 3

将日期字段设置为状态对象，并在刻度函数中使用setInterval使用setState将新值设置为state。使用state.date值显示时间。每当使用setState函数更改状态时，React都会渲染新的dom。

react文档中提供了一个计时器的工作示例，对其进行读取将为您带来很多帮助。 https://reactjs.org/docs/state-and-lifecycle.html

如何每秒渲染一次ReactDOM？

3 个答案: