Является setState() внутри componentDidMount(), считающимся анти-шаблоном

Я только что посмотрел на это обсуждение setState() внутри componentDidMount().

Вы можете видеть, что после функции render() функция componentDidMount() будет вызываться React. Когда вы помещаете setState() в componentDidMount() тогда вы вызываете перерисовку всего дерева компонентов, а не только текущего компонента - не забывайте, что текущий компонент только что закончил рендеринг.

И некоторые люди предлагали поставить setState() внутри componentWillMount(). В некоторых случаях я хочу получить высоту визуализированного элемента и сохранить его как состояние, и вышеуказанный метод не будет работать. Я также взглянул на официальный сайт React, и он предлагает сделать Ajax-вызов внутри componentDidMount(), что опять-таки идет вразрез с вышеуказанной идеей.

Итак, я ошибаюсь, помещая setState() в componentDidMount()? Если да, что я должен применить в качестве альтернативы?

Ответ 1

Вы можете сразу же вызвать setState() в componentDidMount(). Это вызовет дополнительный рендеринг, но это произойдет до того, как браузер обновит экран. Это гарантирует, что даже если render() будет вызываться дважды в этом случае, пользователь не увидит промежуточное состояние. Используйте этот шаблон с осторожностью, поскольку он часто вызывает проблемы с производительностью. В большинстве случаев вы должны иметь возможность назначить начальное состояние в constructor(). Однако это может быть необходимо для таких случаев, как модалы и всплывающие подсказки, когда вам нужно измерить узел DOM, прежде чем отображать что-то, зависящее от его размера или положения.

Реагировать на документы

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

пример

TL;DR: - Если у вас есть все необходимые данные в конструкторе - state там

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
}

Вызовите асинхронное действие, нажмите DOM в componentDidMount()

Ответ 2

Обычно вы не хотите выполнять синхронный параметр состояния внутри componentDidMount, вы должны просто поместить его в конструктор. Однако высота элемента немного уникальна, так как вы не можете получить высоту элемента до тех пор, пока он не будет установлен и не отображен в DOM.

Так обычно нет, но в случае высоты элемента это нормально делать в componentDidMount.

Ответ 3

Ваш случай с незнанием высоты визуализируемого элемента может быть действительным предлогом для использования setState внутри componentDidMount. Однако в таком случае я бы определенно добавил еще один метод жизненного цикла, shouldComponentUpdate, чтобы контролировать проблему с Rerender.