Реакция реализует shouldComponentUpdate в моем приложении React с состоянием загрузки

Question

У меня проблема с реализацией shouldComponentUpdate в моем приложении React с состоянием loadingData.Я хочу, чтобы компонент не загружался снова, когда nextProps не изменился по сравнению с this.props, который работает нормально, и он теряет значение loadingData как, и я не могу найти причину.

Почему loadingData оказалось true, даже если в Redux нет никаких изменений данных (nextProps и this.props)?

  constructor(props){
    super(props)
    this.state = {
      loadingData: false,
    }
  }

  async componentDidMount() {
    this._isMounted = true;
    const { username } = this.state
    this.setState({ loadingData: true })

    try {
      await this.props.getUserData(username)
      this.setState({ loadingData: false })
    } catch (err) {
      console.log(err)
      this.setState({ loadingData: false })
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.props !== nextProps
  }

render() {
  return(
    <div>{this.state.loadingData ? "Loading..." : this.props.userData}</div>
  )
}

Обновлен код, чтобы показать, как я установил состояние loadingData.По какой-то причине добавление shouldComponentUpdate показывает «Загрузка ...» на экране вместо пользовательских данных из Redux.Я не уверен, почему ...

Answer 1

Это всегда будет возвращать false, потому что this.props отличается от nextProps между каждым рендером.

Для простейшего примера этого:

console.log({} === {}) // false

По умолчанию (при использовании React.PureComponent) React выполнит проверку на "полное равенство".Он проверит равенство каждой опоры (но не будет делать это рекурсивно из-за соображений производительности).( см. Источник ).

В качестве первой попытки попытались ли вы использовать React.PureComponent вместо React.Component?

Если это не поможет,Я бы порекомендовал поделиться всем фрагментом кода.shouldComponentUpdate обычно считается «запахом кода» и обычно означает, что есть проблема с другой частью кода.Он не должен использоваться в качестве потока управления, но только для оптимизации производительности.

Если вам все еще нужно реализовать shouldComponentUpdate, , посмотрите на shallowEqual помощник по умолчанию для вдохновения.

Answer 2

Может быть, вам стоит посмотреть через это.

var jangoFett = {
    occupation: "Bounty Hunter",
    genetics: "superb"
};

var bobaFett = {
    occupation: "Bounty Hunter",
    genetics: "superb"
};

var callMeJango = jangoFett;

// Outputs: false
console.log(bobaFett === jangoFett);

// Outputs: true
console.log(callMeJango === jangoFett);