React 生命周期函数深入浅出

本篇博文基于 React 16.5.2

吐槽:

作为一个后端开发,15 年开始关注大前端发展趋势,于 17 年去线下听了场前端开发会议,那个时候 Vue2.0 刚出没多久,就被那快速构建页面给吸引了。最早重返前端还是大半年前,新项目用vue写了几个功能页面,发现现在写前端是真挺舒服,尤其是对于后端人员来说(排除掉 CSS ),快速入门并上手不是什么问题。

至于为什么最终选择了 react 而非 vue ?是因为当时对 react 和 vue 及 RN 和 weex 做了番调研对比,鉴于 weex 的不给力,及后期 react 和 vue 学习成本差不多,但 react 的社区更为活跃,外加发起者背景,就毅然选择了 react 。(我个人是通一精百的支持者,所以对于 react 的理念(learn once,write anywhere),是很赞成的。而 weex 的理念 (write once,run anywhere) 虽然很吸引人,但时下个人觉得技术并未达到此程度,配置的复杂度及大量的轮子需造,难以满足大型项目的要求。包括目前 JD 推出的 Taro,个人目前持观望态度,等到 react 这块应用到项目之后,再码一波 Taro 实际调研一番)。

接触 React 的时候已经是 React 16.3 ,不禁感慨前端发展至今,越有后端的趋势。前后花了3个多月的时间过了一遍 webpack 4, npm , react ,在公司内部做了几场培训,发现了其中的一些不协调,但随着版本的迭代,这些不协调也依次在被更正。(看 React 17 的更新内容,原本一些摸棱两可的方法、属性元素命名均会得到改善:)

正文

本篇博文会对 React 16.5.2 中的常用生命周期函数做一些翻译、讲解说明及发表一些个人的理解和看法,如有错误、歧义之处,还望大家不吝啬指出,互相交流:)

开篇借用官方提供的生命周期函数图:(虽然是 React 16.4 的,但同样适用于 16.5 版本)