点击上方“前端教程”，选择“星标”
每天前端开发干货第一时间送达！
一、生命周期
React生命周期图解[1]
我已经把这张图印在脑子里面了，没事就自己画画，中间发散一些自己的思考。u1s1，不知道react的生命周期命名为什么要怎么长~~~，小程序，vue的都比较短。毕竟使用的频率还是很高的，Hooks除外。
image.png1、constructorconstructor是类通用的构造函数，常用于初始化，算是生命周期的一环。React后来的版本中类组件也可以不写。
注意：在构造函数中使用时，super关键字将单独出现，并且必须在使用this关键字之前使用。super关键字也可以用来调用父对象上的函数。MDN说明[2]
classJJTestextendsReact.Component{//constructor写法constructor(props){super(props);this.state={count:0,};this.handleClick=this.handleClick.bind(this);}//直接声明state={count:0,};}2、getDerivedStateFromProps
触发时机：state变化、props变化、forceUpdate，如上图。
这是一个静态方法,是一个和组件自身"不相关"的角色.在这个静态方法中,除了两个默认的位置参数nextProps和currentState以外,你无法访问任何组件上的数据。
//初始化/更新时调用staticgetDerivedStateFromProps(nextProps,currentState){console.log(nextProps,currentState,"getDerivedStateFromProps方法执行");//返回值是对currentState进行修改return{fatherText:nextProps.text,};}3、render
render函数返回的JSX结构，用于描述具体的渲染内容，render被调用时，它会检查this.props和this.state的变化并返回以下类型之一：
React元素。通常通过JSX创建。例如，
会被React渲染为DOM节点，会被React渲染为自定义组件，无论是
还是均为React元素。
数组或fragments。使得render方法可以返回多个元素。欲了解更多详细信息，请参阅fragments文档。
Portals。可以渲染子节点到不同的DOM子树中。欲了解更多详细信息，请参阅有关portals的文档
字符串或数值类型。它们在DOM中会被渲染为文本节点
布尔类型或null。什么都不渲染。（主要用于支持返回test的模式，其中test为布尔类型。)
注意：如果shouldComponentUpdate()返回false，则不会调用render()。
Hooks不需要写render函数。要注意的一点是，即使Hooks不需要写render，没有用到React.xxx，组件内还是要importReactfrom"react";的（至于原因，后续深入Hooks学一下，大哥们也可以解释下）。React官方也说了，后续的版本会优化掉这一点。
4、