03组件的生命周期和事件处理

这一劫,聊一聊,React Compodnents 从创建到消失,的生命周期,状态和属性在生命周期中是如何流转的.

首先我们来了解一下,react components 在浏览器中 存在的生命周期的三个状态,

  1. 第一个状态我们称之为,Mounted:
    指的是一个react components 被解析生成对应的dom 节点,并被插入浏览器的dom 结构的这么一个过程,当我们从浏览器上看到从无到有的效果的时候,mounted 已经结束了,我们就说这个component 组件被 Mounted 了.
  2. 第二个状态是,Update :指的是被Mounted 的一个 React components 被重新render的过程,为这个重新渲染的过程,并不是说相应的dom结构就一定会发生改变,react 会把这个components 的当前state和最近一次的state 进行对比,只有当state 确实发生了改变,并且影响到 了dom结构 的时候react才会 去改变对应的dom结构, 什么叫做components的state ,我们马上就会说到,
  3. 第三个状态我们称之为Unmounted ,mounted 的 react components 对应的dom节点,被从dom结构中,移除的这样一个过程,每一个状态,react 都封装了对应的hook 函数,对计算机出身的人对hook 函数不陌生了,他最早是用来 使windowws 中提供的一种用于替换 dos下的中断系统机制,现在呢,则是一种泛指了,中文我们,把它翻译成,钩子,也是很传神的,在对特定的系统时间进行hook后,一旦发生以hook事件,对该事件进行hook的程序,就会收到系统的通知,这时程序就在 第一时间,对该事件做出响应 ,而对于每一种状态,react 都封装了多个hook函数,如果要你封装一个hook函数,你会怎么设计, will 和did ,,,就爱你更要怎么怎么样 ,和已经怎么怎么样,
    将要Mounted 将要update 将要 unmounted 已经mounted 已经 update 已经 unmounted ,,,,,事实上呢,react 的设计思想也是如此,只不过人家比我们想的更加全面一些 ,

在mounted 这个阶段,我们可以添加2个hook函数,分别是:componentWillMount 和 componentDidmount 前者是在Mounting钱调用,后者是在Mounted 之后调用 .还有一个函数,用来初始化react components 的state 叫做 :::::getInitialState

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值