再次理解react生命周期函数

在学习react的过程中，生命周期函数是一个非常核心的概念，对react生命周期函数的了解就是对react工作机制的了解。而生命周期函数对于初学者而言不好记忆，故有此文作为理解和梳理生命周期函数这个知识点。

核心是constructor和render
react的class component最核心的生命周期函数是这两个。constructor是用来初始化state和绑定类方法的，而render函数需要理解：它是一个纯函数。纯函数的意思是指，它的输出不能和输入值以外的任何资讯有关，简单来说，它就是最纯粹的，拿到输入，然后得到相应的输出。所以，在render中使用this.setState等等会触发其他事件的方法是绝对错误的。
三个阶段
react组件有三个阶段，第一个阶段是挂载（Mount），第二个阶段是更新（Update），第三个阶段是卸载（Unmount），生命周期函数是围绕这三个阶段布置的。

卸载只有一个生命周期函数即ComponentWillUnmount，它用来安排组件将要卸载前要做的清理工作。
无论是挂载还是更新，其展示于页面都需要通过render（）函数
在render函数前后，都包含一个ComponentWill…和ComponentDid…的生命周期函数，ComponentWill…函数往往没有太多实际用途，是放置下来的一个阶段，ComponentDid…则用来写触发事件，引发下一次render（）的内容
在更新阶段，比挂载阶段多一个ShouldComponentUpdate函数，这个函数通过判断preProps和preState来返回一个boolean值，这个boolean值用来决定组件是否render（），这个可以用来提升组件性能，阻止某些变化引起函数重新渲染。这个函数相当于constructor在挂载阶段发挥的作用，即作为下一场render的开端。
在挂载阶段，componentDidMount只会调用一次。
由上述，可以写出一个完整的链条，为
(constructor -> componentWillMount -> render -> componentDidMount) -> (shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate) -> componentWillUnmount

再次理解react生命周期函数相关推荐

vue生命周期函数、react生命周期函数、微信小程序生命周期函数、uni-app生命周期函数，简介及图示
vue生命周期函数 beforeCreate (创建前) created (创建后) beforeMount (挂载前) mounted (挂载后) beforeUpdate (数据更新前) upda ...
react生命周期函数_如何优雅的消灭掉react生命周期函数
开源不易,感谢你的支持,❤ star concent^_^ 序言在react应用里,存在一个顶层组件,该组件的生命周期很长,除了人为的调用unmountComponentAtNode接口来卸载掉它和 ...
react生命周期函数
在react中,生命周期函数指的是组件在加载前,加载后,以及组件更新数据和组件销毁时触发的一系列方法.通常分为以下几类: 组件加载的时候触发的函数:constructor .componentWill ...
react 生命周期函数
定义:指在某个时刻组件会自动调用的函数阶段: 1 Initialization : 初始化阶段 2 Mounting : 真实Dom已插入 3 Updation : 重新渲染 4 Unmountin ...
React 生命周期函数使用场景及ajax请求前端模拟数据
React 中的生命周期函数是很重要的. 我们在写组件的时候,组件都是继承自React.Component 的,Component内置了其他所有生命周期函数,唯独没有render 函数.因此我们在写组 ...
理解react生命周期，以及react生命周期的使用场景
前言: 在最初学习react的过程中,我对react的生命周期没有足够的重视,使得我在开发过程中遇到了很多问题.弄懂react的声明周期,可以让你的代码更加高效,更加优美. 什么是生命周期函数? ...
React生命周期函数-生命周期回调函数
面试的时候问到了如何运用,这里再回顾一下. 也叫生命周期钩子函数(生命周期钩子) 生命周期大概分成三个阶段:初始化阶段,更新阶段,卸载将组件放入页面的过程中,React会在合适的时间进行函数的调用. ...
react生命周期（自己的方式理解）
react生命周期(自己的方式理解) react的生命周期函数有:挂载,渲染/更新,卸载首先要知道react生命周期最初始的要有哪些?最后生命中出现的又有哪些?我本人喜欢把react比作是一个人的一 ...
react生命周期详细介绍
目录挂载:在组件实例被创建并插入到dom中时,生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render co ...

再次理解react生命周期函数

再次理解react生命周期函数相关推荐

最新文章

热门文章