Какая разница в этом.государство и это.setstate в ReactJS?

я хочу, чтобы изменить значение hasSubmit ключ, как в первом разделе кода. Я знаю, что это не рекомендуется. Но второй код асинхронный, и я не хочу использовать функцию обратного вызова setState.

  • в чем разница this.state и setState?
  • есть ли способ, чтобы изменить значение hasSubmit сразу?

Первый Код: this.state.hasSubmit = false this.setState({}) //Code that will use `hasSubmit`.

второй код: this.setState({ hasSubmit: false, }); //Code that will use `hasSubmit`.


добавить:

сценарий таков:

  1. hasSubmit set false на getInitialState().
  2. hasSubmit изменится на false при нажатии кнопки .
  3. hasSubmit изменится на true когда представила.

первый пункт submit не имеет никаких проблем и hasSubmit будет установлен в true.

но второй щелчок submit будет неправильно использовать Second asynchronous code, потому что hasSubmit по-прежнему true, а First Code может решить проблему.

5 ответов


вот что React docs говорят:

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

setState() не сразу мутировать этого.state, но создает ожидающий переход состояния. Доступ this.state после вызова этого метода можно потенциально вернуть существующее значение.

никакая гарантия одновременного операция вызовов setState и вызовов может быть упакована для повышения производительности. setState() всегда будет вызывать повторную визуализацию, если логика условной визуализации не реализована в shouldComponentUpdate().

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

всегда разумно использовать API так, как они были разработаны. Если врачи говорят, что не мутируйте свое состояние, тогда вам лучше не мутировать свое состояние.

пока setState() может быть технически асинхронным, это, конечно, не медленно каким-либо заметным образом. Компонент render() функция будет вызвана в довольно коротком порядке.

одним из недостатков установки состояния непосредственно является то, что методы жизненного цикла React -shouldComponentUpdate(), componentWillUpdate(), componentDidUpdate() - зависит от переходов состояния, вызываемых с помощью setState(). Если вы измените состояние напрямую и позвоните setState() с пустым объектом вы больше не можете реализовать эти методы.

другое заключается в том, что это просто плохой стиль программирования. Вы делаете в двух утверждениях то, что могли бы сделать в одном.

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

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

лучше всего работать с фреймворком, а не против него.

обновление

из комментариев ниже:

необходимость в том, что я хочу использовать измененный hasSubmit ниже.

хорошо, теперь я понимаю. Если вам нужно немедленно использовать свойство future state, лучше всего просто сохранить его в локальной переменной.

const hasSubmit = false;

this.setState({
  hasSubmit: hasSubmit
});

if (hasSubmit) { 
  // Code that will use `hasSubmit` ...

this.setState поддерживает жизненный цикл компонента react и не похоже на мутирующие переменные (хотя внутренне он мутирует состояние). Так одна подача пути в цикл реакции поддержана без всех побочных эффектов.

предостережение с использованием this.setState не работает с конструкторами в классах ES6. Нам нужно использовать this.state = шаблон, а не this.setState в конструкторах ES6


Если вы хотите изменить состояние и вызвать рендеринг с помощью react:

используйте второй код BTW: этот код не использует обратный вызов setState:

  this.setState({
    hasSubmit: false,
  });

проблемы / ошибки с первым кодом:

  this.state.hasSubmit = false      // Updates state directly: 
                                    // You are not supposed to do this
                                    // except in ES6 constructors
  this.setState({})                 // passes an empty state to react.
                                    // Triggers re-render without mutating state

Если вы хотите изменить состояние без запуска повторного рендеринга: Поместите второй код внутрь componentWillReceiveProps Как рассказали здесь в официальных документах react.


вы никогда не должны игнорировать рекомендации по документации. На момент написания статьи setState разрешает второй аргумент, который является функцией обратного вызова, когда setState и re-render закончили. Поскольку вы никогда не предоставляете нам, как ваш код будет использовать значение hasSubmit, я считаю, что некоторые другие могут найти это полезным, когда они хотят убедиться, что hasSubmit был изменен.


вы должны использовать this.forceUpdate() в первом примере для принудительного обновления состояния. Например:

this.state.hasSubmit = false;
this.forceUpdate();

но лучше использовать this.setState потому что это init native check-state mecanizm React engine, который лучше, чем принудительное обновление.

если вы просто обновите любой параметр this.state без setState react render mecanizm не будет знать, что некоторые параметры состояния обновляются.