Порядок жизненного цикла компонентов с подключением react-redux и данными redux
Все мы знаем, что constructor -> componentWillMount -> componentDidMount - это порядок исполнения.
Теперь, когда в игру вступает redux и пытается получить доступ к свойствам redux в жизненном цикле нашего компонента. Каков порядок, в котором подключение выполнит, чтобы игнорировать данные доступны методы жизненного цикла и обновлять данные до redux. Возможности
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)
и является ли порядок последовательный или зависит от загружаемыми данными?
и чем отличается реагировать и реагировать родным
и можно ли определять свойства redux как требуется в PropType
Я надеюсь, что это общий сценарий и нет конкретного варианта использования @ abby37
Ответы 2
Первоначальный порядок выполнения будет -
Подключить (ДАННЫЕ ДОСТУПНЫ) -> конструктор & componentWillMount & Render & componentDidMount
Когда сайт запускается, redux connect сначала инициализируется с его состояниями и действиями по умолчанию перед жизненными циклами монтирования компонентов. Однако, если в redux есть вызовы API, жизненные циклы монтирования компонентов не будут ждать данных. Вместо этого будут вызваны жизненные циклы обновления компонентов, если компонент уже смонтирован и redux возвращает данные.
connect - это HOC, который обертывает ваш компонент, поэтому метод жизненного цикла компонента идет после жизненного цикла подключения. Для простоты понимания, вы можете представить себе соединение, написанное так:
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
так что отвечая на ваш ответ, который отвечает на все мои вопросы. 1. Connect (ДАННЫЕ ДОСТУПНЫ) -> constructor & componentWillMount & componentDidMount - это порядок 2. порядок выполнения согласован 3. и одинаков для реакции и нативной реакции 4. и да, это нормально определить required в PropType для свойств redux
Можете ли вы предоставить свой вариант использования для лучшего понимания проблемы