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

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

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

第一个状态我们称之为,Mounted:

指的是一个react components 被解析生成对应的dom 节点,并被插入浏览器的dom 结构的这么一个过程,当我们从浏览器上看到从无到有的效果的时候,mounted 已经结束了,我们就说这个component 组件被 Mounted 了.

第二个状态是,Update :指的是被Mounted 的一个 React components 被重新render的过程,为这个重新渲染的过程,并不是说相应的dom结构就一定会发生改变,react 会把这个components 的当前state和最近一次的state 进行对比,只有当state 确实发生了改变,并且影响到 了dom结构 的时候react才会 去改变对应的dom结构, 什么叫做components的state ,我们马上就会说到,

第三个状态我们称之为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