Состояние ReactJS и метод визуализации - PullRequest
Новая
       21

Состояние ReactJS и метод визуализации

0 голосов
/ 19 февраля 2020

Я изучаю главу Состояние и жизненный цикл в reactJS с классом Clock, и я не понимаю, почему я могу перерисовать мои переменные "myFirstNumber, mySecondNumber, myWord", которые не являются состояниями, когда Я использую этот код в CodePen: 

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
    };
    this.mySecondNumber = 0;
  }

  componentDidMount() {
    this.myFirstNumber = 0;
    this.myWord = "Start";
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );

  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date(),

    });
        this.myFirstNumber += 1;
       this.mySecondNumber += 1;
    if (this.myFirstNumber ===5) {
      this.myWord = "Finish";
    }
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
        <h2>myFirstNumber from ComponentDidMount: {this.myFirstNumber}</h2>
        <h2>mySecondNumber from constructor: {this.mySecondNumber}</h2>
        <h2>myWord: {this.myWord}</h2>
      </div>
    );
  }
}

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

Метод рендеринга отображает все DOM каждую секунду для моих переменных, которые не являются состояниями?

Ответы [ 3 ]

0 голосов
/ 19 февраля 2020

В componentDidMount() вы планируете интервал, который запускает функцию tick() каждую секунду. Внутри этой функции вы обновляете состояние компонента, вызывая setState() и передавая текущее время в качестве нового значения состояния. Кроме того, вы модифицируете некоторые локальные переменные класса. Когда аргументы, переданные в setState(), обрабатываются механизмом JS, что происходит асинхронно, а не сразу после вызова setState(), компонент обновляет свое состояние.

Затем функция render() вызывается функцией фреймворк. Функция render() возвращает вывод, который отражает текущие значения всех переменных, запрошенных внутри функции render(). Если вы не вызываете setState() внутри tick() метода, то вы не увидите никаких изменений, даже если вы изменяете myFirstNumber и другие переменные через каждую секунду.

0 голосов
/ 19 февраля 2020

Когда вы вызываете функцию this.setState, DOM переопределяется. Здесь DOM обновляется каждую секунду, когда this.state.date изменяется через this.setState, показывая новые значения. Однако, если вы храните дату вне состояния, вы можете видеть, что DOM больше не рендерится, тот же результат, если вы хотите изменить «myWord» или «firstNumber», не меняя ничего в состоянии.

0 голосов
/ 19 февраля 2020

Когда вы запускаете tick(), часть setState запускает повторный рендеринг и обрабатывает все, состояние или нет.

...