文档章节

reactJS -- 8 组件生命周期

奋斗的小芋头
 奋斗的小芋头
发布于 2017/07/03 15:28
字数 783
阅读 5
收藏 0

https://fraserxu.me/2014/08/31/react-component-lifecycle/

React入门教程 - 组件生命周期

每一个阵营组件在加载时都有特定的生命周期,在此期间不同的方法会被执行。

组件加载:componentWillMount

componentWillMount()

componentWillMount在会组件render之前执行,并且永远都只执行一次。

由于这个方法始终只执行一次,如果所以这里在定义了setState方法之后,页面永远都只会在加载前更新一次。

组件加载:componentDidMount

componentDidMount()

这个方法会在组件加载完毕之后立即执行。在这个时候之后组件已经生成了对应的DOM结构,通过可以this.getDOMNode()来进行访问。

如果你想和其他的JavaScript框架一起使用,可以在这个方法中执行setTimeoutsetInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

componentDidMount: function() {
  setTimeout(function() {
    this.setState({items: {name: 'test'}})
  }, 1000)
}

组件更新:componentWillReceiveProps

componentWillReceiveProps(object nextProps)

在组件接收到一个新的道具时被执行。这个方法在初始化渲染时不会被调用。

通过使用this.setState()更新状态调用render()之前,将此作为对prop转换的反应的机会。(不太懂这句话...)

旧的道具通过可以this.props来电子杂志。这个在函数内调用this.setState()方法不会增加一次新的渲染。

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

组件更新:shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)

返回一个布尔值。在组件接收到新的道具或者状态时被执行。初始化在时或者使用forceUpdate时不被执行。

可以在你确认不需要更新组件时使用。

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

如果shouldComponentUpdate返回false,render()则会在下一个状态改变之前被完全跳过(另外componentWillUpdatecomponentDidUpdate也不会被执行)

情况默认下shouldComponentUpdate会报道查看真实的。

默认情况下,shouldComponentUpdate总是返回true,以防止在状态变为现实时的细微错误,但是如果您注意总是将状态视为不可变的,并且只能从render()中的道具和状态中读取,那么可以使用一个实现来覆盖shouldComponentUpdate比较旧的道具和状态与他们的替代品(这句也不太懂...)

如果你需要考虑性能,特别是在有上百个组件时,使用可以shouldComponentUpdate来提升应用速度。

组件更新:componentWillUpdate

componentWillUpdate(object nextProps, object nextState)

在组件接收到新的道具或者状态但还没有渲染时被执行。在初始化时不会被执行。

一般用在组件发生更新之前。

组件更新:componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

在组件完成更新后立即执行。在初始化时不会被执行。一般会在组件完成更新后被使用。例如清除通知文字等操作。

卸载:componentWillUnmount

在组件从DOM卸载后立即执行。

componentDidMount:function(){
    this.inc = setInterval(this.update,500)
},
componentWillUnmount:function(){
    console.log("goodbye cruel world!")
    clearInterval(this.inc)
}

主要用来执行一些必要的清理任务。清除例如setTimeout等函数,任意或者在的componentDidMount创建³³的DOM元素。

本文转载自:https://fraserxu.me/2014/08/31/react-component-lifecycle/

奋斗的小芋头
粉丝 1
博文 161
码字总数 129345
作品 0
大连
私信 提问
一看就懂的ReactJs入门教程-精华版

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点...

方宏春
2018/06/20
59
0
【译】ReactJS 与 Vue.JS - 2019年两个流行 JavaScript 框架的分析

原文 aglowiditsolutions.com/blog/reactj… 关于 ReactJS vs AngularJS 的争论可能已经成为过去。而现在 web 开发者讨论最多的是 Vue.js 和 ReactJS。 前端技术更新速度快,偶尔会出现新的惊...

alentan
06/28
0
0
React 与 Domcom 面对面 -- domcom 好在哪里?

在John Resig设计的jQuery独霸前端javascript多年之后,Google推出的重量级AngularJS给前端开发带来巨大的观念变化,给人耳目一新之感,同时也推动前端的观念、技术和框架领域进入快速迭代,...

局长
2016/08/27
2.9K
22
ReactJs入门教程-精华版

一、ReactJS简介   React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西...

-鹏
2015/11/10
127
0
【译】解构ReactJS的Flux

用ReactJS时不要使用MVC 我将通过列出一些单向数据流的例子来将ReactJS官方实现的Flux和我写的库Reflux作比较。 Facebook的ReactJS开发小组似乎并不待见MVC框架。将MVC模式和ReactJS结合使用...

leozdgao
2015/06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
11
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
7
0
【Medium 万赞好文】ViewModel 和 LIveData:模式 + 反模式

原文作者: Jose Alcérreca 原文地址: ViewModels and LiveData: Patterns + AntiPatterns 译者:秉心说 View 和 ViewModel 分配责任 理想情况下,ViewModel 应该对 Android 世界一无所知。...

秉心说
昨天
14
0
重学计算机组成原理(十二) - 异常和中断

1 概览 完好的程序都满足以下特征 自动运行 我们的程序和指令都是一条条顺序执行,不需要通过键盘或者网络给这个程序任何输入 正常运行 没有遇到计算溢出之类的程序错误。 不过,现实的软件世...

JavaEdge
昨天
10
0
程序设计基础(C)第06讲例程

1summing.c /* summing.c -- 根据用户键入的整数求和 */#include <stdio.h>int main(void){ long num; long sum = 0L; /* 把sum 初始化为0 */ int status; p......

树人大学数字媒体吴凡
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部