reactjs - 使用react-redux connect和redux数据的组件生命周期顺序

Question

我们都知道constructor -> componentWillMount -> componentDidMount是执行顺序。

现在，当 redux 发挥作用并尝试在我们的组件生命周期中访问 redux 属性时。 connect 执行的顺序是什么，以便数据可用生命周期方法忽略并将数据更新为 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) 

顺序是否一致或取决于加载的数据？

react 和 React Native 有什么不同

是否可以将 redux 属性定义为 PropType 中所需的

Answer 1

connect 是一个封装组件的 HOC，因此组件生命周期方法位于 connect 生命周期之后。为了简单理解，你可以认为connect是这样写的

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

现在，每当您的状态更新时，connect 都会浅层比较要返回到 Component 的 props 列表，如果有更改，则更新 props，之后组件生命周期方法就像更新 props 一样运行。

简而言之，最初的执行是

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

数据更新后

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