react生命周期和组件生命周期

React的组件在第一次挂在的时候首先获取父组件传递的props，接着获取初始的state值，接着经历挂载阶段的三个生命周期函数，也就是ComponentWillMount，render，ComponentDidMount，这三个函数分别代表组件将会挂载，组件渲染，组件挂载完毕三个阶段，在组件挂载完成后，组件的props和state的任意改变都会导致组建进入更新状态，在组件更新阶段，如果是props改变，则进入ComponentWillReceiveProps函数，接着进入ComponentShouldUpdate进行判断是否需要更新，如果是state改变则直接进入ComponentShouldUpdate判定，这个默认是true，当判定不需要更新的话，组件继续运行，需要更新的话则依次进入ComponentWillMount，render，ComponentDidMount三个函数，当组件卸载时，会首先进入生命周期函数ComponentWillUnmount,之后才进行卸载，如图

React的生命周期函数：

初始化阶段：getDefaultProps获取实例的默认属性，getInitialState获取每个实例的初始化状态，ComponentWillMount：组件将被装载，渲染到页面上，render：组件在这里生成虚拟的DOM节点，ComponentDidMount:组件真正被装载之后

运行中状态： componentWillReceiveProps:组件将要接收到属性的时候调用 shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。 componentWillUpdate:组件即将更新不能修改属性和状态 render:组件重新描绘 componentDidUpdate:组件已经更新销毁阶段： componentWillUnmount:组件即将销毁

转载于:https://www.cnblogs.com/CoderZX/p/10658538.html

react生命周期和组件生命周期相关推荐

应用生命周期、页面生命周期、组件生命周期
一应用生命周期函数名说明应用场景 onLaunch 当 uni-app 应用初始化完成时触发,全局只触发一次一般用于查看用户是否授权.获取用户的设备信息等 onShow 当应用启动,或从后台 ...
react组件生命周期_React组件生命周期-挂钩/方法介绍
react组件生命周期 React components have several lifecycle methods that you can override to run your code a ...
react中用useEffect模拟组件生命周期
1. react中的生命周期 react中的class组件是拥有生命周期的. 生命周期分为:mounting,updating,unmounting三个阶段. 不同生命周期阶段包括不同的生命周期函数: ...
uni-app中的应用生命周期，页面生命周期，组件生命周期
一.应用生命周期(写在app.vue中) onLaunch:当整个项目启动,渲染完成时触发(全局只触发一次) onShow:小程序显示出来(从后台进入前台显示,可以触发多次) onHide:小程序隐藏 ...
浅析微信小程序生命周期之应用生命周期
浅谈微信小程序生命周期之应用生命周期参考:微信小程序官方文档微信小程序生命周期可分为应用生命周期.页面生命周期和组件生命周期,本文结合微信官方文档浅析微信小程序的应用生命周期.从注册一个小程序生命 ...
react http请求_React组件的应用分析
一.如何创建React组件方式一:React.createClass 用 React.createClass 构建组件是 React 最传统.也是兼容最好的方法. const Button = Re ...
从零学React Native之12 组件的生命周期
一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5 ...
react学习笔记(4)组件的生命周期(运行阶段和销毁阶段)以及事件处理函数
1.组件的生命周期接着(2)中的组件生命周期 1.运行阶段运行阶段有5个步骤: componentWillReceiveProps: 父组件修改属性触发,可以修改新属性,修改状态. shouldC ...
React 重温之组件生命周期
生命周期任何事物都不会凭空产生,也不会无故消亡.一个事物从产生到消亡经理的各个阶段,我们称之为生命周期. 具体到我们的前端组件上来,一个组件的生命周期可以大体分为创建.更新.销毁这个三个阶段. 本 ...

react生命周期和组件生命周期

react生命周期和组件生命周期相关推荐

最新文章

热门文章