reactjs - React Redux - 通过 props 或 connect 将数据传递给组件

Question

我正在开发 React Redux 应用程序，我对某种最佳实践有一些非常基本的问题。

我有 MainComponent (一种容器)，我在 componentDidMount 上获取数据:

class MainComponent extends React.Component {
  componentDidMount(){
    this.fetchData()
  }
  fetchData() {
    this.props.fetchDataAction()
  }
  render() {
    return (
      <div>
        <ChildComponent1 />
        <ChildComponent2 />
      </div>
    )
  }
}
export default connect(mapStateToProps,{fetchDataAction})(MainComponent)

如何将获取的数据传递给ChildComponents？最佳做法是什么？两种可能的解决方案是(恕我直言 - 也许更多？)

第一个解决方案:

class MainComponent extends React.Component {
...
render() {
  return (
    <div>
      <ChildComponent1 dataOne={this.props.data.one} />
      <ChildComponent2 dataTwo={this.props.data.two} />
    </div>
  )
}
...

第二种解决方案 - 连接 ChildComponents 来存储由 MainComponent 中的 fetchDataAction() 更新的内容:

class ChildComponent1 extends React.Component {
  render() {
    return (
      <div>
        {this.props.one}
      </div>
    )
  }
}
function mapStateToProps(state){
  return (
    one: state.one
  )
}
export default connect(mapStateToProps,null)(ChildComponent1)

现在，当 ChildComponents 不触发更新存储的操作时，我使用第一个解决方案，而当它们执行时，我使用第二个解决方案。但我不确定这是否是正确的方法。

Answer 1

如果您有多个子组件，并且您必须将获取的部分数据传递给不同的子组件；我建议将父组件保留为单点源。

您可以尝试以下操作:-

class MainComponent extends React.Component {

  constructor(){
     super()
     this.state = {
       data  : {}
     }
  }

  componentDidMount(){
    this.fetchData()
  }
  fetchData() {
    this.props.fetchDataAction()
  }

  componentWillReceiveProps(nextProps){
    //once your data is fetched your nextProps would be updated
     if(nextProps.data != this.props.data && nextProps.data.length>0){
        //sets your state with you data--> render is called again
        this.setState({data:nextProps.data}) 
  }
  render() {
    //return null if not data
    if(this.state.data.length === 0){
         return null
    }
    return (
      // it should have keys as one and two in api response
      <div>
        <ChildComponent1 data={data.one}/>
        <ChildComponent2 data={data.two}/>
      </div>
    )
  }
}

function mapStateToProps(state){
  return (
    data: state
  )
}
export default connect(mapStateToProps,{fetchDataAction})(MainComponent)

我觉得所有的逻辑都集中在一个地方。假设将来你打算添加更多的子组件，你只需要在上面添加一行代码，并且对 API 进行很少的更改。但是，如果您读取每个组件，则必须连接该组件以再次存储，这会使它变得更加复杂。

因此，如果您的子组件中除了获取数据之外没有任何其他逻辑，我会将此逻辑保留在父组件中。