Что произойдет, если я буду использовать функцию setState() в конструкторе класса в ReactJS или React Native?

Из любопытства я просто хочу знать, что произойдет, если я использую функцию setState() в конструкторе класса в React Native или ReactJS? Например:

constructor(props) {
  super(props);
  this.setState({title: 'new title'});
}

Каков жизненный цикл Реактива?

Я не читал код внутри React. Я боюсь, что это будет какой-то ущерб, когда я напишу его таким образом.

Ответ 1

Что setState по существу делает, это запустить кучу логики, которая вам, вероятно, не нужна в конструкторе.

Когда вы идете state = {foo : "bar"}, вы просто присваиваете что-то объекту javascript state, как и любой другой объект. (Что все state, кстати, просто обычный объект, локальный для каждого компонента).

Когда вы используете setState(), то помимо назначения объекту state, реагируют и редеренты компонента и все его дочерние элементы. Что вам не нужно в конструкторе, так как компонент все равно не отображается.

Ответ 2

Сообщение об ошибке будет Uncaught TypeError: Cannot read property 'VARIABLE_NAME' of null

См. следующие два фрагмента jsfiddle.

Случай 1) Рабочее решение jsfiddle

class Hello extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        name: 'world'
      } 
    }

  render() {
    return <div>{this.state.name} </div>
  }
}

ReactDOM.render(<Hello />, document.getElementById('container'));

Случай 2) Не работает решение

class Hello extends React.Component {
    constructor(props) {
      super(props);

      this.setState({
        name: 'hello'
      });
    }

  render() {
    return <div>{this.state.name} </div>
  }
}

ReactDOM.render(<Hello />, document.getElementById('container'));

Вывод:

Мое правило, внутри constructor используется this.state = {} напрямую, в других местах используется this.setState({ });

Ответ 3

Конструктор. Конструктор используется для инициализации состояния.

Состояние. Компоненты, содержащие локальное состояние, имеют свойство "this.state".

SetState: у реагентов есть метод, доступный для них, называемый setState Calling "this.setState" заставляет React повторно отображать ваше приложение и обновлять DOM.you также может отслеживать prevstate в setState Если вы используете setState в конструкторе, вы получите ошибку следующим образом: Можете только обновить смонтированный или монтируемый компонент. Обычно это означает, что вы вызывали setState() на несмонтированном компоненте.