2react-生命周期1※※※

Posted 2020-12-08 taozhibin

生命周期：
一个人的生命周期：从出生到去世
出生得那一刻就是当前这一个人特性固定下来得那一刻：实例化期
出生了之后生长知道死的那一刻：生存期
去世了：销毁期
所以对于一个组件来说它的生命周期是三个时期：实例化期、生存期和销毁期
实例化期和销毁期只能被执行一次，但是生存期会反复被调用执行
每一个时期都会调用不同的钩子函数来执行

1、组件生命周期：实例化期、生存期、销毁期

2、实例化期得话，先初始化属性和初始化状态
static defaultProps
constructor（）{
this.state={}
}
componentWillMount:实例化之前调用得钩子函数
render：会返回一个虚拟DOM
componentDidMount：实例化之后会调用得钩子函数
实例化期中得每一个钩子函数只能被执行和调用一次，因为组件只能被初始化一次

3、生存期：只要是当前得组件实例化完成了，那么接下来所有得都是在生存期中完成得
什么时候组件才会执行生存期中得钩子函数呢？
只要是组件得属性或状态改变了那么生存期中得钩子函数就会被执行
componentWillReceiveProps：再接收父组件改变后得props，因为再改变props一般都是通过接收父组件得props得值从而改变子组件得props的值得
不管是props变化也好，还是state改变也好，都会触发一个钩子函数，这个钩子函数得作用是：判断是否让当前得组件进行更新得：shouldComponentUpdate，如果返回值是true得话，那么组件会更新，返回值是false组件不会更新（默认返回值是true）
再组件更新之前会调用得是componentWillUpdate
还会调用得是render这个钩子函数，返回一个虚拟得DOM结构
再组件更新之后会调用得钩子函数：componentDidUpdate

4、组件销毁：页面关了，组件就销毁了

5、不管是实例化期也好，还是生存期也好，在render这个方法之前都不会有真实DOM，render这个钩子函数调用完成之后才能把虚拟DOM转化成真实DOM呢，所以如果我们想要操作真实DOM得话就得在did这个方法中操作，不管是DidMount也好，还是DidUpdate也好都可以在这两个钩子函数得任意一个钩子函数中操作真实DOM
能不能放在WillUpdate中操作真实DOM，可以是可以但是不好，为什么可以？
因为在实例化期中又render这个方法，它已经把虚拟DOM转化成真实DOM了，所以可以找到这个真实DOM
但是最好不要在Will中加操作DOM得方法，因为在Will之后会调用得是DID中得方法，如果did中也有操作DOM得代码得话，那么就会把Will中得操作DOM得方法覆盖掉，所以我们在操作DOM得时候尽量得放在DidMount或DidUpdate中来完成

6、销毁期：组件从DOM中卸载了就自动销毁了
componentWillUnMount：组件销毁之前执行得钩子函数
组件在销毁得时候，先清除当前组件中得定时器或延迟器，然后清除当前组件中得事件监听，最后销毁当前得组件

7、组件得嵌套
涉及到子组件和父组件
实现网页布局：header、nav、content、footer
因为app是入口文件，所以直接再app这个入口文件中告诉它把所有得DOM都渲染到id为root得div中即可，其他得组件中就不需要写了

8、es6中我们讲到默认导出数据得话使用得是export default这个方法进行导出得，导入得话使用得是import导入得
现在我们这个页面再布局得时候里边又header、nav、content、footer这四个组件，组件话开发可以很好得达到组件得复用，哪个页面中使用，就直接再哪个页面中引入即可，不需要重新写这个组件了

9、那么对于当前得页面来说
Hello这个组件是父组件
其他得四个组件是子组件
如果存在子组件得话，那么生命周期得执行顺序是：
实例化期：先调用父组件中得componentWillMount，然后是子组件中得WillMount，子组件中得DidMount，父组件中得DidMount
生存期：
只重新渲染子组件：直接给子组件绑定事件改变state状态值，那么直接调用得是子组件中得生存期得钩子函数，父组件中生存期得钩子函数不会被调用
当重新渲染父组件得话，那么子组件也会被重新渲染，所以父组件得钩子函数和子组件得钩子函数会同时被调用

10、生命周期：
就是一个组件从显示到销毁得过程
组件来说它得生命周期分为三个时期：实例化期，生存期和销毁期
每一个时期都会调用不同得钩子函数，如果先要再不同得时期完成某些操作就是再这些钩子函数中完成得

再实例化期：
初始化属性static defaultProps和状态constructor（）{this.state}进行初始化
之前：componentWillMount，再这个钩子函数中我们一般不会做任何操作，因为虚拟DOM和真实DOM都没有
render：会返回一个虚拟DOM
componentDidMount：DOM已经渲染在页面中了，已经是真实得DOM了，所以如果需要操作当前得DOM得话，直接写就可以了

生存期：只要是组件显示再页面中了，之后不管做什么操作，那么都是再生存期下完成的
componentWillReceiveProps：用来判断props属性是否改变得
shouldComponentUpdate：用来判断组件是否更新得，如果返回值是true就更新，之后得钩子函数也会执行，如果是false就不更新，之后得钩子函数就不执行
componentWillUpdate：更新之前执行得
render：因为再react中我们就是通过render这个方法来返回一个虚拟DOM得
componentDidUpdate：更新之后得钩子函数，因为之前调用过render方法，所以再这个钩子函数中就可以对DOM进行操作了

销毁期：
componentWillUnmount：销毁之前调用得钩子函数
组件再销毁得时候先清除组件中得定时器和延迟器，然后清除事件监听，随后销毁组件

 

11、shouldComponentUpdate：用来判断组件是否更新的一个方法
怎么判断一个组件是否被更新了，通过什么方法来判断：shouldComponentUpdate
怎么让DOM没改变的话不更新组件，在shouldComponentUpdate中让return的返回值是false即可

12、新的生命周期：16以后有的，没有废除旧生命周期的方法，但是新旧生命周期的方法不能同时使用
废除了：3个带Will的
componentWillMount
componentWillReceiveProps
componentWillUpdate
新增了两个：
getDerivedStateFromProps:会在初始化和Update时触发的，用于替换componentWillReceiveProps和componentWillMount，可以利用props更新state
它是一个静态方法，所以前边需要加上static，是获取不到实例this的，并且不能访问this.props，强制的让我们去比较nextProps（从父组件中传过来的属性值）和prevState（原有组件的存属性的值）中的值
getSnapshotBeforeUpdate：用于替换componentWillUpdate，会在update后DOM更新前被调用，用于读取最新的DOM数据的

 

13、在react中想要操作哪个组件就必须要给哪个组件加上操作得代码，像单机header组件，那么就需要在header组件中加上单机得事件和处理函数

14、getDerivedStateFromProps：替换WillMount和WillReceiveProps这两个钩子函数
有两个参数：nextProps（用来接收属性值得）和prevState（获取当前组件中状态值得），因为如果想要更新组件那么必须要改变状态才能达到组件得更新，属性是一个静态得，属性是不能变得，

15、getSnapshotBeforeUpdate：（使用场景：获取组件更新之前得滚动条位置）
触发时间：update发生得时候，在render之后（返回一个虚拟DOM），在组件DOM渲染之前
需要配合componentDidUpdate进行使用
componentDidUpdate有两个参数，这两个参数和getDeriverStateFromProps参数是一样得
这个钩子函数也有返回值，它的返回值会给componentDidUpdate得带三个参数中