Функция настройки и состояние настройки

#reactjs

Вопрос:

Я видел следующий код:

 class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    }
  }

  set name(newValue: string) {
    this.setState({ name: newValue });
  }

  get name(): string {
    return this.state.name
  }
}

Функция сеттера озадачивает меня. Может ли кто-нибудь сказать мне, когда вызывается функция setter? Будет ли он вызван this.setState({ name: ... ? Если да, то будет ли она бесконечной?

Аналогично для функции getter. Будет ли это бесконечный призыв?

1. Вы пробовали это сделать?

2. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Это кажется чем-то легким для проверки. Я никогда не видел, чтобы это использовалось в компоненте класса React, поэтому я подозреваю, что это очень нерегулярно, т. Е. Вам нужно будет сделать что-то подобное Welcome.name = 'John Smith' , и это вообще не шаблон реакции. Я бы посоветовал не использовать его в компоненте React.

3. Мой вопрос касается сосуществования функции установки и setState (и функции получения и this.state... ).

4. ОК. У вас есть законный случай использования, когда вы даже попытаетесь сделать что-то подобное? Это, вероятно, не будет работать так, как вы думаете, поскольку у вас очень хорошо не будет ссылки на какой-либо экземпляр Welcome компонента React, который выполняет рендеринг React. Т. Е. В React мы не вызываем компоненты, а их конструкторы сами реагируют.

5. Я вижу этот код в проекте, который отлично работает. Поэтому я пытаюсь понять, как React выполняет его (и решает конфликт).

Ответ №1:

Может ли кто-нибудь сказать мне, когда вызывается функция setter?

Это вызывается при попытке установить значение в this.name. Это функция javascript и не связана с реакцией.

React игнорирует все изменения состояния, за исключением случаев, когда это делается через setState . Изменение имени с помощью this.name = 'newName' обычно не является допустимым методом изменения состояния. Все изменения состояния ДОЛЖНЫ будут происходить через setState . В этом коде пользовательский метод настройки определен таким образом, что this.name = 'newName' вызывает this.setState .

В этом случае нет никакого конфликта. Вызов метода setter во время назначения является функцией javascript, React не играет в этом никакой роли. Метод setter изменяет состояние, с помощью setState которого затем уведомляет react об изменении.

Функция getter вызывается каждый раз, когда вы пытаетесь получить доступ this.name. Так как функция getter возвращает this.state.name, это как-если бы this.name расширяется до this.state.name.