Reactnative reactredux connect 和 redux 数据的组件生命周期顺序

发布于06月07日

我们都知道constructor -> componentWillMount -> componentDidMount是执行命令.

现在，当redux开始发挥作用并try 在组件生命周期中访问redux属性时.connect will execute使data is available lifecycle methods忽略和数据更新到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)

加载的数据上是order consistent还是depends？

react and react native人之间有什么不同吗

可以将redux属性定义为required in PropType吗

推荐答案

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

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

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

简而言之，最初的执行是

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

数据更新后

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

React-native相关问答推荐

react 在顶部选项卡导航中传递本机数据

React native React native下拉 Select 器下拉列表不透明问题

到达安装依赖项时 EAS 构建错误

将屏幕标题更新为所选标签导航的标题

如何在 react-native 中使用 Animated 制作 svg 动画

Android Studio 为构建设置 node 目录(Cause： error=2, No such file or directory)

Invariant Violation：Chrome 不支持在本机模块上调用同步方法

在 LTR 设备上强制 RTL

Firebase JavaScript SDK 和 react-native-firebase 有什么区别

library not found for -lRCTGeolocation

React Native：fetch request failed with error - TypeError： Network request failed(…)

React Native 动画 - zoom 时 translateX 和 translateY

react-native如何禁用android开发模式

react-native 中的倒数计时器

React Native Navigation 组件路由问题

带有父 PanResponder 的 TouchableOpacity

INSTALL_FAILED_UPDATE_INCOMPATIBLE：包签名与之前安装的版本不匹配,忽略

在 componentWillUnmount 中清除超时的更好方法

使用 React Native 运行多个 iOS 模拟器？

如何在react-native中将文本放置在图像上？

实用课程推荐