您现在的位置:首页 >> 前端 >> 内容

react组件挂载了解

时间:2017/9/5 10:03:00 点击:

  核心提示:react组件挂载概念将组件渲染,并构建DOM元素然后插入页面的过程组件内部在挂载是进行的过程constructor #初始化组件render()# 挂载构建DOM元素插入页面再进行挂载过程中还有一些...

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 当中。

Tags:RE EA AC CT 
作者:网络 来源:宝宝是个小气鬼i