react 组件的生命周期

 

 

 

组件生命周期函数总览

• 组件的生命周期包含三个阶段：建立阶段（Mounting）、运行和交互阶段（Updating）、卸载阶段（Unmounting）
• Mounting：

constructor() 
componentWillMount() 
render() 
componentDidMount()

• Updating

componentWillReceiveProps() 
shouldComponentUpdate() 
componentWillUpdate() 
render() 
componentDidUpdate()

• Unmounting

componentWillUnmount()

组件生命周期 - 建立阶段(Mounting)

• 特色：该阶段的函数只执行一次

constructor()

• 做用：1 获取props 2 初始化state
• 说明：经过 constructor() 的参数props获取
• 设置state和props

 

componentWillMount()

• 说明：组件被挂载到页面以前调用，其在render()以前被调用，所以在这方法里同步地设置状态将不会触发重渲染
• 注意：没法获取页面中的DOM对象
• 注意：能够调用 setState() 方法来改变状态值
• 用途：发送ajax请求获取数据

render()

• 做用：渲染组件到页面中，没法获取页面中的DOM对象

• 注意：不要在render方法中调用 setState() 方法，不然会递归渲染

  • 缘由说明：状态改变会从新调用render()，render()又从新改变状态

 

componentDidMount()

• 1 组件已经挂载到页面中
• 2 能够进行DOM操做，好比：获取到组件内部的DOM对象
• 3 能够发送请求获取数据
• 4 能够经过 setState() 修改状态的值
• 注意：在这里修改状态会从新渲染

componentDidMount() {
  // 此时，就能够获取到组件内部的DOM对象 console.warn('componentDidMount', document.getElementById('btn')) }

 

组件生命周期 - 运行阶段（Updating）

• 特色：该阶段的函数执行屡次
• 说明：每当组件的props或者state改变的时候，都会触发运行阶段的函数

 

componentWillReceiveProps()

• 说明：组件接受到新的props前触发这个方法
• 参数：当前组件props值
• 能够经过 this.props 获取到上一次的值
• 使用：若你须要响应属性的改变，能够经过对比this.props和nextProps并在该方法中使用this.setState()处理状态改变
• 注意：修改state不会触发该方法

 

componentWillReceiveProps(nextProps) {
  console.warn('componentWillReceiveProps', nextProps) }

shouldComponentUpdate()

• 做用：根据这个方法的返回值决定是否从新渲染组件，返回true从新渲染，不然不渲染
• 优点：经过某个条件渲染组件，下降组件渲染频率，提高组件性能
• 说明：若是返回值为false，那么，后续render()方法不会被调用
• 注意：这个方法必须返回布尔值！！！
• 场景：根据随机数决定是否渲染组件

 

// - 参数： // - 第一个参数：最新属性对象 // - 第二个参数：最新状态对象 shouldComponentUpdate(nextProps, nextState) { console.warn('shouldComponentUpdate', nextProps, nextState) return nextState.count % 2 === 0 }

componentWillUpdate()

• 做用：组件将要更新
• 参数：最新的属性和状态对象
• 注意：不能修改状态 不然会循环渲染

render() 渲染

• 做用：从新渲染组件，与Mounting阶段的render是同一个函数
• 注意：这个函数可以执行屡次，只要组件的属性或状态改变了，这个方法就会从新执行

componentDidUpdate()

• 做用：组件已经被更新
• 参数：旧的属性和状态对象

组件生命周期 - 卸载阶段（Unmounting）

• 组件销毁阶段：组件卸载期间，函数比较单一，只有一个函数，这个函数也有一个显著的特色：组件一生只能执行依次！
• 使用说明：只要组件再也不被渲染到页面中，那么这个方法就会被调用（ 渲染到页面中 -> 再也不渲染到页面中 ）

componentWillUnmount()

• 做用：在卸载组件的时候，执行清理工做，好比

  • 1 清除定时器
  • 2 清除componentDidMount建立的DOM对象