react生命周期总结

当通过createClass创建了组件之后,该React组件就有了生命周期。通常一个React组件的生命周期可分为三个阶段:

    • Mounting:挂载组件,也就是组件实例化
    • ReciveProps:存在期,在这个时期组件的props和state会变化,重新渲染组件
    • Unmounting:卸载组件,也就是组件被销毁

React在生命周期中提供了10种API:

1.getDefaultProps():作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享。

2.getInitialState():作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state。

3.componentWillMount():在完成首次渲染之前调用,此时仍可以修改组件的tate。

4.render():必选的方法,创建虚拟DOM,该方法具有特殊的规则:

    • 只能通过this.props和this.state访问数据
    • 可以返回null、false或任何React组件
    • 只能出现一个顶级组件(不能返回数组)
    • 不能改变组件的状态
    • 不能修改DOM的输出

5.componentDidMount():真实的DOM被渲染出来后调用,在该方法中可通过     this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个    DOM。

注意:在服务端中,该方法不会被调用。

6.componentWillReceiveProps(nextProps,nextState):组件接收到新的props时调用,并将其作为参数nextProps使用,此时可以更改组件props及state。

7.shouldComponentUpdate(nextProps,nextState):组件是否应当渲染新的props或state,返回false表示跳过后续的生命周期方法,通常不需要使用以避免出现bug。在出现应用的瓶颈时,可通过该方法进行适当的优化。

注意:在首次渲染期间或者调用了forceUpdate方法后,该方法不会被调用。

8.componentWillUpdate(nextProps,nextState):接收到新的props或者state后,进行渲染之前调用,此时不允许更新props或state。

9.componentDidUpdate(prevProps,prevState):完成渲染新的props或者state后调用,此时可以访问到新的DOM元素。

10.componentWillUnmount():组件被移除之前被调用,可以用于做一些清理工作,在componentDidMount方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。

总结:下图描述了生命周期的执行顺序。

时间: 2024-10-28 16:07:34

react生命周期总结的相关文章

vue与 react 生命周期

Vue vue里的生命周期是什么? vue实例从创建到销毁的过程称之为vue的生命周期 vue的生命周期各阶段都做了什么? beforeCreate 实例创建前:这个阶段实例的data.methods是读不到的created 实例创建后:这个阶段已经完成了数据观测(data observer),属性和方法的运算, watch/event 事件回调.mount挂载阶段还没开始,$el 属性目前不可见,数据并没有在DOM元素上进行渲染beforeMount:在挂载开始之前被调用:相关的 render

react生命周期方法

每一个组件都有几个你可以重写以让代码在处理环节的特定时期运行的"生命周期方法".方法中带有前缀 will 的在特定环节之前被调用,而带有前缀 did 的方法则会在特定环节之后被调用. react生命周期可分为三个状态以及对应的方法 Mounting(装配) constructor() React组件的构造函数将会在装配之前被调用. componentWillMount() 在渲染前调用,在客户端也在服务端. render() 所有组件类都必须有自己的 render 方法,用于输出组件.

前端005/React生命周期

ES6中React生命周期 一.React生命周期 React生命周期主要包括三个阶段:初始化阶段.运行中阶段和销毁阶段. 在React不同的生命周期里,会依次触发不同的钩子函数. 二.React的生命周期函数 (一).初始化阶段 1.设置组件的默认属性 static defaultProps = { name: 'sls', age:23 }; //or Counter.defaltProps={name:'sls'} 复制代码 2.设置组件的初始化状态 constructor() { sup

vue生命周期和react生命周期对比

一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></

react生命周期知识点

react生命周期知识点 一个React组件的生命周期分为三个部分:实例化.存在期和销毁时. 实例化 组件在客户端被实例化,第一次被创建时,以下方法依次被调用: 1.getDefaultProps2.getInitialState3.componentWillMount4.render5.componentDidMount 当组件在服务端被实例化,首次被创建时,以下方法依次被调用: 1.getDefaultProps2.getInitialState3.componentWillMount4.r

React生命周期学习整理

一.React生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.getDefaultProps() 设置默认的props,也可以用dufaultProps设置组件的默认属性. 2.getInitialState() 在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state.此时可以访问this.props 3.componentWillMount() 组件初始化时只调用,以后组件更新不调用,整个生命周期

react生命周期

1.getDefaultProps 作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享. 2.getInitialState 作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state,此时可以访问this.props. 3.componentWillMount 在完成首次渲染之前调用,此时仍可以修改组件的state. 4.render 必选的方法,创建虚拟DOM,该方法具有特殊的规则: 只能通过this.props和this.state访问数据

理解React生命周期的好例子

class App extends React.Component { static propTypes = { }; static defaultProps = { }; constructor(props) { super(props); this.state = { data: 0 }; } componentWillUnMount() { } componentWillReceiveProps(nextProps) { } shouldComponentUpdate(nextProps,

随便扯扯React生命周期 --《爱看不看系列》

生命周期嘛,顾名思义,就是说组件这辈子从生下来到死掉经历的事情.先来看看一张图片,温故温故,如图: 你会发现有些周期的名字都能找出点规律,我找到的规律是凡是 Will 字母的,表示该钩子函数会在该生命周期发生之前调用:包含前缀did表示该钩子函数会在该生命周期发生之后调用. 大概给生命周期分及各类: 1.Mounting(挂载) constructor() componentWillMount() render() componentDidMount() 上面几个函数会在组件被创建和插入到DOM