Вы должны посмотреть на жизненные циклы обоих, как они работают и в каком порядке вызывается каждый метод. Глядя на изображение реакции жизненного цикла, вы можете увидеть разницу между componentWillMount и componentDidMount и другими, такими как componentDidUpdate, componentWillUpdate и так далее ...
Также вы должны подумать, когда использовать каждый метод
Чтобы обновить состояние, вы вызываете this.setState(), который сообщает, что что-то изменилось, и будет повторно визуализировать дерево компонентов. Если вы используете this.state.data = something реакция не вызовет рендеринга (). Теперь, чтобы обновить реквизит, вам нужно понять, как на самом деле работает render (). Этот ответ обобщен из уже существующего ответа:
Каждый раз, когда render () вызывается реагировать, создается новый виртуальный DOM.
где корневой узел - это компонент, для которого вызывается функция рендеринга.
Функция render () вызывается, когда состояние или реквизит
изменение компонента или любого из его дочерних элементов. Функция render ()
уничтожает все старые виртуальные DOM-узлы, начиная с корня и
создает новый виртуальный DOM.
Чтобы убедиться, что повторный рендеринг компонентов проходит гладко и
Эффективный React использует алгоритм Diffing, чтобы сократить время, которое требуется
создать новое дерево с временной сложностью O (n), обычно
сложность для копирования деревьев> O (n ^ 2). Как это достигается
с помощью атрибута «ключ» на каждом из элементов в DOM.
React знает, что вместо создания каждого элемента с нуля он может
проверьте атрибут «ключ» на каждом узле в DOM. Вот почему вы получаете
предупреждение, если вы не установите атрибут «ключ» для каждого элемента, React
использует ключи, чтобы значительно увеличить скорость рендеринга.
Реактивный жизненный цикл
Redux Lifecycle
