React问题：刷新机制原理是什么？React的数据传输流程是什么？求指条相关解决的“明路”，3Q~

Question

学习React的过程中发现：
编写这样一段代码的时候：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';

class Clock extends React.Component {
  render() {
    return (
      <p>Now Time: { this.props.date.toLocaleTimeString() } </p>
    );
  }
}

Clock.defaultProps = {
  date: new Date(0),
}

class Clock1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: this.props.date};
  }

  render() {
    return (
      <div>
        <p>Now Time: { this.state.date.toLocaleTimeString() } </p>
        <Clock date={new Date()}/>
      </div>
    );
  }
}

function tick() {
  ReactDOM.render(
    <React.StrictMode>
      <Clock1 date={new Date()}/>
    </React.StrictMode>,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

reportWebVitals();

页面只刷新了Clock的内容，另外一条时间并没有预期内的刷新。

Answer 1

使用js的setInterval方法实现刷新。