Нужно ли убедиться, что getDerivedStateFromProps не является рекурсивным?

johndodo спросил: 12 мая 2018 в 04:36 в: reactjs

Я пытаюсь понять новые методы жизненного цикла React и не могу понять некоторые детали. В React docs для getDerivedStateFromProps говорится:

getDerivedStateFromProps вызывается непосредственно перед вызовом rendermethod как на начальном монтировании, так и на последующих обновлениях. Он должен возвратить объект для обновления состояния или null, чтобы ничего не обновлять.

Обратите внимание, что этот метод срабатывает при каждом рендеринге, независимо от причины. Это в отличие от UNSAFE_componentWillReceiveProps, который только срабатывает, когда родитель вызывает повторную визуализацию, а не в результате alocal setState.

(выделение мое)

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

Нужно ли нам проверять, что мы возвращаем только обновление состояния, если изменения отличаются от старого состояния, или я что-то не хватает?

reactjs

1 ответ

AlexCatch ответил: 15 мая 2018 в 10:23

Да, вам нужно убедиться, что вы только вывели состояние из реквизита, если ваши реквизиты изменились, иначе это будет просто неэффективно.

Что-то вроде ниже.

    static deriveStateFromProps(nextProps, prevState) {
        if (nextProps.event && nextProps.event.id !== prevState.id) {
            return {
               id: event.id
               latitude: props.event.latitude,
               longitude: props.event.longotude,
               addressComps: {
                   addressLine1: props.event.addressLine1,
                    addressLine2: props.event.addressLine2,
                    cityTown: props.event.cityTown,
                    postCode: props.event.postCode
                }
            };
        }
        // Return null to indicate no change to state.
        return null;
    }