В чем разница между реквизитом и состоянием в реакции?

React.js

В чем точная разница между props и state? Довольно легко понять, как они работают, особенно если рассматривать их в контексте, но также немного сложнее понять их концептуально. Сначала это сбивает с толку, потому что они оба имеют абстрактные термины и их значения выглядят одинаково, но они также служат разным целям. Эта статья одновременно публикуется в моем блоге: 👉xueshiming.cn

Что на самом деле делает setState?

setState()Планирует обновление объекта состояния компонента. когдаstateВ случае изменения компонент будет повторно визуализирован.

В чем разница между состоянием и реквизитом?

props（“properties” 的缩写）а такжеstateобычныеJavaScriptобъект. Оба они используются для сохранения информации, которая может управлять выводом рендеринга компонента, и между ними есть несколько важных различий:

  • propsпередается компоненту (аналогично параметрам функции), аstateуправляется самим компонентом внутри компонента (аналогично переменным, объявленным внутри функции).

  • propsнеизменно, всеReactКомпоненты должны защищать своиpropsне изменился. из-заpropsпередаются, и их нельзя изменить, поэтому мы можем использовать любыеpropsизReactкомпоненты рассматриваются какpureComponent, то есть при одном и том же вводе он всегда будет отображать один и тот же вывод.

  • stateсоздается в компоненте, обычно вconstructorинициализирован вstate

  • stateизменчива и модифицируема каждый разsetStateобновляются асинхронно.

Почему setState дает мне неправильное значение?

существуетReactсередина,this.propsа такжеthis.stateОба представляют значение, которое было визуализировано, то есть значение, отображаемое в данный момент на экране.

передачаsetStateна самом деле асинхронный - не рассчитывайте на вызовsetStateПозже,this.stateнемедленно сопоставляется с новым значением. Если вам нужно обосновать текущийstateчтобы вычислить новое значение, вы должны передать функцию, а не объект (подробности см. ниже).

Пример, когда код ведет себя не так, как ожидалось:

incrementCount() {
  // 注意：这样 *不会* 像预期的那样工作。
  this.setState({count: this.state.count + 1});
}

handleSomething() {
  // 假设 `this.state.count` 从 0 开始。
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();
  // 当 React 重新渲染该组件时，`this.state.count` 会变为 1，而不是你期望的 3。

  // 这是因为上面的 `incrementCount()` 函数是从 `this.state.count` 中读取数据的，
  // 但是 React 不会更新 `this.state.count`，直到该组件被重新渲染。
  // 所以最终 `incrementCount()` 每次读取 `this.state.count` 的值都是 0，并将它设为 1。

  // 问题的修复参见下面的说明。
}

Итак, как мне обновить те, которые зависят от текущегоstateизstateШерстяная ткань?

ДатьsetStateПередача функции вместо объекта гарантирует, что при каждом вызове будет использоваться последняя версияstate.

В чем разница между передачей объекта в setState и передачей функции?

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

incrementCount() {
  this.setState((state) => {
    // 重要：在更新的时候读取 `state`，而不是 `this.state`。
    return {count: state.count + 1}
  });
}

handleSomething() {
  // 假设 `this.state.count` 从 0 开始。
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();

  // 如果你现在在这里读取 `this.state.count`，它还是会为 0。
  // 但是，当 React 重新渲染该组件时，它会变为 3。
}

Когда setState асинхронный?

В настоящее время внутри обработчика событийsetStateявляется асинхронным. (В16.10)

Например, еслиParentа такжеChildВ то же самоеclickсобытие называетсяsetState, что гарантирует, чтоChildОн не будет перерисовываться дважды. заменяется,ReactГотовыstateДождитесь завершения события браузера, а затем равномерно обновите его. Этот механизм может дать хороший прирост производительности в больших приложениях.

Категории