React 生命周期

React 生命周期方法

我们接触较多的应该是 render()方法,其实这也是React的生命周期方法之一。还有几个方法可以在React ES6类组件中被覆写。
现在已经知道能够用在ES6类组件中的生命周期方法 :

  • constructor() .和 render() .
  1. constructor(构造函数) 只有在组件实例化 并插入到DOM节点中的时候才会被调用。
    组件实例化的过程称作组件的挂载(mount).
  2. render() 方法会在组件挂载的过程中被调用,同时组件更新的时候也会被调用。
    每当组件的状态(state)或者属性(props)改变时,组件的render()方法都会被调用。
  • react 有更多的生命周期方法。
    在组件挂载的过程中还有另外两个生命周期方法、:componentWillMount()和componentDid-Mount().
    构造函数(constructor)最先执行,componentWillMount()会在render()方法之前执行。
    思考:当组件的状态或者属性改变的时候用来更新组件的生命周期是什么样的呢?
    总的来说,一共有5个生命周期方法用于组件的更新,调用顺序如下:

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

    最后但同样重要的 组件卸载也有生命周期 。 只有一个生命周期方法 :componentWillUn-mount()。

  • 即使在一个很大的React应用中,除了constructor() 和render() 比较常用外,你只会用到一小部分生命周期函数

    • constructor(props) 它在组件初始化时被调用。在这个方法中,你可以设置初始化状态及绑定类方法。
    • componentWillMount() 它在render() 方法之前被调用。这就是为什么它可以用作去设置组件内部的状态,因为它不 会触发组件的再次渲染。但一般来说 推荐 在constructor()中初始化状态。
    • render() 这个生命周期方法是必须有的,它返回作为组件输出的元素。这个方法应该是一个纯函数,因此不应该在这个方法中修改组件的状态。它把属性和状态作为输入并且返回(需要渲染的)元素。
    • componentDidMount() 它仅在组件挂载后执行一次。这是发起异步请求去API获取数据的绝佳时期。获取到的数据将被保存在内部组件的状态中 然后在render()生命周期方法中展现出来。
    • componentWillReceiveProps(nextProps) 这个方法在一个更新生命周(update lifecycle)中被调用。新的属性会作为它的输入。因此你可以利用this.props来对比之后的属性和之前的属性。基于对比的结果去实现不同的行为。此外,你可以基于新的属性来设置组件的状态。
    • shouldComponentUpdate(nextProps,nextState) 每次组件因为状态或者属性更改而更新时,它都会被调用。你将在成熟的React应用中使用它来进行性能优化。在一个更新生命周期中,组件及其子组件将根据该方法返回的布尔值来决定是否重新渲染。这样你可以阻止组件的渲染生命周期(render lifecycle)方法,避免不必要的渲染。
    • componentWillUpdate(nextProps,nextState) 这个方法是render()执行之前的最后一个方法。你已经拥有了下一个属性和状态,他们可以在这个方法中任由你处置。你可以利用这个方法在渲染之前进行最后的准备。 注意:在这个生命周期方法中你不能触发seState(). 如果想基于新的属性计算状态,你必须利用 --> componentWillReceiveProps();
    • componentDidUpdate(prevProps,prevState) 这个方法在render()之后立即调用。你可以用它当成操作DOM 或者执行更多异步请求的机会。
    • componentWillUnmount() 它会在组件销毁之前被调用。 你可以利用这个生命周期方法去执行任何清理任务。

之前可能你已经用过了 constructor() 和 render() 生命周期方法。对于 ES6 类组件来说他们是 常用的生命周期方法。实际上 render() 是必须有的,否则它将不会返回一个组件实例。

  • 还有一个 生命周期方法 :componentDidCatch(error,info) . 它在React16 中引入 。用来捕获组件的错误。

参考资料

the road to learn react http://leanpub.com/the-road-to-learn-react-chinese/ by Robin Wieruch and JimmyLv

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,290评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,107评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,872评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,415评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,453评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,784评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,927评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,691评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,137评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,472评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,622评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,289评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,887评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,316评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,490评论 2 348

推荐阅读更多精彩内容

  • 组件的生命周期方法分以下三个阶段。 Mounting当创建组件的实例并将其插入到DOM中时,将调用这些方法:con...
    _八神光_阅读 1,089评论 0 0
  • 1 React生命周期流程 调用流程可以参看上图。分为实例化,存在期和销毁三个不同阶段。介绍生命周期流程的文章很多...
    Dabao123阅读 319评论 0 1
  • 又是一个老生常谈的内容,从ES6起已经开始使用class的方式去创建组件,这种创建方式上的变化也带来了写法和方法上...
    殷灬商阅读 456评论 0 1
  • 在组件的整个生命周期中,随着该组件的props或者state发生改变,它的DOM表现也将有相应的改变,一个组件就是...
    web蜗牛阅读 557评论 0 1
  • 译自 React Component Lifecycle 每个组件都有若干生命周期函数。如函数名称所示,带有wil...
    KrisLeeSH阅读 547评论 0 0