react 生命周期-入门到精通

IT小镇做题家
115 阅读4分钟

react 生命周期

组件的生命周期

组件的生命周期.png

  • 简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期

组件生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！

组件生命周期函数总览

  • 说明：通过 Counter计数器的小案例，理解组件的生命周期函数基本使用
  • 组件的生命周期包含三个阶段：创建阶段（Mounting）、运行和交互阶段（Updating）、卸载阶段（Unmounting）

生命周期明细表格.png

  • Mounting：

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

  • Updating

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

  • Unmounting

    componentWillUnmount()

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

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

constructor()

  • 作用：1 获取 props 2 初始化 state
  • 说明：通过 constructor() 的参数props获取
  • 设置 state 和 props
class Greeting extends React.Component {
  constructor(props) {
    // 获取 props
    super(props)
    // 初始化 state
    this.state = {
      count: props.initCount
    }
  }
}

// 初始化 props
// 语法：通过静态属性 defaultProps 来初始化props
Greeting.defaultProps = {
  initCount: 0
}

componentWillMount()

  • 说明：组件被挂载到页面之前调用，其在 render()之前被调用，因此在这方法里同步地设置状态将不会触发重渲染
  • 说明：1 可以调用 setState() 方法来改变状态值
  • 注意：2 无法获取页面中的 DOM 对象
componentWillMount() {
  console.warn(document.getElementById('btn')) // null
  this.setState({
    count: this.state.count + 1
  })
}

render()

  • 作用：渲染组件到页面中，无法获取页面中的 DOM 对象
  • 注意：不要在 render 方法中调用 setState() 方法，否则会递归渲染
    • 原因说明：状态改变会重新调用render()，render()又重新改变状态
render() {
  console.warn(document.getElementById('btn')) // null

  return (
    <div>
      <button id="btn" onClick={this.handleAdd}>打豆豆一次</button>
      {
        this.state.count === 4
        ? null
        : <CounterChild initCount={this.state.count}></CounterChild>
      }
    </div>
  )
}

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()

  • 作用：组件将要更新
  • 参数：最新的属性和状态对象
componentWillUpdate(nextProps, nextState) {
  console.warn('componentWillUpdate', nextProps, nextState)
}

render() 渲染

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

componentDidUpdate()

  • 作用：组件已经被更新
  • 参数：旧的属性和状态对象
componentDidUpdate(prevProps, prevState) {
  console.warn('componentDidUpdate', prevProps, prevState)
}

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

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

componentWillUnmount()

  • 作用：在卸载组件的时候，执行清理工作，比如
    • 1 清除定时器
    • 2 清除componentDidMount创建的 DOM 对象
avatar
文章
阅读
粉丝