组件的生命周期

最新推荐文章于 2024-05-06 21:56:42 发布
最新推荐文章于 2024-05-06 21:56:42 发布
阅读量260 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46399258/article/details/108396883
版权

组件的整个生命有三个阶段：
1. 加载期(初创期)：做一些事情(执行了一些函数)
2. 更新期
3. 销毁期

生命周期函数
加载阶段
1. constructor() 加载的时候调用一次，可以初始化state
2. getDefaultProps() 设置默认的props，也可以dufaultProps设置组件的默认属性
3. getInitialState() 初始化state，也可以直接constructor中定义this.state
4. componentWillMount() 组件加载时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state
5. render() react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行
6. componentDidMount() 组件渲染之后调用，只调用一次
*/

X W F
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue生命周期及各组件间的执行情况
smznbhh的博客
08-02 691
Vue的生命周期，各个组件间的执行情况。以Vue2.x版本展开叙述。
WEB前端高频面试题（五）—— Vue 八股文
upgrade_bro的博客
08-23 425
WEB前端高频面试题（七）—— Vue 八股文：生命周期、指令、组件通信、插槽、路由、Vuex、双向绑定原理、diff算法、MVVM框架……
一文读懂Vue生命周期（Vue2）
最新发布
蓑笠翁
05-06 1102
vue生命周期，keepalive生命周期，vue页面数据更新生命周期等详解。
react 源码defaultProps实现
大前端秘籍
06-13 1339
首先我们回顾一下 defaultProps 的用法 import React from 'react'; class App extends React.Component { render() { return <div>{this.props.name}</div> } } App.defaultProps = { name: "Hello React" }; ReactDOM.render(<App />, document.getE
defaultProps，react
m0_59070120的博客
06-13 220
可以为 Class 组件添加默认 props。这一般用于 props 未赋值，但又不能为 null 的情况。例如： 如果未提供 ，则默认设置为
React定义PropTypes 与 DefaultProps 默认属性类型和默认值
qq_16660569的博客
08-07 1717
每个组件都有自己的props 参数。这个参数，是从父组件接收到的一些属性。 本篇主要介绍，接收参数时，如何对参数的类型做校验；如何定义参数的默认值。 接收参数的类型的校验： export default class FlowCommon extends React.Component { static propTypes = { processInstId: PropTypes.numb...
vue组件生命周期详解
08-28
Vue组件生命周期详解 Vue组件生命周期是指从组件创建到销毁的整个过程，分为四个阶段：create、mount、update和destroy，每个阶段都有其对应的处理函数。下面我们将详细介绍每个阶段的处理函数和生命周期函数。 ...
老生常谈js-react组件生命周期
10-19
下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React 组件生命周期
12-13
React 组件生命周期 在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM 生命周期的方法有： ...
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
React组件生命周期详解
12-03
这个方法是用来设置组件默认的props，组件生命周期只会调用一次。但是只适合react.createClass直接创建的组件，使用ES6/ES7创建的这个方法不可使用，ES6/ES7可以使用下面方式： //es7 class Component { static ...
react踩坑之React.PropTypes已经被废弃
ferrysoul的博客
04-10 2602
修改后的方法 //测试效果用 import React, { Component } from 'react'; import PropTypes from 'prop-types'; class Test extends Component { render(){ return <h2>{this.props.title}</h2>...
React 组件的默认状态（defaultProps）
YY383803220的博客
11-30 1264
基本类型组件： class MyComponent extends React.Component { constructor(props){ super(props); this.state={ name:props.name }; } } MyComponent.defaultProps={ ...
设置默认属性值getDefaultProps方法
menglong0329的博客
07-12 4898
一、getDefaultProps方法介绍通过实现组件的getDefaultProps，对属性设置默认值。二、实际代码定义ShowTitle组件var ShowTitle = React.createClass({ getDefaultProps:function(){ return{ title : "百度科技" } }, render : functio...
2-2、React函数组件、默认props
你华还是你华
04-26 6969
本节将开启React框架进阶学习第二篇 如果还没有学习 1-1 ~ 1-6 React框架基础的话，建议点我开始React框架基础学习 文章系列（React框架进阶） 2-1、React框架组件化state的使用 大家好，我是Counterrr 不忘初心，砥砺前行 本文目录 一、React函数组件的介绍 二、默认Props 1、React函数组件： 还记得我们之前写了一个随机选择学习语言小项目，最...
react function 组件 初始化两次_react组件的生命周期
weixin_36354817的博客
02-04 1822
在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。实例化当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：1、getDefaultProps2、getInitialState3、componentWillMount...
React使用prop-types验证数据类型
酒馆不打烊
07-24 1239
npm install prop-types安装一个叫prop-types的第三方包 import PropTypes from 'prop-types'//引入第三方包 //验证传递过来的值 TodoItem.propTypes = { test:PropTypes.string.isRequired,//isRequired表示该值必须要传 list:PropTypes.o...
uniapp 子组件生命周期
04-16
在UniApp中，子组件的生命周期与Vue组件的生命周期类似。以下是UniApp子组件的生命周期介绍： ...需要注意的是，UniApp中的子组件生命周期与Vue组件的生命周期略有不同，具体可以参考UniApp官方文档进行了解。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

X W F

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值