React学习笔记2---生命周期

Half 发布于2019-08-23 15:13 / 1341人阅读

摘要：生命周期函数指在某一个时刻组件会自动调用执行的函数，的生命周期函数主要有初始化挂载更新卸载父组件在组件即将被挂载到页面的时刻自动执行，挂载完毕不再执行组件被挂载到页面之后，自动被执行，挂载完毕不再执行组件被更新之前，自动被执行组件被更新之前

生命周期函数指在某一个时刻组件会自动调用执行的函数，React的生命周期函数主要有

Initialization(初始化）

Mounting(挂载）

Updation(更新）

Unmounting(卸载）

父组件

  // 在组件即将被挂载到页面的时刻自动执行，挂载完毕不再执行
  componentWillMount() {
    console.log("componentWillMount")
  }
   render() {
    console.log("parent render");
    return //JSX
  }
// 组件被挂载到页面之后，自动被执行，挂载完毕不再执行
  componentDidMount() {
    console.log("componentDidMount")
  }

  // 组件被更新之前，自动被执行
  shouldComponentUpdate() {
    console.log("shouldComponentUpdate")
    return true;
  }

  // 组件被更新之前，它会自动执行，但是它在shouldComponentUpdate之后执行
  // 如果shouldComponentUpdate返回true它才执行
  // 返回false，这个函数就不会被执行了
  componentWillUpdate() {
    console.log("componentWillUpdate")
  }

  // 组件更新完成之后自动被执行
  componentDidUpdate() {
    console.log("componentDidUpdate")
  }

子组件

  // 一个组件从父组件接收了参数
  // 如果这个组件第一次存在于父组件中，不会执行
  // 如果这个组件之前已经存在于父组件中，才会执行
  componentWillReceiveProps() {
    console.log("child componentWillReceiveProps")
  }

  // 当这个组件即将被从页面中剔除的时候，会被执行
  componentWillUnmount() {
    console.log("child componentWillUnmount")
  }

GPU云服务器云服务器生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101693.html

React学习笔记2---生命周期

摘要：生命周期函数指在某一个时刻组件会自动调用执行的函数，的生命周期函数主要有初始化挂载更新卸载父组件在组件即将被挂载到页面的时刻自动执行，挂载完毕不再执行组件被挂载到页面之后，自动被执行，挂载完毕不再执行组件被更新之前，自动被执行组件被更新之前生命周期函数指在某一个时刻组件会自动调用执行的函数，React的生命周期函数主要有 Initialization(初始化） Mounting(挂...

陈伟 2019-08-30 15:55 评论0 收藏0
React学习笔记2---生命周期

摘要：生命周期函数指在某一个时刻组件会自动调用执行的函数，的生命周期函数主要有初始化挂载更新卸载父组件在组件即将被挂载到页面的时刻自动执行，挂载完毕不再执行组件被挂载到页面之后，自动被执行，挂载完毕不再执行组件被更新之前，自动被执行组件被更新之前生命周期函数指在某一个时刻组件会自动调用执行的函数，React的生命周期函数主要有 Initialization(初始化） Mounting(挂...

周国辉 2019-08-02 14:15 评论0 收藏0
《深入react技术栈》学习笔记（二）初入React世界

摘要：用于规范的类型与必需的状态。表示由组件更改的数据，通常是通过与用户的交互来更改的。为了实现的修改，需要注册事件处理程序到相应的元素上。当事件发生时，将更新后的值是从中检索，并通知组件。通常情况下，该函数初始化状态使用，，或其他数据存储。前言上一篇文章中，我们讲到了JSX的一些用法和注意事项，这次我们来讲react中最基础也是特别重要的内容：组件。这篇文章包含组件的以下内容：状态、属...

MRZYD 2019-08-20 14:47 评论0 收藏0
React学习笔记—虚拟DOM

摘要：虚拟之所以快，是因为它不直接操作。此外，实现了一套完整的事件合成机制，能够保持事件冒泡的一致性，跨浏览器执行。大部分情况下，我们都是在构建的组件，也就是操作虚拟。例如就表示组件被插入之前。组件更新后执行组件被移除前执行获取真实的强制更新 React对底层的代码作了封装，在大多数情况下，我们不需要直接去操作DOM。但是有时候我们还是需要使用到底层的代码的，比如输入框获取焦点，这个时候可以...

Tonny 2019-08-22 10:56 评论0 收藏0