react组件挂载了解

react组件挂载

• 概念
  将组件渲染，并构建DOM元素然后插入页面的过程

• 组件内部在挂载是进行的过程

  ——constructor #初始化组件
  ——render()  # 挂载
  ——构建DOM元素插入页面
  

• 再进行挂载过程中还有一些具体的过程

  ——constructor #初始化组件
  ——componentWillMount() #在组件插入页面之前进行
  ——render() #挂载
  ——构建DOM元素插入页面
  ——componentDidMount #在组件插入后进行
  ——从页面删除DOM
  ——componentWillUnmount()
  

  其中，我们一些组件的启动动作，如Ajax数据拉取操作、一些定时器的启动，都可以在componentWillMount()函数中进行。数组从页面中销毁时，有时候需要一些数据的清理，例如，定时器清理等，就会放到componentWillUnmount()函数中去处理。

  //启动定时器
  componentWillMount(){
      this.timer = setInterval(() => {
          this.setState({
              date: new Date()
          });
      }, 1000)
  }
  
  //清除定时器
  componentWillUnmount () {
      clearInterval(this.timer);
  }  
  

• 补充
  有时候，有些组件的启动工作是依赖 DOM 的，例如动画的启动，而 componentWillMount 函数调用是在组件挂载完成之前，所以没法进行有些启动工作，这时候就可以把这些操作放在 componentDidMount 当中。