Блог

Когда я прочитал документацию react, они сказали: «Единственный способ обновить пользовательский интерфейс-создать новый элемент и передать его в ReactDOM.render ()«. из-за того, что я создал код, подобный приведенному ниже.

 function Clock() {
 // console.log('clock called'); 

  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
                  )

  return (
    element
  );
}


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

//every second call Clock
setInterval(Clock, 1000);
 

Каждую секунду вызывается компонент Clock, поэтому каждую секунду он создает новый элемент. когда компонент синхронизации переходит к методу визуализации. но пользовательский интерфейс не обновляется. почему? Я не вызывал метод рендеринга каждую секунду. потому что в документации не сказано: «вызывайте метод визуализации каждую секунду». Я думал, что при создании нового элемента метод визуализации будет вызван автоматически. моя мысль в порядке или нет?

В документации приведен код, подобный приведенному ниже

 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);
 

Здесь они также вызывают метод рендеринга каждую секунду. но в документации они не указывают, чтобы вызывать метод визуализации для каждого обновления.

Чтобы добиться динамического обновления для ваших компонентов, вам необходимо использовать крючки состояний, такие как useEffect() и useState .

 //import { useState } from 'react';
const { useState, useEffect } = React;

function Clock() {

const time = new Date();
// a hook to maintain the state
 const [ state, setState] = useState();
// a listener to handle changes in the parameters of the array, in our case time
  useEffect(() => {
    setState(time.toLocaleTimeString());
  }, [time])
  
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {state}.</h2>
    </div>
                  )

  return (
    element
  );
}


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


 

в опубликованном коде мы используем useEffect() hook для реагирования на любые изменения в Date() объекте. Который был передан в массиве после функции обратного вызова.

Что делает этот крюк?

он вызывает useState() hook для обновления нашей переменной состояния , которую я назвал state , которая будет отображаться соответствующим образом всякий раз, когда меняется время.