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

发布时间：2020-12-15 20:41:13 所属栏目：百科来源：网络整理

导读：我们都知道构造函数 – componentWillMount – componentDidMount是执行顺序. 现在,当redux发挥作用并尝试在组件生命周期中访问redux属性时.连接将执行的顺序是什么,以便数据可用生命周期方法忽略和数据更新到redux.可能性是 1. Connect (DATA AVAILABLE) -

我们都知道构造函数 – > 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)

并且订单是否一致或取决于加载的数据？

反应和原生反应是不同的

并且可以根据PropType中的要求定义redux属性

connect是一个包装组件的HOC,因此组件生命周期方法在连接生命周期之后.为了简单理解,您可以将连接写成这样写

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

现在,只要你的状态更新,connect就会浅显比较要返回给Component的道具列表,如果有更新,则更新道具,之后组件生命周期方法就像一个prop一样运行.

简而言之,最初的执行是

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

一旦数据更新

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!