React: React组件的生命周期
一、简介
在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍，但总感觉说的过于简单，毕竟生命周期是React组件的核心部分。在我们熟练使用React挂载和合成组件来创建应用表现层的过程中，针对数据异步或延时问题，只有充分利用组件的生命周期来把握框架载入和数据处理的时机，才能将组件性能发挥到合理水平，并提高应用程序的健壮性。基本来说，组件的生命周期可分为挂载生命周期和更新生命周期两大部分，它们都包括一系列方法，这些方法在组件渲染前后会被触发，事实上，render方法本身也是组件生命周期的一部分。当然，根据用户使用的是ES6类创建组件还是React.createClass创建组件，它们体现的生命周期有一点点的区别。使用React.createClass创建组件时，开发者可以默认在getDefalutProps和getInitialState函数中分别初始化属性和state，而使用ES6类创建组件时，这两个函数被取而代之是constructor构造函数，在构造函数内部可以获取默认属性并且设置state。完整的生命周期对比如图所示：
二、详解
1、挂载生命周期
包括方法有：constructor/getDefault/getInitialState、componentWillMount、render、componentDidMount、componentWillUnmout。
2、更新生命周期
包括方法有：componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate。
三、示例
1、React.createClass
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Hello React</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="react/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel"> const targetNode = document.getElementById("container"); const Component = React.createClass({ getDefaultProps(){
console.log("---getDefaultProps---");
return {}
}, getInitialState(){
console.log("---getInitialState---");
return ({
count: 0
})
}, componentWillMount(){
console.log("---componentWillMount---")
}, render(){
console.log("---render---");
return (
<div>
<h1>{`${this.props.title} ${this.state.count}`}</h1>
</div>
)
}, componentDidMount(){
console.log("---componentDidMount---");
this.setProps({
title:"I AM XYQ! Welcome me, current count is"
})
},
/*
* 现象：父组件更新子组件的props，在子组件接收到新的props时，更新子组件的state，但是却没有重新渲染。
* 原因：官方说在该函数中调用 this.setState() 将不会引起第二次渲染。每次子组件接收到新的props，都会重新渲染一次，
* 除非你做了处理来阻止（比如使用：shouldComponentUpdate）。 但是你可以在这次渲染前，根据新的props更新state，
* 更新state也会触发一次重新渲染，但react基于性能考虑，只会渲染一次。
* */
componentWillReceiveProps(nextProps){
console.log("---componentWillReceiveProps---");
this.setState({
count: this.state.count + 1
})
}, shouldComponentUpdate(nextProps, nextState){
console.log("---shouldComponentUpdate---"+`count is ${nextState.count}`);
return true
}, componentWillUpdate(nextProps, nextState){
console.log("---componentWillUpdate---")
}, componentDidUpdate(nextProps, nextState){
console.log("---componentDidUpdate---");
ReactDOM.unmountComponentAtNode(targetNode); //卸载根组件
}, componentWillUnmount(){
console.log("---componentWillUnmout---");
} }); ReactDOM.render(
<Component/>,
targetNode
) </script>
</body>
</html>
结果与分析 【需要把ReactDOM.unmountComponentAtNode()方法注释掉，才会显示结果，不然组件就从DOM上卸载了】
2、ES6
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Hello React</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="react/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel"> const targetNode = document.getElementById("container"); //父组件
class Parent extends React.Component { constructor(props){
super(props)
this.state = {title:""}
this.deleteComponent = this.deleteComponent.bind(this)
}; deleteComponent(){
ReactDOM.unmountComponentAtNode(targetNode); //卸载根组件
} render(){
return (
<div onClick={this.deleteComponent}>
<Children name={this.state.title}/>
</div>)
}; //父组件修改传递给子组件的属性值，子组件会触发componentWillReceiveProps函数
componentDidMount(){
this.setState({
title: "I AM XYQ! Welcome me, current count is"
})
};
} //子组件
class Children extends React.Component{ constructor(props){
super(props);
this.state = {count:0};
console.log("---constructor---")
}; componentWillMount(){
console.log("---componentWillMount---")
}; render(){
console.log("---render---");
return (
<h1>{`${this.props.name} ${this.state.count}`}</h1>
)
}; componentDidMount(){
console.log("---componentDidMount---");
}; //此处获取的nextProps就是父组件的state中的title属性
componentWillReceiveProps(nextProps){
console.log("---componentWillReceiveProps---");
this.setState({
count: this.state.count + 1
})
}; shouldComponentUpdate(nextProps, nextState){
console.log("---shouldComponentUpdate---"+`count is ${nextState.count}`);
return true
}; componentWillUpdate(nextProps, nextState){
console.log("---componentWillUpdate---")
}; componentDidUpdate(nextProps, nextState){
console.log("---componentDidUpdate---");
}; componentWillUnmount(){
console.log("---componentWillUnmout---");
}
} ReactDOM.render(
<Parent/>,
targetNode
) </script>
</body>
</html>
结果与分析 【点击deleteComponent()事件，组件就从DOM上卸载了】
React: React组件的生命周期的更多相关文章
- reactjs入门到实战（七）---- React的组件的生命周期
React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他 getInitia ...
- react native组件的生命周期
react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...
- Android React Native组件的生命周期及回调函数
熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...
- 【RN - 基础】之React Native组件的生命周期
下图描述了React Native中组件的生命周期: 从上图中可以看到,React Native组件的生命周期可以分为初始化阶段.存在阶段和销毁阶段. 实例化阶段 实例化阶段是React Native ...
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
- React：组件的生命周期
在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化.一个组件就是一个状态机,对于特定地输入,它总返回一致的输出. 一个React组件的生命周期分为三个部 ...
- react教程 — 组件的生命周期 和 执行顺序
一.组件执行的生命周期: 参考 https://www.cnblogs.com/soyxiaobi/p/9559117.html 或 https://www.c ...
- React(三)组件的生命周期
Component Specs and LifeCycle <div id="app"></div> <script src="bower_ ...
- React Native——组件的生命周期
组件生命周期 上流程图描述了组件从创建.运行到销毁的整个过程,可以看到如果一个组件在被创建,从开始一直到运行会依次调用getDefaultProps到render这五个函数:在运行过程中,如果有属性和 ...
- React入门--------组件的生命周期
Mounting/组件挂载相关: componentWillMount componentDidMount Updating/组件更新相关: componentWillReceiveProps sho ...
随机推荐
- Django ContentType 的使用
引入 一切优化,最终都是关于需求的优化.本文介绍需求确定之后的数据库表结构设计优化. 程序员应该都知道,编程是数据结构和算法的结合.所谓数据就是用户需要访问和操作的资源,比如购物类App里面的商品,图 ...
- MYSQL-JDBC批量新增-更新-删除
目录 1 概述 2 开启MYSQL服务端日志 3 深入MYSQL/JDBC批量插入 3.1 从一个例子出发 3.2 JDBC的批量插入操作 3.3 两个常被忽略的问题 3.5 误区 4 MYSQL/J ...
- EFCore连接池的坑 差点晚年不保
长话短说 上个月公司上线了一个物联网数据科学项目,我主要负责前端接受物联网事件,并提供 参数下载. webapp 部署在Azure云上,参数使用Azure SQL Server存储. 最近从灰度测试转 ...
- Git详细教程之创建本地仓库和连接Github仓库
首先要知道不只有代码,任何类型的文件都可以进行版本控制,版本控制很重要的一个特性就是你可以随时修改,比如git会记录你的任何操作,如果你想要回退到任何一个历史操作,你可以通过git轻松达到. 本地仓库 ...
- XAF Architecture XAF架构
Applications built with the eXpressApp Framework are comprised of several functional blocks. The dia ...
- Node.js+Express+MongoDB数据库实现网页注册登入功能
通过 Node.js + Express + MongoDB 实现网页注册账号 和 登入账号的功能 项目准备: 1: 事先准备好项目的页面 (首页页面 index.html)(登入页面 login.h ...
- HTTP认知（请求与响应）
web的工作是:浏览器发送请求报文 + 服务端返回响应报文 通俗的说一下web工作的一个流程: 浏览器向服务端发送HTTP请求报文:这条请求报文组成由请求行.请求头.请求体三大部分组成: 1.请求行 ...
- Win32 API编程——前言
一丶什么是Win32 API? 微软为了保护操作系统的安全性和稳定性,把系统分为内核层和用户层(内核层的代码只能在当CPU的特权级为R0状态下执行,用户层的代码在CPU特权级为R0和R3都能执行),w ...
- js的动态表格的增删改查思路
1. 首先我们要知道,动态添加,肯定不是 在页面上写死得,而是通过js调用循环放入到页面上的,我们在写动态表格的时候不要先着急写,我们第一步要做的就是构思,要把自己的逻辑先弄清楚,不然的话,前面是好写 ...
- Kafka实战(七) - 优雅地部署 Kafka 集群
既然是集群,必然有多个Kafka节点,只有单节点构成的Kafka伪集群只能用于日常测试,不可能满足线上生产需求. 真正的线上环境需要考量各种因素,结合自身的业务需求而制定.看一些考虑因素(以下顺序,可 ...