1. react 生命周期

组件的生命周期大致分为三大部分 组件挂载阶段 组件更新阶段 组件卸载阶段

2. 挂载组件阶段

• 组件被创建然后插入到 DOM 中
• 生命周期方法
  • constructor：设置组件的的管理状态，设置初始配置
  • render：渲染组件需要调用的方法
  • componentDidMount：组件挂载完成后的操作
    • 发送网络请求
    • 添加定时器
    • 添加事件监听
    • 获取DOM元素

import React, {Component} from 'react'

class App extends Component {
  constructor () {
    super()
    this.state = {
        count: 0
    }
    console.log('constructor执行了');
    this.handle = this.handele.bind(this)
  }
  handle() {
    console.log(this)
  }
  render () {
    console.log('render执行了');
    return (
      <div>组件挂在{count}</div>
    )
  }
  componentDidMount () {
    console.log('挂在完成')
  }
}

export default App;

3. 组件更新阶段

• 什么是更新组件
  • 更新组件阶段，当数据发生改变时，组件会被重新渲染
  • 外部数据和自身的数据
• 常用方法
  • shouldComponentUpdate（nextProps，nextState）
    参数跟新后的数据返回布尔值
    返回true就是当前组件更新；false不更新，后续的方法不执行
    默认是true
  • render
    解析JSX 再渲染DOM
  • componentDidUpdate
    更新之后执行
• PureComponent // 不更新不渲染

// app.js
import React, {Component} from 'react'
import About from './about'

class App extends Component {
  constructor () {
    super()
    this.state = {
      count: 0
    }
    console.log('constructor执行了');
  }
  render () {
    console.log('render执行了');
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={() => {this.setState({count: this.state.count + 5})}}>点击</button>
        <hr />
        <About {...this.state} />
      </div>
    )
  }
  componentDidMount () {
    console.log('挂在完成')
  }
  shouldComponentUpdate () {
    console.log('更新');
    return true
  }
  componentDidUpdate () {
    console.log('更新已完成 ');
  }
}

export default App;

// about.js
import React, {Component} from 'react'

class About extends Component {
    constructor () {
        super()
        console.log();
        this.state = {
            count: 10
        }
    }
    render () {
        console.log('渲染');
        return (
            <>
                <div>这是about 组件</div>
                <p>{this.state.count}</p>
            </>
        )
    }
    componentDidUpdate () {
        console.log('更新以后');
    }
    shouldComponentUpdate (nextP, nextV) {
        if (nextV.count === this.state.count) {
            return false
        }
        console.log('在更新')
        return true
    }
}
export default About

4. 组件卸载阶段

• 触发组件卸载的条件有两个
  组件是否显示
  界面跳转
• 触发的方法是componentWillUnmount（）

import React, {Component} from 'react'

class About extends Component {
    constructor (props) {
        super(props)
        console.log(this.props);
        this.state = {
            count: this.props.count
        }
    }
    render () {
        console.log('渲染');
        return (
            <>
                <div>这是about 组件</div>
                <p>{this.state.count}</p>
            </>
        )
    }
    componentDidMount () {
        console.log('（装载完成），在render之后调用');
    }
    componentDidUpdate () {
        console.log('更新以后');
    }
    shouldComponentUpdate (nextP, nextV) {
        if (nextP.count === this.state.count) {
            return false
        }
        this.setState({})
        console.log('在更新')
        return true
    }
    componentWillUnmount () {
        console.log('触发了卸载');
    }
}
export default About

5. 出发顺序

• 加载时
  constructor
  componentWillMount
  render
  componentDidMount
• 更新时
  shouldComponentUpdate
  render
  componentDidUpdate
• 卸载
  componentUnmount

转载于 zhuanlan.zhihu.com/p/367438889