美文网首页
React 生命周期介绍

React 生命周期介绍

作者: 美得冒泡的姗迪 | 来源:发表于2017-08-15 17:58 被阅读0次

一、理论
  组件本质上是状态机,输入确定,输出一定确定
  生命周期的三个阶段,三者时间是不固定的,只是在逻辑上的分类:

二、初始化阶段:
  getDefaultProps:获取实例的默认属性(即使没有生成实例,组件的第一个实例被初始化CreateClass的时候调用,只调用一次,)
  getInitialState:获取每个实例的初始化状态(每个实例自己维护)
  componentWillMount:组件即将被装载、渲染到页面上(render之前最好一次修改状态的机会)
  render:组件在这里生成虚拟的DOM节点(只能访问this.props和this.state;只有一个顶层组件,也就是说render返回值值职能是一个组件;不允许修改状态和DOM输出)
  componentDidMount:组件真正在被装载之后,可以修改DOM

三、运行中状态:
  componentWillReceiveProps:组件将要接收到属性的时候调用(赶在父组件修改真正发生之前,可以修改属性和状态)
  shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回false,接收数据后不更新,阻止render调用,后面的函数不会被继续执行了)
  componentWillUpdate:不能修改属性和状态
  render:只能访问this.props和this.state;只有一个顶层组件,也就是说render返回值只能是一个组件;不允许修改状态和DOM输出
  componentDidUpdate:可以修改DOM
四、销毁阶段:
  componentWillUnmount:开发者需要来销毁(组件真正删除之前调用,比如计时器和事件监听器)

相关文章

  • React生命周期简介

    首先介绍react16.3之前的生命周期;之后介绍react16.3的生命周期的变化 react16.3之前的生命...

  • 学习并实现react (4)

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

  • React快速上手5-react中的事件和生命周期函数

    这节中我们将主要介绍react应用中的事件和生命周期函数 React事件 在react中,我们不用addEvent...

  • React概念图

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

  • React 文档 Part 1

    —— 基础知识、JSX介绍、React 元素、组件和属性、状态和生命周期 此文档来自 React 官方文档,在英文...

  • R-4.React生命周期及最新变动

    这一章来介绍react组件的生命周期。之前介绍过纯函数组件是没有生命周期的,那到底生命周期是什么?其实简单来讲就是...

  • React基础篇之组件的生命周期

    引出生命周期 react生命周期(旧) react生命周期(新) getSnapshotBeforeUpdate的...

  • React的生命周期

    基于react16.x版本,保持更新 生命周期介绍 带 * 标识的为重要、常用的生命周期。 constructor...

  • react生命周期函数

    react 生命周期函数介绍[https://www.cnblogs.com/kdcg/p/9182393.htm...

  • React组件的生命周期与调用历程

    react组件生命周期 英文文档介绍 目录 三种生命状态 八种生命周期钩子 生命周期钩子的实际调用顺序 一、 re...

网友评论

      本文标题:React 生命周期介绍

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