javascript - 如何每秒渲染 ReactDOM？

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

避免直接调用渲染函数是一个很好的做法，您可以将您的 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;

注意，我使用了两个React循环函数componentDidMount和componentWillUnmount，以便组件在完成mouting后再次更新，另一个用于清除区间变量一旦 react 卸载你的组件。