Должен ли я использовать условные обновления setState в componentDidUpdate в React 16? - PullRequest
Новая
       11

Должен ли я использовать условные обновления setState в componentDidUpdate в React 16?

0 голосов
/ 11 апреля 2019

Я использую React 16 и мне нужно вызвать условный setState внутри componentDidUpdate . setState выполняется асинхронно. Поэтому обычно, если мне нужно использовать состояние для вычисления моего следующего состояния , я должен использовать функцию updater в качестве аргумента для setState . В React 16 добавлена ​​возможность отменить обновление setState , вернув null из setState . Итак, я должен использовать функцию Updater , чтобы сделать условный setState ?

Код с обновлением : 

componentDidUpdate(prevProps, prevState) {
    const prevValue = prevProps.value;
    this.setState((state, props) => {
        const nextValue = props.value;
        if (prevValue === nextValue) return null;
        const isIncreasing = prevValue < nextValue;
        if (prevState.isIncreasing === isIncreasing) return null;
        return { isIncreasing };
    });
}

Код без средства обновления : 

componentDidUpdate(prevProps, prevState) {
    const prevValue = prevProps.value;
    const nextValue = this.props.value;
    if (prevValue === nextValue) return;
    const isIncreasing = prevValue < nextValue;
    if (prevState.isIncreasing === isIncreasing) return;
    this.setState({ isIncreasing });
}

1 Ответ

3 голосов
/ 11 апреля 2019

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

static getDerivedStateFromProps(props, state) {
  return {
    prevValue: props.value,
    isIncreasing: props.value > state.prevValue, // First time will always be true since state.prevValue is undefined FYI
  };
}
...