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

39

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

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

каков жизненный цикл React?

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

Попробуйте и посмотрите, это единственный способ узнать;) TheLazyChap
Попробуйте это: положитьconsole.log() сообщение в каждом изметоды жизненного цикла и дайте нам знать. Matthew Herbst
Могу даже сказать, чтоthis.state только для чтения, в то время какthis.setState для написания обновлений. zepner

Ваш Ответ

2   ответа
51

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

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

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

тогда вам придется использовать setState, если вы хотите выполнить рендеринг снова ... Но я нахожу, что функция render () выполняется дважды, но состояние по-прежнему по умолчанию без новых значений ... zaxy78
что если у меня внутри конструктора есть обещание, которое манипулирует состоянием при разрешении. Я бы установил состояние в обратном вызове обещания какthis.setState? henk
если вам нужно использовать обещание внутри конструктора - не надо. Вместо этого вызовите обещание (например, вызов извлечения) внутриcomponentDidMount() . zaxy78
22

Сообщение об ошибке будет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({ });

Я наблюдал это даже в React Native. Хотите знать, в чем причина этого? vincent mathew
Мне было интересно, почему this.setState не может быть вызван в конструкторе. vincent mathew
Это ошибка, которую вы получаете, но вы не говорите, почему вы ее получаете. Я уже знаю ошибку (или, по крайней мере, могу найти ее, запустив код самостоятельно), мне не нужно искатькакие Я получаю ошибку. Я ищу это, чтобы понятьЗачемЯ получаю эту ошибку, и что может думать создатель за этим, быть. Я вас понимаюявляются отвечая на вопрос, но для будущих людей, ищущих ответ, было бы гораздо полезнее объяснитьЗачеми не толькокакие. ratskin
Так какsetState асинхронный Это может привести к неожиданному поведению, если вы пытаетесь получить или изменитьthis.state в следующих жизненных циклах, так какthis.state еще не установлен. Alan Dong
Идея на самом деле довольно проста. посколькуthis.state сам по себе является простым объектом, изменение его значения не будет уведомлять слушателей по умолчанию. Вместо,this.setState это вызов функции, вы можете уведомлять и отправлять события другим слушателям. Ты можешь видетьReact на самом деле поставить обратный вызов в очередь и сделать больше оптимизации вsetState ->ReactBaseClasses Alan Dong

Похожие вопросы