React生命周期钩子

最近的工作都很忙,所以很少完整的时间可以用来总结和回顾知识点,今天就趁着是周末,我准备在这里复习和回顾一下React的基础。工作中主要用的vue比较多,在工作中使用React也已经是一年前了,当时用的蚂蚁金服的antd框架,相比vue,我个人还是比较喜欢写React的,其实vue跟React之间除了写法上的差异,也非常相似的,学会了其中一个,要学另一个的话都是很容易的。

用过React的同学都知道,React的特性之一就是组件化,组件都有一个生命周期,这个生命周期包括组件的实例化、更新与销毁阶段,在组件的不同生命周期钩子函数里我们可以对组件进行相应的操作,如更新或者销毁等。说到React组件,它的写法也有三种两大类,一类是无状态组件,也就是函数式组件,它们也存在实例化、更新、销毁期,但是没有对外暴露相应的生命周期钩子,另一类就是有状态组件,这一类组件有两种写法,第一种写法就是ES5的React.createClass,第二种写法则是ES6的React.Component,但是在这篇博客里我们不讨论React组件的写法,要了解相关知识的同学请自行百度或者查阅React官方文档,这篇博客我们主要讨论一下有状态组件的不同生命周期的钩子函数。

关于React的生命周期,前面也说到了,主要有三个阶段:实例化、更新和销毁。

第一次被创建时,也就是实例化时,以下方法依次被调用:

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
5、componentDidMount

当组件已经渲染好后,组件也就进入更新期,在更新期会执行以下函数:

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

最后,每当React使用完一个组件,这个组件必须从 DOM 中卸载后被销毁,此时 componentWillUnmout 会被执行,完成所有的清理和销毁工作,在 componentDidMount 中添加的任务都需要再该方法中撤销,如创建的定时器或事件监听器。

来源地址:https://www.f2ecoder.net/879.html

原文地址:https://www.cnblogs.com/xiaoweihuang/p/9821677.html

时间: 2024-08-03 20:30:53

React生命周期钩子的相关文章

react 生命周期钩子函数

实例化 construtor//构造函数 componentWillMount//挂载之前,可修改setState render//渲染真实dom componentDidMount//第一次render后,仅一次,可setState 存在期 componentWillReceiveProps//父组件render时props更新时,不管props是否变化 shouldComponentUpdate//修改state后自动调用,默认返回true,false跳过后面的,少用 componentWi

react中的生命周期钩子函数? 每个都是干什么用的?

首先react有10个生命周期钩子函数 挂载期constructor 数据接收 实现继承super(props)componentWillMount 数据挂载之前 可以操作数据 不可以操作domcomponentDidMount 数据挂载之后 可以操作数据和domrender 渲染组件 和 html 标签 更新期shouldComponentUpdate 检测组件内的变化 可以用作页面性能的优化(默认值为true)componentReceiveProps 接收组件传入输入数据component

前端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. 初始化 2.更新 3.销毁 初始化 1.getDefaultProps() 设置默认的props,也可以用dufaultProps设置组件的默认属性. 2.getInitialState() 在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state.此时可以访问this.props 3.componentWillMount() 组件初始化时只调用,以后组件更新不调用,整个生命周期

Vue 实例中的生命周期钩子

Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data).模板(template).挂载元素(el).方法(methods).生命周期钩子(lifecyclehook)等选项. Vue 实例化的选项 需要注意的

对vue生命周期/钩子函数的理解

对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos()).这是因为箭头函数绑定了父上下文,因此this与你期待的 Vue 实例不同,this.fetchTodos的行为未定义. 下面附加

vue与 react 生命周期

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

Angular2 -- 生命周期钩子

组件生命周期钩子 指令和组件的实例有一个生命周期:新建.更新和销毁.每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng前缀构成的.比如,OnInit接口的钩子方法叫做ngOnInit.指令和组件ngOnInit:当Angular初始化完成数据绑定的输入属性后,用来初始化指令或者组件.ngOnChanges:当Angular设置了一个被绑定的输入属性后触发.该回调方法会收到一个包含当前值和原值的changes对象.ngDoCheck:用来检测所有变化(无论是Angular本身能检测还是