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

Posted 2023-02-22

【中文标题】react-redux connect 和 redux 数据的组件生命周期顺序

【英文标题】：Order of component life cycle with react-redux connect and redux data

【发布时间】：2018-11-17 01:04:16

【问题描述】：

我们都知道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 中要求的

【问题讨论】：

您能否提供您的用例以更好地理解问题

我希望它是一个一般场景并且没有任何具体的用例@abby37

【参考方案1】：

connect 是一个封装组件的 HOC，因此组件生命周期方法出现在连接生命周期之后。为了简单理解，可以认为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

【讨论】：

所以回复你的回答，这回答了我所有的问题。 1. Connect (DATA AVAILABLE) -> constructor & componentWillMount & componentDidMount 是顺序 2. 执行顺序是一致的 3. react 和 react-native 相同 4. 是的，可以在 PropType 中为 redux 属性定义 required

【参考方案2】：

初始执行顺序是 -

连接（数据可用）-> 构造函数 & componentWillMount & Render & componentDidMount

当站点启动时，redux connect 将首先在组件挂载生命周期之前使用其默认状态和操作进行初始化。但是，如果redux中有API调用，组件挂载生命周期不会等待数据。相反，如果组件已经挂载并且 redux 返回数据，则会调用组件更新生命周期。