组件自刷新

在完成一个通讯录树形结构的组件时，设计它的数据来源是自身调用接口，在点击确定之后将组装好的数据传回到父组件，通过调用父组件传入的方法。但是父组件那也有一个通讯录组件，且这个通讯录是可以编辑的，这样当调用子组件通讯录之后只要render过，该子组件就不会刷新数据，这样我们取到的数据永远是第一次调用接口得到的。如此一来，就存在一个问题，父组件如果修改了通讯录组件，那子组件的数据就不是最新的组件，怎样去保证通讯录组件数据始终是最新的呢？我们能想到的就是子组件被父组件提醒，告知我应该要刷新数据了。

• 解决方案一：
  现在的问题是父组件可能修改了，但是子组件不知道修改了，如果子组件的数据是来源于父组件，这样就能保证数据统一了。但是这样就使得子组件独立性太差，不可取。
• 解决方案二：
  image.png
  React官网有一张图片是讲的react生命周期，这里有一个解析父组件props刷新时会触发的lifecycle，componentWillReceiveProps，在这里，它会有一个nextProps参数，我们可以由父组件传入的props里定义一个变量，在子组件里的componentWillReceiveProps生命周期内进行一下判断，重新调用接口刷新子组件的数据。

解决独立子组件数据刷新问题，我觉得通常都可以用这种方法去实现，只是要切记，react是推崇数据父到子单向流动的，如果父要改变子的状态，还是要采用常规的props或是onRef。