Порядок жизненного цикла компонентов с реагирующим-редукционным соединением и редуксными данными

Question

Мы все знаем, что constructor -> componentWillMount -> componentDidMount - это порядок исполнения.

Теперь, когда в игру вступает избыточность и мы пытаемся получить доступ к свойствам избыточности в жизненном цикле нашего компонента.В каком порядке connect выполнит , так что данные доступны для методов жизненного цикла игнорирование и обновление данных до редукции.Возможны следующие варианты:

1. Connect (DATA AVAILABLE) -> constructor & componentWillMount & componentDidMount

2. constructor -> Connect (DATA AVAILABLE) -> componentWillMount & componentDidMount

3. constructor -> componentWillMount -> Connect (DATA AVAILABLE) -> componentDidMount

4. constructor -> componentWillMount -> componentDidMount -> Connect (DATA AVAILABLE) 

и согласован ли порядок или зависит от загружаемых данных?

и отличается ли он от реагировать и реагировать нативно

и можно ли определять свойства редукса как , требуемый в PropType

Answer 1

connect - это HOC, охватывающий ваш компонент, поэтому метод жизненного цикла компонента следует после жизненного цикла подключения.Для простого понимания, вы можете думать, что connect написан так:

const connect = (mapStateToProps, mapDispatchToProps) => (Component) => {
    return class ReduxApp extends React.Component {
        // lifecycle of connect
        render() {
            return (
                 <Component {...mapStateToProps(state)} />
            )
        }
    }
}

Теперь, когда ваше состояние обновляется, connect будет мелко сравнивать список реквизитов, которые будут возвращены в Компонент, и, если есть изменения, обновлять реквизиты, после чего метод жизненного цикла компонента запускается так же, как обновляется реквизит.

Короче говоря, выполнение изначально равно

Connect (DATA AVAILABLE) -> constructor & componentWillMount & componentDidMount

Как только данные обновляются

Connect (DATA AVAILABLE) -> componentWillReceiveProps/getDerivedStateFromProps -> componentWillUpdate -> render -> componentDidUpdate

Answer 2

Первоначальный порядок выполнения был бы -

Connect (DATA AVAILABLE) -> constructor & componentWillMount & Render & componentDidMount

Когда сайт запускается, резервное соединение будет инициализироваться первым сего состояния и действия по умолчанию перед жизненным циклом монтирования компонента.Однако, если есть вызовы API в redux, жизненные циклы монтирования компонента не будут ждать данных.Вместо этого будут вызваны жизненные циклы обновления компонента, если компонент уже смонтирован, а приставка возвращает данные.