Чем отличается forceUpdate от setState?

Question

[Coder321]

Чем отличается forceUpdate от setState? Может ли использование forceUpdate привести к каким то побочным эфектам?

Answer 1

[Иван]

Серьезно?!
forceUpdate() - черным по белому жеж ...

использование forceUpdate привести к каким то побочным эфектам

конечно может. Но вообще это скорее исключение из правил и лучше пользовать setState()

Если кратко:
setState() записывает данные в this.state и вызывает рендер.
forceUpdate() ничего не делает, а просто вызывает рендер. В принципе бесполезная функция, т.е. если ни props, ни state не изменились, то отрендерится один фиг тоже самое. Если честно даже в голову не приходит зачем это может понадобится, кроме каких-нить волшебных асинхронных костылей в render'e.

Comments

[Coder321]

да хз, достался проект по наследству, там везде юзается forceUpdate. С учетом того что я в реакте полнейший ноль, потому и спрашиваю. спасибо за ответ)

[Иван]

Coder321: ну тогда у вас ВСЕ ОЧЕНЬ ПЛОХО!
В принципе перерисовать компонент - 3 способа:
1) изменились props. Для компонента это какбы статические переменные, они приходят от родителя
2) Вызван setState(), т.е. изменился state компонента. Это наоборот внутренние переменные компонента. Например клик по элементу или например приход JSON данных.
3) forceUpdate(), который вроде как не менял и не получал данных ни изнутри, ни снаружи.

[Coder321]

Иван: о первых двух я знал, посмотрел уроком немного, но о forceUpdate там и слова не было.

Answer 2

[Максим]

Дополню Иван на тот случай, если у вас трудности с переводом:
forceUpdate стоит вызывать если render вашего компонента зависит от чего-то еще (кроме props/state).

Главный побочный эффект - лишние перерисовки. Второе: forceUpdate на текущем компоненте проигнорирует shouldComponentUpdate...

В общем, как вам уже ответили, плюс все тот же перевод документации: старайтесь избегать forceUpdate

p.s. мне на практике ни разу еще не приходилось использовать.

Comments

[Coder321]

Я в реате ни бум-бум, проетк достался по наследству, вот изучаю, а там везде вместо setState юзают forceUpdate(

[Иван]

На самом деле скорее всего это нужно для:
сторонник библиотек Redux-образных, например если в рендере выводится переменная не из state или props, и после её изменения надо вызвать рендер;
отложенные действия, после изменения state|props
нехитрой анимации без state и props, хотя все-равно проще юзать стейт;
обратная совместимость, когда в state можно было напрямую писать (и сейчас можно, но оно матерится).

[Coder321]

Иван: да нет, здесь его юзали просто для отрисовки страницы при изменении переменных.

[Адлет Амреев]

Иван, Привет! А насчет данного кода что скажешь? Это реализация функции connect в Slomux. Здесь оправдывается использование this.forceUpdate()?

const connect = (mapStateToProps, mapDispatchToProps) =>
  Component => {
    return class extends React.Component {
      render() {
        console.log('store', store)
        return (
          <Component
            {...this.props}
            {...mapStateToProps(store.getState(), this.props)}
            {...mapDispatchToProps(store.dispatch, this.props)}
          />
        )
      }

      componentDidMount() {
        store.subscribe(this.handleChange)
      }

      handleChange = () => {
        this.forceUpdate()
      }
    }
  }

Answer 3

[dollaween]

forceUpdate может понадобиться при работе с localStorage, данные которого не имеет смысл дублировать в state (если эти данные только отрисовываются, а не отправляются на сервер, конечно)

Answer 4

[Ринат Гарифуллин]

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