转自http://blog.flappyend.com/react-component-lifecycle/
实例化
首次实例化
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
实例化完成后的更新
- getInitialState
- componentWillMount
- render
- componentDidMount
存在期
组件已存在时的状态改变
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
销毁&清理期
- componentWillUnmount
说明
生命周期共提供了10个不同的API。
1.getDefaultProps
作用于组件类,只调用一次,返回对象用于设置默认的props
,对于引用值,会在实例中共享。
2.getInitialState
作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state
,此时可以访问this.props
。
3.componentWillMount
在完成首次渲染之前调用,此时仍可以修改组件的state。
4.render
必选的方法,创建虚拟DOM,该方法具有特殊的规则:
- 只能通过
this.props
和this.state
访问数据 - 可以返回
null
、false
或任何React组件 - 只能出现一个顶级组件(不能返回数组)
- 不能改变组件的状态
- 不能修改DOM的输出
5.componentDidMount
真实的DOM被渲染出来后调用,在该方法中可通过this.getDOMNode()
访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。
在服务端中,该方法不会被调用。
6.componentWillReceiveProps(object nextProps)
组件接收到新的props
时调用,并将其作为参数nextProps
使用,此时可以更改组件props
及state
。
注意,不存在一个对应的componentWillReceiveStates方法,如果要对应states改变进行操作,使用componentWillUpdate
componentWillReceiveProps: function(nextProps) {
if (nextProps.bool) {
this.setState({
bool: true
});
}
}
7.shouldComponentUpdate(object nextProps, object nextState)
组件是否应当渲染新的props
或state
,返回false
表示跳过后续的生命周期方法,通常不需要使用以避免出现bug。在出现应用的瓶颈时,可通过该方法进行适当的优化。
在首次渲染期间或者调用了forceUpdate
方法后,该方法不会被调用
注意:这个地方的描述容易引起误解,明确的说法应该是,是否更新虚拟DOM,至于要不要更新真正的DOM,那是React内部要做的事情。更新虚拟DOM是很快的,所以一般情况下不需要这个方法,除非组件构成非常复杂,即使更新虚拟DOM也会产生瓶颈时,可以使用这个方法优化。
在使用这个方法是,为了高效进行states前后比较,最好用不可变数来保存states,所以配合使用immutable.js会是个比较好的选择。
8.componentWillUpdate(object nextProps, object nextState)
接收到新的props
或者state
后,进行渲染之前调用,此时不允许更新props
或state
。
9.componentDidUpdate(object prevProps, object prevState)
完成渲染新的props
或者state
后调用,此时可以访问到新的DOM元素。
10.componentWillUnmount
组件被移除之前被调用,可以用于做一些清理工作,在componentDidMount
方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。
相关推荐
React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。React 中,把一切东西都看成组件,而且所有组件有其状态。什么是状态?简单来说,一个组件有多种...上篇包含:React 概述、React组件生命周期详解
通过引入一个服务层来分离您的组件和应用程序状态,该服务层负责通过您的应用程序传播更改以显式、可测试的方式管理组件依赖项没有事件,也没有生命周期管理 - 一切都为您自动完成它很小而且很容易理解 - 核心不到 ...
当面试Vue相关职位时,以下是一些可能的面试问题和答案,供参考: 1、什么是Vue.js?它有哪些主要特点? 答:Vue.js是一种JavaScript框架,用于构建用户界面和...4、什么是Vue的生命周期? 5、Vue中如何实现组件通信?
遵循Lynda课程:学习React.js ... 组件生命周期概述 更新组件 加载数据中 风格增强 启动公告板应用程序 下一步 React.js基本培训 与Alex Banks学习React Native 与Emmanuel Henri学习React VR
React.js_sportsstore_project ... 解释诸如 Redux、React 生命周期、React-dom 和其他用于设置完整工作 React Web 应用程序的核心 React 包等概念。 这个项目真的让我感受到了 React 开发的感觉。
React演示 React.js 和相关概念介绍 001 基础组件,JSX JSX 提供了一种使用熟悉的 XML 样式语法构造 React DOM 元素的简写。 要转译,请npm install -g react-tools并运行: ...等:生命周期事件、通量、测试
一个简易版的React框架,用于说明React的实现原理。实现了React的JSX,虚拟DOM,组件,生命周期,diff算法,异步的setState等核心功能。
新的 React 组件生命周期名称以更好地理解它(或者您可以坚持使用标准的 React 组件生命周期)。 遵循函数式编程思想的基于类的 Mixins。 还有更多…… 示例用法 使用方法创建单个组件 import Reacts from ...
React.js土耳其语源内容状态jQuery方面的状态逻辑生命周期事件管理(事件) 绑定活动发送带有事件的参数组件之间的通讯父母对儿童从下到上访问父级(子级到父级) 访问没有子父母关系的组件React路由器包括UI库...
React+组件+生命周期和状态+理解 - 本资源是一个React的理解,解释了组件的作用和分类,以及如何用React管理组件的生命周期和状态,包括使用钩子,上下文,Redux等。
本文实例讲述了React生命周期原理与用法。分享给大家供大家参考,具体如下: React生命周期 生命周期概览 生命周期的状态 组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲 ...
在Reactstrap熟悉的UI框架中通过React通过服务器端呈现生命周期的功能。 已优化并与Next.js中的最新功能捆绑在一起,以进行热重装,捆绑和服务器配置。 内容 关于 React Ventures是React&Next.js的模板,它利用...
React观察者混合 具有ES5和ES6兼容语义的 Mixin提供了尊重组件生命周期的托管事件侦听器,以及与React不变式兼容并适用于一次性事件处理程序的状态设置器。 该模块没有运行时相关性,最小约为1.3kB。为什么会存在? ...
React 组件生命周期 在本章节中我们将讨论 React 组件的生命周期。 组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: ...
这是一个可已让大家一起学习文件,react的基础还有生命周期、非控组件,堪称完美的一个文件,需要的赶紧下载了。
React读书笔记-组件的生命周期在我们的React中all is component,我们通过调用React的createClass方法()或者ES6的cla
将数据注入JSX 成分渲染组件类组件道具功能组件中的道具propTypes defaultProps 破坏道具类组件中的道具渲染清单创建一个React项目大事记状态...使用if条件使用三元运算符使用和运算符组件生命周期React路由器React钩...
下面小编就为大家带来一篇老生常谈js-react组件生命周期。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),还提供了更多的属性(computed,watch),我还是比较喜欢用react的,更接近js原生,更容易于理解它。 一 vue的...