React生命周期函数详解

原创 2018年04月16日 13:56:30

React生命周期函数详解

React的生命周期主要有3个过程

  • 装载过程 Mount 组件第一次在DOM中渲染
  • 更新过程 Update 组件重新渲染
  • 卸载过程 UnMount 组件从DOM中移除

装载过程

  • constructor

    初始化,绑定this

  • getInitialState (React.createClass)

    初始化state

  • getDefaultProps (React.createClass)

    初始化props

  • componentWillMount

    很少使用这个,因为这里setState也不会导致重新渲染,这里的事情可以在构造函数中完成

  • render

    render应该是一个纯函数,完全根据state和props来决定返回结果,而不产生副作用,所以render中调用setState是错的,因为纯函数不应该引起状态的改变

  • componentDidMount

    这个函数调用的时候render函数已经把JSX渲染好了,一般来说我们的请求都是在这个函数中来调用

更新过程

  • componentWillReceiveProps

    只要是父组件的render函数被调用,在render里渲染的子组件就会经历更新过程,不管父组件传递给子组件的props有没有改变,都会触发componentWillReceiveProps

  • shouldComponentUpdate

    应该是除了render之外最重要的函数了。它决定了一个组件什么时候需不需要渲染。
    render和shouldComponentUpdate是React中唯二需要有返回值的函数,shouldComponentUpdate返回一个布尔值,告诉React是否需要继续更新,若为true则继续,为false则停止更新,不会触发之后的重新渲染

  • componentwillUpdate

    即将render的时候执行

  • render
  • componentDisUpdate
    组件渲染完毕后执行

卸载过程

  • componentWillUnmount

浅析React生命周期函数的使用

1.constructor():构造函数 执行时间:组件被加载前最先调用,并且仅调用一次作用:定义状态机变量注意:第一个语句必须是super(props),正确定义状态机代码如下 cons...
  • zrcj0706
  • zrcj0706
  • 2017-11-22 22:16:04
  • 1914

React生命周期函数

《React与Redux开发实例精解》 componentWillMount:在渲染前调用 componentDidMount:在第一次渲染后调用 componentWillRecei...
  • abld99
  • abld99
  • 2017-07-03 11:26:20
  • 610

react-生命周期函数

react生命周期分为三个阶段1. Mounting 组件初始化 constructor()一般把组件的 state 的初始化工作放在 constructor 里面去做。 getDefault...
  • JOY_LiuLiu
  • JOY_LiuLiu
  • 2017-09-21 14:44:08
  • 171

React生命周期调用函数介绍

React生命周期调用函数介绍 /** * Created by xieyuhai on 17/6/5. */ var MainComponent = React.createClass...
  • u010945409
  • u010945409
  • 2017-06-06 09:19:35
  • 941

React生命周期及事件详解

一、组件的详细说明和生命周期ComponentSpecs and Lifecycle) 组件的详细说明(Component Specifications) 当通过调用 React.createCl...
  • limm33
  • limm33
  • 2016-03-21 10:01:31
  • 25221

ReactJS组件生命周期详述

前面已经写了一篇关于reactJS组件生命周期的博文,此篇博文是一个补充,增加了一些例子,有助于更好的理解reactJS组件。 初始化阶段能够使用的钩子函数(按照触发顺序): getDefault...
  • liuyan19891230
  • liuyan19891230
  • 2016-04-06 10:25:45
  • 4507

常用生命周期函数总结

//只要挂载脚本不管脚本有没有激活都能被调用     //在编辑在状态下被调用 是生命周期函数最早执行的     void Reset()     {         transform.positi...
  • qq_39736751
  • qq_39736751
  • 2017-08-25 17:24:22
  • 203

深入浅出React+Redux(二:React 组件的生命周期)

前言 如同人有生老病死 , 自然界有日月更替,每个组件在网页中也会被创建、更新和删除,如同有生命的机体一样 。 React 严格定义了组件的生命周期,生命周期可能会经历如下三个过程: 装载过程...
  • u010377383
  • u010377383
  • 2018-01-16 15:20:25
  • 74

vue---生命周期函数

vue中所有的钩子函数: beforeCreate(创建前) created(创建后) beforeMount(载入前) mounted(载入后) beforeUpdate(更新前) updated(...
  • Yana_li
  • Yana_li
  • 2017-12-12 11:25:13
  • 1404

React Native组件生命周期

概述所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点。就像 Android 开发中组件 一样,React Native的组件也有生命周期(L...
  • xiangzhihong8
  • xiangzhihong8
  • 2017-01-08 23:11:16
  • 3458
收藏助手
不良信息举报
您举报文章:React生命周期函数详解
举报原因:
原因补充:

(最多只允许输入30个字)