博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react组件生命周期
阅读量:5115 次
发布时间:2019-06-13

本文共 2215 字,大约阅读时间需要 7 分钟。

前面的话

  本文将详细介绍react组件生命周期

概述

  每一个组件都有几个可以重写以让代码在处理环节的特定时期运行的“生命周期方法”。方法中带有前缀 will 的在特定环节之前被调用,而带有前缀 did 的方法则会在特定环节之后被调用

【装配】

  这些方法会在组件实例被创建和插入DOM中时被调用:

constructor()

componentWillMount()
render()
componentDidMount()
【更新】

  属性或状态的改变会触发一次更新。当一个组件在被重渲时,这些方法将会被调用:

componentWillReceiveProps()

shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
【卸载】

  当一个组件被从DOM中移除时,该方法被调用:

componentWillUnmount()

装配过程

【render()】

  render()函数应该纯净,意味着其不应该改变组件的状态,其每次调用都应返回相同的结果,同时不直接和浏览器交互。若需要和浏览器交互,将任务放在componentDidMount()阶段或其他的生命周期方法

【constructor(props)】

  React组件的构造函数将会在装配之前被调用。当为一个React.Component子类定义构造函数时,应该在任何其他的表达式之前调用super(props)。否则,this.props在构造函数中将是未定义,并可能引发异常

【componentWillMount()】

  这是唯一的会在服务端渲染调起的生命周期钩子函数。通常地,推荐使用constructor()来替代

【componentDidMount()】

  componentDidMount()在组件被装配后立即调用。初始化使得DOM节点应该进行到这里。若需要从远端加载数据,这是一个适合实现网络请求的地方。在该方法里设置状态将会触发重渲

更新及卸载

【componentWillReceiveProps(nextProps)】

  componentWillReceiveProps()在装配了的组件接收到新属性前调用。若需要更新状态响应属性改变(例如,重置它),可能需对比this.props和nextProps并在该方法中使用this.setState()处理状态改变

  [注意]即使属性未有任何改变,React可能也会调用该方法

【shouldComponentUpdate(nextProps, nextState)】

  使用shouldComponentUpdate()可以让React知道当前状态或属性的改变是否不影响组件的输出。默认行为是在每一次状态的改变重渲,在大部分情况下应该依赖于默认行为

  当接收到新属性或状态时,shouldComponentUpdate() 在渲染前被调用。默认为true

  若该方法返回false,则componentWillUpdate()、componentDidUpdate()、render()将不会被调用

  [注意]该方法并不会在初始化渲染或当使用forceUpdate()时被调用

【componentWillUpdate(nextProps, nextState)】

  当接收到新属性或状态时,componentWillUpdate()在渲染前被立即调用。在更新发生前,使用该方法是一次准备机会。该方法不会在初始化渲染时调用。

  [注意]不能在这调用this.setState(),若需要更新状态响应属性的调整,使用componentWillReceiveProps()代替

【componentDidUpate(prevProps, prevState)】

  componentDidUpdate()会在更新发生后立即被调用。该方法并不会在初始化渲染时调用。当组件被更新时,使用该方法是操作DOM的一次机会。这也是一个适合发送请求的地方

【componentWillUnmount()】

  componentWillUnmount()在组件被卸载和销毁之前立刻调用。可以在该方法里处理任何必要的清理工作,例如解绑定时器,取消网络请求,清理任何在componentDidMount环节创建的DOM元素

强制渲染

【component.forceUpdate(callback)】

  默认情况,当组件或状态发生改变,组件将会重渲。若render()方法依赖其他数据,可以通过调用forceUpdate()来告诉React组件需要重渲

  调用forceUpdate()将会导致组件的 render()方法被调用,并忽略shouldComponentUpdate()。这将会触发每一个子组件的生命周期方法,涵盖每个子组件的shouldComponentUpdate() 方法。若当标签改变,React仅会更新DOM

  通常应该尝试避免所有forceUpdate() 的用法并仅在render()函数里从this.props和this.state读取数据

转载于:https://www.cnblogs.com/jiaozhuo/p/8617596.html

你可能感兴趣的文章
MySQL表的四种分区类型
查看>>
[BZOJ 3489] A simple rmq problem 【可持久化树套树】
查看>>
STM32单片机使用注意事项
查看>>
swing入门教程
查看>>
好莱坞十大导演排名及其代表作,你看过多少?
查看>>
Loj #139
查看>>
hihocoder1187 Divisors
查看>>
Azure 托管镜像和非托管镜像对比
查看>>
js window.open 参数设置
查看>>
032. asp.netWeb用户控件之一初识用户控件并为其自定义属性
查看>>
Ubuntu下安装MySQL及简单操作
查看>>
前端监控
查看>>
clipboard.js使用方法
查看>>
移动开发平台-应用之星app制作教程
查看>>
leetcode 459. 重复的子字符串(Repeated Substring Pattern)
查看>>
伪类与超链接
查看>>
centos 7 redis-4.0.11 主从
查看>>
博弈论 从懵逼到入门 详解
查看>>
永远的动漫,梦想在,就有远方
查看>>
springboot No Identifier specified for entity的解决办法
查看>>