Question

首先，我说我对React还是很陌生，只是在让各个组件相互交互...试图了解state的归属和最有效的方法（ s）在屏幕上呈现更改。

我有两个同级组件Bro和Sis，它们是Dad的直接子级。 Bro在componentWillMount中发出HTTP请求以获取其state的初始值。然后，它将来自响应（uid）的数据片段之一传递回Dad（通过Dad中定义的方法），然后向下传递给Sis通过props。 Sis然后使用此值发出 ITS 初始HTTP请求（在componentDidUpdate中）以填充 ITS state。

爸爸

class Dad extends Component {
  state = {
    uid: null
  }
  updateUID = id => {
    this.setState({uid: id});
  }
}

render() {
  return (
    <>
      <Bro />
      <Sis update={this.updateUID} />
   </>
  );
}

姐姐

class Sis extends Component {
  state = {
    uid: null,
    something: null,
    another: null
  }

  componentDidUpdate() {
    axios.get('example.com/endpoint2.json')
      .then(res => {
        /* 
          transform as needed and put the vales from 
          res.data into this.state accordingly...
        */
      });
  }

  render () {
    return <section>Component: Sis</section>;
  }
}

兄弟

class Bro extends Component {
  state = {
    uid: null,
    blah: null,
    blah-blah: null
  }

  componentWillUpdate() {
    axios.get('example.com/endpoint1.json')
      .then(res => {
        /* 
          ...
          transform as needed and put the vales from 
          res.data into this.state accordingly...
        */

        // pass uid back up to Dad to be passed down to Sis
        this.props.update(res.data.uid);
      });
  }

  render () {
    return <section>Component: Bro</section>;
  }
}

此Bro-> Dad-> Sis传递数据是正确的方法吗？对我来说，这似乎有点慢，而且可能不必要地复杂。我可以想到的替代方法是：

已Sis在componentWillMount中发出其初始HTTP请求，并自行获取uid的值。这样就无需将其从一个孩子传递给父母，再传递给另一个孩子，但这将涉及后端的部分冗余查询，这就是为什么我选择不采用这种方式。
已Dad发出一个HTTP请求，该请求执行1个组合查询以返回Bro和Sis所需的数据并将其分别传递给每个数据。就目前而言，Dad并不总是显示Bro和Sis（取决于route）。在那种情况下，这将是一个无用的HTTP请求，因此绝对不正确，但是我在想一些重组可能会使此方法可行。也许将Dad嵌套在类似Grandpa的地方，让Grandpa负责路由，而Dad则获取Bro和Sis的数据。 / li>

所以我想最终我的问题是：我应该通过子组件/相邻组件/兄弟组件之间的父组件传递数据，还是父组件应该是两个子组件的数据源，并分别传递给每个子组件？ / p>

Answer 1

首先，您不应该在componentWillMount()中调用HTTP请求。而是按照React docs

中的说明在componentDidMount()中这样做

您的方法完全正确。但是，根据容器/表示（智能/转储）组件策略，最好在<Dad />组件中进行所有数据提取，然后将所需的数据传递给子代。这样，跟踪您的请求会容易得多，而且您的数据也不会分散。

一种替代方法是使用Redux或Mobx State Tree之类的第三方库。我不确定Mobx，但是Redux所做的是将状态保留在组件之外，并通过React上下文提供给整个应用程序使用。您应该考虑使用它，因为它非常强大且易于学习

最后但并非最不重要的一点，我将在此处包括有关容器/表示组件模式的几篇文章：

From Dan Abramov-Redux的创建者
Another medium post

反应-在组件之间共享数据的最有效方法

1 个答案: