Компонент класса React обновляет значение переменной класса при повторном рендеринге, но не компонент функции - PullRequest
Новая
       19

Компонент класса React обновляет значение переменной класса при повторном рендеринге, но не компонент функции

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

Я играл с Rea cJS. Я заметил одну вещь- В случае компонента класса во время повторной визуализации обновленное значение переменной класса обновляется на экране как: 

import React, { Component } from "react";

class Temp extends Component {
  constructor(props) {
    super(props);
    this.count = 0;
    this.state = {
      foo: 0,
    };
  }
  render() {
    return (
      <button
        onClick={() => {
          this.setState({ foo: this.state.foo + 1 });
          this.count++;
        }}
      >
        {this.count} - {this.state.foo}
      </button>
    );
  }
}

export default Temp;

Но в случае функция компонента t обновленное значение обычной переменной не обновляется на экране во время повторного рендеринга . 

import React, { useRef, useState } from "react";

const RefComponent = () => {
  const [stateNumber, setStateNumber] = useState(0);
  let refVar = 0;

  function incrementAndDelayedLogging() {
    setStateNumber(stateNumber + 1);
    refVar++;
  }

  return (
    <div>
      <button onClick={incrementAndDelayedLogging}>Click</button>
      <h4>state: {stateNumber}</h4>
      <h4>refVar: {refVar}</h4>
    </div>
  );
};

export default RefComponent;

Так ли был реализован React или я что-то балую? Мне любопытно узнать об этом. Спасибо

Ответы [ 2 ]

1 голос
/ 19 апреля 2020

Функциональные компоненты в React не имеют экземпляров, поэтому такие вещи, как переменные класса или экземпляра, не обязательно имеют смысл; Как и другие отмечали в комментариях здесь, React будет отображать (вызывать) функциональные компоненты и «сбрасывать» любые локальные переменные, которые не имеют явного состояния. Переменные экземпляра, подобные поведению для функциональных компонентов, достигаются с помощью useRef.

Из документов:

Хук useRef() предназначен не только для DOM рефов. Объект «ref» - ​​это обобщенный c контейнер, свойство current которого является изменяемым и может содержать любое значение, подобное свойству экземпляра класса.

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

Это следствие функциональных компонентов.

Подумайте об этом так: каждый раз, когда обновляется состояние var или prop, ваша функция вызывается снова. Все объявления переменных будут происходить снова (состояния - это особый случай), поэтому let refVar = 0; вызывается снова.

Если вам нужна эта переменная для жизни для нескольких рендеров, вам нужно объявить ее в выжившем контексте повторно делает.

У вас есть как минимум 2 способа достичь этого

  • объявить состояние для него с помощью useState
  • объявить его на уровне модуля, но знать все ваши экземпляры RefComponent будут использовать один и тот же экземпляр
...