3 React组件的生命周期

1、生命周期 -> 16.3版本前:

(1).默认属性/属性校验 -> constructor(){} -> 组件挂载前 -> render(); -> 组件挂载完成 -> 组件运行时;- ->  状态更新:state改变 -> showComponentUpdate(); -> return true -> 组件更新前 -> render(); -> 组件更新完成; - -> 父向子组件传值:props改变 -> componentWillReceiveProps();//子组件接收props函数 -> 判断 -> xx;- -> 组件卸载:componentWillUnmount();//组件将要卸载的时候触发;

(2).componentDidMount(){}; -> 状态state、发送ajax获取数据;

[1].componentWillMount();//可以操作state,ajax,但是其与更高级的库、React Native共同使用会有冲突,官方不建议使用;

[2].componentWillUpdate();//其操作state, ajax,下面还有render();函数,其会进行循环操作,最终导致栈溢出;同理render();函数也不能操作state,ajax;主要有两个地方都用到了,也会导致栈溢出;

[3].componentWillReceiveProps(nextProps){this.setState({a: nextPops.n})};//首次不执行,后续属性值改变时执行,其可进行状态的设置,ajax请求 -> 官方不建议在此处理;

补充:constructor(){};//类里面的构造函数,很多人都认为其不是生命周期钩子函数 -> 官方认可其是生命周期的一部分,React.component是一个抽象类;

2、新版生命周期:

(1).React 16.3版本;//重要节点:16.3版本后出现了新的生命周期,但旧生命周期依旧可使用,17版本后需使用新的生命周期[目前最新为16.7版本]; -> 建议16.3前使用旧的,16.3后使用新的即可;

(2).新生命周期废弃:componentWillMount();componentWillUpdate();componentWillReceiveProps();

(3).getDerivedStateFromProps(){};//必须有返回值,第一次被挂载到父组件便会执行;getSnapshotBeforeUpdate(){};//必须有返回值,而且必须和componentDidUpdate(){};配套使用;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容