父组件刷新页面，子组件监听父组件更新状态，连带刷新页面（父组件全局刷新子组件，状态管理模式）

class Children extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childrenList: []
    }
  }
  componentDidMount(){
    this.getData()
  }

  // 这个生命周期是重点， 传入父组件的更新状态，子组件监听该状态的变化，从而触发子组件刷新列表
  componentWillUpdate(nextProps, nextState) {
    // 这里的(nextProps.fatherList !== this.props.fatherList)，并不一定要fatherList，
    // 可以遐想创建一个 update = {}， 也是可以的， 在父组件需要连带更新子组件的时候， 
    // this.setState({update:{} })，就可以了。
    if (nextProps.fatherList !== this.props.fatherList) {
      this.getData()
    }
  }
  getData= async ()=>{
    const getRandom = () =>Math.floor(Math.random()*10);
    const RandomArr = Array(3).fill(1).map(()=>getRandom())

    Promise.resolve(RandomArr).then((res)=>{
      this.setState({childrenList:res})
    })
  }
  render() {
    console.log("childrenList",this.state.childrenList)
    return <div>
      {this.state.childrenList.map((text) => (<ol  key={Math.random()}>{text}</ol>))}
  </div>
  }
}

class Father extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fatherList: []
    }
  }
  componentDidMount(){
    this.getData()
  }
  getData= async ()=>{
    const getRandom = () =>Math.floor(Math.random()*10);
    const RandomArr = Array(3).fill(1).map(()=>getRandom())

    Promise.resolve(RandomArr).then((res)=>{
      this.setState({fatherList:res})
    })
  }
  render() {
    return <div>
      {this.state.fatherList.map((text) => (<ul key={Math.random()}>{text}</ul>))}
      <button onClick={()=>{this.getData()}}>变更</button>
      <hr/>
      <Children fatherList={this.state.fatherList}/>
    </div>
  }
}