setState не рендерит лишний раз?

Question

код A:

componentDidMount(){
  this.dateString = this.props.navigation.getParam('dateString', moment());
}

Код B:

state = { dateString: moment() }

componentDidMount(){
  const dateString = this.props.navigation.getParam('dateString', moment());

  this.setState({ dateString })
}

dateString - параметр, переданный с предыдущего экрана. Я console.log в render() и обнаружил, что они выглядят ровно столько же раз? Я ожидал, что код B отобразит еще один раз, поскольку он использует setState?

Какой из вышеперечисленных способов лучше?

Answer 1

Проверьте значение this.props.navigation.getParam('dateString', moment()) в render и componentDidmount().

Если оба значения одинаковы, он не будет вызывать повторный рендеринг, как реактивный повторный рендеринг компонентов, только если состояние изменилось там, если вы его сделали PureComponent.

В этом jsfiddle вы можете попробовать запустить код, изменив Pure и обычный компонент, и увидите разницу.

Answer 2

Попробуйте добавить в код B состояние внутри метода constructor () следующим образом:

constructor(){
    super();
    this.state = { dateString: moment() }
}

Я обычно не использую плавающее состояние в классе, я всегда помещаю его в конструктор.

Answer 3

Не уверен, что это так в данном конкретном случае, но: React может объединять несколько вызовов setState вместе. Поэтому, даже если у вас есть несколько асинхронных вызовов setState, может быть только один (повторный) рендеринг. Таким образом, вы не должны полагаться на количество вызовов для отображения