Question

我发现拥有一个React组件的大型层次结构非常典型，每个组件都有自己的依赖关系作为道具向下传递。

由于这些依赖关系，更高级别的组件通常需要提供大量的道具：

'use strict';

var React = require('react');
var ComponentB = require('./ComponentB');
var ComponentC = require('./ComponentC');

class ComponentA extends React.Component {
    render() {
        return (
            <div>
                <ComponentB
                    dependencyA={this.props.dependencyA}
                    dependencyB={this.props.dependencyB}
                    dependencyC={this.props.dependencyC}
                    .../>

                <ComponentC
                    dependencyD={this.props.dependencyD}
                    dependencyE={this.props.dependencyE}
                    dependencyF={this.props.dependencyF}
                    .../>
            </div>
        );
    }
}

ComponentA.propTypes = {
    dependencyA: React.PropTypes.object,
    dependencyB: React.PropTypes.object,
    dependencyC: React.PropTypes.object,
    dependencyD: React.PropTypes.object,
    dependencyE: React.PropTypes.object,
    dependencyF: React.PropTypes.object,
    //... x10
};

module.exports = ComponentA;

现在我正在使用Redux，这个问题进一步恶化了。必须传递层次结构中使用的任何全局状态或actionCreator。

在后端世界中，构造函数过度注入是单一责任主体被违反的标志。这通常由refactoring to aggregating services确定。在React-world中，这并不能解决问题，因为任何聚合组件仍然需要在层次结构中传递它们的依赖关系。在任何情况下，我都不相信SRP在表象背景下是有意义的。

我认为其中一个问题是从Container传递actionCreators的要求。

'use strict';

var { bindActionCreators } = require('redux');
var { connect } = require('react-redux');
var { dependencyC, dependencyD, dependencyE, ... } = require('../actions');
var ComponentA = require('../components/ComponentA');

// I understand why this is important
const mapStateToProps = (state) => {
    return {
        dependencyA: state.dependencyA,
        dependencyB: state.dependencyB
    };
}

// ... but not why this is important
const mapDispatchToProps = (dispatch) => {
    return Object.assign({}, bindActionCreators({ dependencyC, dependencyD, dependencyE, ... }, dispatch), { dispatch });
}

module.exports = connect(mapStateToProps, mapDispatchToProps)(ComponentA);

为什么不能通过require添加这些？我理解为什么通过props传递状态很重要 - 这种状态会发生变化并导致组件被重新渲染。作为道具传递的函数看起来像非常很少动态更改。

是的我知道{...this.props}但我不喜欢我将依赖关系传递给不需要它的组件这一事实。也许我只需要克服这一点，但我想首先检查一下这是常见的最佳实践。

有什么办法可以避免React组件过度注入吗？

如何处理React组件中的过量注入

0 个答案: