Сделать компонент Clock действительно многоразовым и инкапсулированным? в React JS?

Question

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

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

setInterval(tick, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Вопрос: люди, пожалуйста, объясните приведенный ниже код, здесь, как мы переходим ко второй функции, как {без какой-либо функции обратного вызова}?

Answer 1

Вы можете добиться этого, переместив setInterval в свой компонент и используя его, чтобы обновить его состояние, чтобы сделать его повторный рендеринг.

Кроме того, reactDOM.render следует вызывать только один раз.

Рабочий пример:

class Clock extends React.Component{

    state = { date: new Date() }

    componentDidMount(){
        setInterval(() => { this.setState({ date: new Date() })}, 1000);
    }

    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

ReactDOM.render(
    <Clock />,
    document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>