React生命周期（getDerivedStateFromProps，componentDidMount）

介绍

：之前的开发过程中没有遇到太多复杂的功能，所以就没有使用到react的生命周期。最近在mars3d React基础项目开发中涉及了，生命周期的使用。

一：componentDidMount

先看一下官方解释
https://zh-hans.reactjs.org/docs/react-component.html#componentdidmount

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。
这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅
你可以在 componentDidMount() 里直接调用 setState()。它将触发额外渲染，但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 render() 两次调用的情况下，用户也不会看到中间状态。请谨慎使用该模式，因为它会导致性能问题。通常，你应该在 constructor() 中初始化 state。如果你的渲染依赖于 DOM 节点的大小或位置，比如实现 modals 和 tooltips 等情况下，你可以使用此方式处理

使用场景介绍：目前场景比较简单，就是初始化的时候要渲染dom，加载数据。
当我的组件被插入到 DOM 树之后，就会执行 componentDidMount 生命周期,后面就不会再次执行这个函数。

二：getDerivedStateFromProps

在使用getDerivedStateFromProps生命周期之前我使用的是componentWillReceiveProps生命周期，但是最新的react会有警告，推荐使用getDerivedStateFromProps，具体两者的区别可以自己查阅资料了解一下。

先说一下我的使用场景：
父组件中数据发生变化，要求子组件可以监听到数据发生变化，并且将数据重新渲染。

class RoamLineList extends Component<any, any> {
  constructor(props) {
    super(props)
    this.state = {
      tableData: [], // 表格,
    }
//
demo() {
this.state.setState({
 tableData:[
      {
        id:1,
        key:1,
        name:"测试"
      }
         ]
 
})
}

  render() {
    return <RoamRoute flyData={this.state.tableData}></RoamRoute>
    }

执行demo方法向tableData中添加一条数据，在子组件中监听到。每次执行demo()方法子组件都可以通过getDerivedStateFromProps生命周期获取数据

static getDerivedStateFromProps(nextProps: any) {
    const data = nextProps.flyData
    return {
      roamLineData: [...data]
    }
  }