react-native - 循环依赖在 React Native 中返回空对象

Question

我有两个相互导航的 React Native 组件(Alpha 和 Beta)；但是，这会产生循环依赖，而 React Native 似乎无法处理这些。

在 Alpha 中要求 Beta 可以正常工作，但在 Beta 中要求 Alpha 返回一个空对象。尝试推送带有无效组件的路由时会引发错误。

循环依赖可以在 React Native 中工作吗？如果没有，我该如何解决这个问题？

代码

index.ios.js

'use strict';

var React = require('react-native');

var Alpha = require('./Alpha');

var {
    AppRegistry,
    NavigatorIOS,
    StyleSheet,
    Text,
    View,
} = React;

var ExampleProject = React.createClass({
    render() {
        return (
            <NavigatorIOS
                style={styles.container}
                initialRoute={{
                    component: Alpha,
                    title: Alpha.title,
                    wrapperStyle: styles.wrapper
                }} />
        );
    },
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },
    wrapper: {
        paddingTop: 64
    }
});

AppRegistry.registerComponent('ExampleProject', () => ExampleProject);

Alpha.js

'use strict';

var React = require('react-native');
var Beta = require('./Beta');

var {
    StyleSheet,
    TouchableHighlight,
    View,
    Text
} = React;

var Alpha = React.createClass({
    statics: {
        title: 'Alpha'
    },

    goToBeta() {
        this.props.navigator.push({
            component: Beta,
            title: Beta.title,
            wrapperStyle: styles.wrapper
        });
    },

    render() {
        return (
            <View>
                <TouchableHighlight style={styles.linkWrap}
                    onPress={this.goToBeta}>
                    <Text>Go to Beta</Text>
                </TouchableHighlight>
            </View>
        );
    }
});

var styles = StyleSheet.create({
    linkWrap: {
        flex: 1,
        alignItems: 'center',
        padding: 30
    },
    wrapper: {
        paddingTop: 64
    }
});

module.exports = Alpha;

Beta.js

'use strict';

var React = require('react-native');
var Alpha = require('./Alpha');

var {
    StyleSheet,
    TouchableHighlight,
    View,
    Text
} = React;

var Beta = React.createClass({
    statics: {
        title: 'Beta'
    },

    goToAlpha() {
        this.props.navigator.push({
            component: Alpha,
            title: Alpha.title,
            wrapperStyle: styles.wrapper
        });
    },

    render() {
        return (
            <View>
                <TouchableHighlight style={styles.linkWrap}
                    onPress={this.goToAlpha}>
                    <Text>Go to Alpha</Text>
                </TouchableHighlight>
            </View>
        );
    }
});

var styles = StyleSheet.create({
    linkWrap: {
        flex: 1,
        alignItems: 'center',
        padding: 30
    },
    wrapper: {
        paddingTop: 64
    }
});

module.exports = Beta;

Answer 1

这是路由组件的常见问题。有几种方法可以解决这个问题。通常，您希望 Alpha 在 Alpha 定义其导出之前避免要求 Beta，反之亦然。

幸运的是，JavaScript 的 import和 export关键字通过使用充当间接级别的中间对象延迟导入值来解决此问题。一个具体的例子更容易理解。

与 import和 export
使用 export关键字从各自的文件中导出 Alpha 和 Beta，并使用 import关键字来导入它们:

// Alpha.js
import Beta from './Beta';

var Alpha = React.createClass({
    /* ... */
});
export default Alpha;

这是因为在运行时， export关键字创建一个中间对象(相当于 CommonJS 中的 module.exports)并分配一个名为 default 的属性其值为 Alpha .所以，以上 export声明在概念上与此类似:

module.exports.default = Alpha;

导入 Alpha 的文件会获得对中间对象的引用，而不是 Alpha 本身，直到 Alpha是直接使用的。所以这里的代码实际上是懒惰地访问了 Alpha:

import Alpha from './Alpha';

var ExampleProject = React.createClass({
    render() {
        return (
            <NavigatorIOS
                style={styles.container}
                initialRoute={{
                    component: Alpha,
                    title: Alpha.title,
                    wrapperStyle: styles.wrapper
                }}
            />
        );
    },
});

延迟访问是通过运行概念上类似于此的代码来实现的:

var AlphaExports = require('./Alpha');

var ExampleProject = React.createClass({
    render() {
        return (
            <NavigatorIOS
                style={styles.container}
                initialRoute={{
                    component: AlphaExports.default,
                    title: AlphaExports.default.title,
                    wrapperStyle: styles.wrapper
                }}
            />
        );
    },
});

与 require()
使用 CommonJS 的 require ，您还有其他一些选择:

方法一:延迟加载

在用户从一个场景导航到下一个场景之前，Alpha 和 Beta 不需要彼此。为使应用程序达到此状态，Alpha 必须已定义其导出(即 module.exports = Alpha 必须已运行，您的应用程序才能呈现 Alpha 组件)。因此，当用户导航到显示 Beta 的场景时，Beta 要求 Alpha 是安全的，因此此时要求 Beta 是安全的。

// Alpha.js
var Alpha = React.createClass({
    goToBeta() {
        // Lazily require Beta, waiting until Alpha has been initialized
        var Beta = require('./Beta');

        this.props.navigator.push({
            component: Beta,
            title: Beta.title,
            wrapperStyle: styles.wrapper
        });
    }
});

尽管在此特定场景中不需要对 Beta.js 执行相同操作，因为 Alpha 是第一个加载的组件，但最好让所有组件都以相同的方式处理依赖关系周期。

方法二:单模块

另一种解决方案是将Alpha和Beta放在同一个JS文件中，以消除模块之间的循环。然后，您将从新的巨型模块中导出这两个组件。

// AlphaBeta.js
var Alpha = React.createClass({...});
var Beta = React.createClass({...});
exports.Alpha = Alpha;
exports.Beta = Beta;

要求它:

// index.js
var {Alpha, Beta} = require('./AlphaBeta');