Question

我似乎经常遇到一个问题，我希望那里有一个我不知道的设计解决方案。

我遇到了需要从两个不同组件分发完全相同的东西的情况。通常，我会将其设置为单个函数，然后在两个组件中都调用该函数。问题是，如果我将此功能（需要props.dispatch）放在其他文件中，则该文件将无法访问props.dispatch。

例如。

class FeedScreen extends Component {
.
.
.
componentWillReceiveProps(nextProps) {
        let {appbase, navigation, auth, dispatch} = this.props

        //This is to refresh the app if it has been inactive for more
        // than the predefined amount of time
        if(nextProps.appbase.refreshState !== appbase.refreshState) {
            const navigateAction = NavigationActions.navigate({
                routeName: 'Loading',
            });

            navigation.dispatch(navigateAction);
        }
.
.
.
}
const mapStateToProps = (state) => ({
    info: state.info,
    auth: state.auth,
    appbase: state.appbase
})
export default connect(mapStateToProps)(FeedScreen)

class AboutScreen extends Component {
componentWillReceiveProps(nextProps) {
        const {appbase, navigation} = this.props

        //This is to refresh the app if it has been inactive for more
        // than the predefined amount of time
        if(nextProps.appbase.refreshState !== appbase.refreshState) {
            const navigateAction = NavigationActions.navigate({
                routeName: 'Loading',
            });

            navigation.dispatch(navigateAction);
        }
    }
} 
const mapStateToProps = (state) => ({
    info: state.info,
    auth: state.auth,
    appbase: state.appbase
})
export default connect(mapStateToProps)(AboutScreen)

看到类似的“ const navigationAction”代码块吗？将这种逻辑从组件中取出并放在一个集中位置的最佳方法是什么。

p.s。这只是这种重复的一个例子，还有其他类似情况。

Answer 1

我认为在这里（使用反应模式）消除重复的最自然的方法是使用或高阶组件或HOC。 HOC是一个函数，它将React组件作为参数并返回一个新的React组件，并使用一些附加逻辑包装原始组件。

对于您来说，它看起来像：

const loadingAwareHOC = WrappedComponent => class extends Component {
  componentWillReceiveProps() {
    // your logic
  }

  render() {
    return <WrappedComponent {...this.props} />;
  }
}

const LoadingAwareAboutScreen = loadingAwareHOC(AboutScreen);

全文详细解释： https://medium.com/@bosung90/use-higher-order-component-in-react-native-df44e634e860

在这种情况下，您的HOC将成为连接的组件，并将道具从redux状态传递到包装的组件中。

btw：componentWillReceiveProps为deprecated。文档告诉您如何补救。

常见的违反DRY原则的React Native / Redux

1 个答案: