React component 之间传值的问题

Question

需求：
现在有两个 component ，一个是 parent，一个是 child，在 parent component 中，我需要发送一个请求获取到数据，然后我需要把数据传递给 child component， child component 在拿到数据后再去根据传递过来的数据发送请求。

尝试的方法：
在 parent component 的 componentDidMount 方法中发送请求，然后在 render 中把请求的 props 数据传递给 child component，child component 在 componentDidMount 中在去接收传递过来的数据进行请求数据，结果发现并不能得到想要的结果。原因是：
当 parent render 之后，接着 child 就会 render，然后 child componentDidMount 就会被调用，最后才会调用 parent componentDidMount，那么我在 parent 中拿到数据后 re-render，在 child 不会再次调用 componentDidMount了（componentDidMount 只会执行一次）

请问有其它的方法可以实现这个需求吗？

Answer 1

谢邀！
首先React组件一般分为容器组件和展示组件，这两者到底有什么区别呢？
展示组件通常被实现为无状态功能组件(stateless functional components)，也就是说它们没有内部状态，只是负责把获取到的数据渲染出来，因为它不知道获取到的数据是什么样的，不知道props和state的变化，它永远不应该改变props中的数据。实际上，任何的组件从父级得到的props都是不可变化的。

而容器组件知道数据，知道数据的形态以及数据从何而来，所以它们负责处理业务逻辑，它们接收信息并对其进行格式化，以便由展示组件简单地使用。一般情况，“容器组件”总是作为可视化组件的父级组件出现！

当然，凡事都没有绝对性！您也可以在展示组件处理业务逻辑，相比之下展示组件负责渲染数据更合理些！好了，废话不说了，就问题而言大致有两种处理思路：

第一种：在child component 声明周期函数componentWillReceiveProps内监听nextProps，执行余下操作。

第二种：所有请求都在父组件完成，获取到最终的数据，然后通过props传递给子类。至于两个请求依赖关系，es6之前普通ajax，我们要层层嵌套回调，es6我们可以直接用Promise，Promise优点就是多重链式调用，可以避免层层嵌套回调

Answer 2

子组件componentWillReceiveProps方法内监听你的 props更新，执行相应操作。

Answer 3

理一下

1. parent Container请求数据
2. parent Container 获取到数据，自然会做数据处理，然后rerender
3. child 接收到parent传递的数据
4. child根据接受到的数据进行请求。
5. child的请求回来rerender

首先表明，为什么将请求放入componentDidMount？

什么情况下将请求放入componentDidMount？

正如你了解的，componentDidMount只走一下，这一次是你通过ReactDom.render，也就是Virtual Dom 落实到真实dom之后走的，适合什么样的请求呢？ 适合页面初始化的请求，而且不依赖回调数据，好处是什么呢，请求干净利落，仅仅用来做界面的初始化动作，但更经常放入componentWillMount

一旦涉及到，依赖回调数据（比如你这里parent Container请求到的数据传递过来的情况），那么你应该将你的请求放入一个可以重复调用的声明周期中,类似什么？

componentWillReceiveProps中，这个监听props改变，这里可以监听parentContainer传入的props，然后这里可以根据传入的props进行传入请求。

Answer 4

parent在componentWillMount的时候去请求数据，可以把数据用this.data = xxx;或者this.setState({data:xxx})保存
parent在render的时候获取设置的数据，然后传递给child
child在componentWillMount获取传递下来的数据，然后去请求数据，请求成功，可以把数据用this.data = xxx;或者this.setState({data:xxx})保存
child在render的时候渲染出来请求的数据就可以了。
或者直接在render时获取数据，请求数据一起进行，不用生命周期也可以做。不过如果是异步的话感觉上不太好。比如用axios，一般是在then(data=>{xxx})后才获取得到数据，而此操作是异步的

Answer 5

1、parent组件中在componentDidMount中通过ajax获取数据，同时利用setState将数据变化更新到本身的state中。
2、在parent组件中用state作为child组件的props，进行数据的传递
3、child组件中componentWillReceiveProps监听数据更新实现child组件中的二次请求