美文网首页全栈记
3 React组件的生命周期

3 React组件的生命周期

作者: 官清岁月 | 来源:发表于2019-05-13 08:28 被阅读0次

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();//第一次被挂载的时候不执行,之后才执行 -> 官方也不建议;

(3).React 16.3版本 -> 重要节点:16.3版本后生命周期进行了修改,但是还没完全实施,17版本后就全部使用了新的生命周期; -> 建议16.3前使用旧的,16.3版本后使用新的即可;

新版生命周期废弃掉了:componentWillMount();componentWillUpdate();componentWillReceiveProps();

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

2、新版生命周期:

相关文章

  • React概念图

    React概念图 React组件生命周期概念图 参考文档:React入门教程 组件生命周期React:组件生命周期...

  • React 组件生命周期

    组件生命周期 参考阅读: component-lifecycle react组件生命周期过程说明 react 组件...

  • React总结

    [toc] 1.React组件生命周期 1.1 生命周期图 组件的生命周期的图如下: 具体可参考React 组件生...

  • 学习并实现react (4)

    实现生命周期 生命周期介绍 React 生命周期图 React 子组件在父组件下的生命周期流程 实现 compon...

  • 2、深入浅出React(二)组件的生命周期

    3. 组件生命周期 React严格定义了组件的生命周期,生命周期可能会经历如下三个过程: 装载过程(Mount):...

  • react(最近搞了一套react项目的视频 全套 有需

    React 组件生命周期在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态: Mou...

  • Notes On React - Two

    React 的生命周期   React组件 的生命周期大致可分成四个状态:  - Mounting:装配-组件实例...

  • 006@React组件的生命周期.md

    006@React组件的生命周期.md React Native 是基于组件化开发。弄清楚组件的生命周期对于我们开...

  • React生命周期及减少render次数

    React生命周期 环境:react16 常用生命周期的钩子分类后,分布3个阶段内 初始化阶段 - 组件创建阶段才...

  • React 生命周期

    React 生命周期 初始化周期 组件重新渲染生命周期 组件卸载生命周期

网友评论

    本文标题:3 React组件的生命周期

    本文链接:https://www.haomeiwen.com/subject/wrldvqtx.html