React核心之简述生命周期

一张ES6中的React生命周期与流程图

生命周期分为三个阶段进行管理—挂载(MOUNTING)、渲染(RECEIVE_PROPS)、卸载(UNMOUNTING)

对应的方法分别是：mountComponent、componentUpdate、unmountComponent,每个方法都提供了几种处理方法，其中带will前缀的方法在进入状态之前调用，带did的在进入状态之后调用

  • 阶段一：MOUNTING:

    1. constructor
    2. componentWillMount
    3. render
    4. componentDidMount

  • 阶段二：RECEIVE_PROPS

    1. componentWillReceiveProps
    2. shouldComponentUpdate
    3. componentWillUpdate
    4. render
    5. componentDidUpdate

  • 阶段三：UNMOUNTING

    1. componentWillUnmount

常见问题

  1. 在生命周期哪个方法里调用setState机制能触发render函数重新渲染？

    componentDidMount()、render()和componentDidUpdate()

  2. shouldComponentUpdate作用是啥以及为何他这么重要？

    shouldComponentUpdate允许我们手动判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值能
    够帮助我们性能优化，避免不必要的更新。

  3. 禁止在shouldComponentUpdate和componentWillUpdate中调用setState，这样的话会造成循环调用，直至耗尽浏览器内存后崩溃

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

有实力才有话语权！