1.4 React 组件生命周期
1.4.1 组件
React 中组件有自己的生命周期方法,简单理解可以为组件从 出生(实例化) -> 激活 -> 销毁 生命周期 hook。通过这些 hook 方法可以自定义组件的特性。 除此之外,还可以设置一些额外的规格配置。
这些生命周期方法都可以在调用 React.createClass 的参数对象中传入, 我们已经使用过了一些方法:
render
getInitialState
getDefaultProps
propTypes
1.4.2 mixins
类型: array mixins
mixins 可以理解为 React 的插件列表,通过这种模式在不同组件之间共享方法数据或者行为只需共享 mixin 就行,mixins 内定义的生命周期方法在组件的生命周期内都会被调用。
可能的一些疑问:
Q1. 如果组件已经定义了某个生命周期方法, mixin 内也定义了该方法,那么 mixin 内会被调用还是 组件的会被调用?
Q2. 多个插件都定义了相同生命周期的方法呢?
Q3. 那如果多个插件定义了 getInitialState 这种配置方法呢,有何影响?
插件模式并非继承的模式,对于问题 1、2 的答案是一样的,都会被调用,调用顺序为 mixins 数组中的顺序。
A1: 都会被调用
A2: 都会被调用
A3: React 会对返回结果做智能的合并,所有插件的 getInitialState 都会生效,前提条件是它们返回的字段不冲突,如果发生字段冲突,React 会提示报错。 同理如果是非 组件的规格方法,出于共享目的的一些方法在多个 mixin 中也不能冲突。
eg:
var MyMixin1 = {
componentDidMount: function() {
console.log('auto do something when component did mount');
}
};
var MyMixin2 = {
someMethod: function() {
console.log('doSomething');
}
};
var MyComponnet = React.createClass({
mixins: [MyMixin1, MyMixin2],
componentDidMount: function() {
// 调用 mixin1 共享的方法this.someMethod();
}
});
更多 mixins 的使用会在第三章中讲解。
1.4.3 statics
类型: object statics
statics 可以定义组件的类方法
eg:
var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
}
});
MyComponent.customMethod('bar'); // true
React 的组件是 OOP 的思维,MyComponent 是一个 class,class 分为类方法和实例方法,实例方法可以访问 this, 然而类方法不能,所以我们不能在 Class 中返回状态或者属性。
1.4.4 displayName
类型: string displayName
为了显示调试信息,每个组件都会有一个名称,JSX 在转为 JS 的时候自动的设置 displayName, 如下:
// Input (JSX):var MyComponent = React.createClass({ });
// Output (JS):var MyComponent = React.createClass({displayName: "MyComponent", });
当然我们也可以自定义 displayName
1.4.5 生命周期方法
下图描述了整个组件的生命周期,包含的主要几种情况:
组件被实例化的时候
组件属性改变的时候
组件状态被改变的时候
组件被销毁的时候
1.4.6 componentWillMount
void componentWillMount()
条件:第一次渲染阶段在调用 render 方法前会被调用
作用:该方法在整个组件生命周期只会被调用一次,所以可以利用该方法做一些组件内部的初始化工作
1.4.7 componentDidMount
void componentDidMount()
条件:第一次渲染成功过后,组件对应的 DOM 已经添加到页面后调用
作用:这个阶段表示组件对应的 DOM 已经存在,我们可以在这个时候做一些依赖 DOM 的操作或者其他的一些如请求数据,和第三方库整合的操作。如果嵌套了子组件,子组件会比父组件优先渲染,所以这个时候可以获取子组件对应的 DOM。
1.4.8 componentWillReceiveProps(newProps)
void componentWillReceiveProps(
object nextProps
)
条件: 当组件获取新属性的时候,第一次渲染不会调用
用处: 这个时候可以根据新的属性来修改组件状态
eg:
componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
注意: 这个时候虽说是获取新属性,但并不能确定属性一定改变了,例如一个组件被多次渲染到 DOM 中,如下面:
var Component = React.createClass({
componentWillReceiveProps: function(nextProps) {
console.log('componentWillReceiveProps', nextProps.data.bar);
},
rener: function() {
return <div> {this.props.data.bar} </div>
}
});
var container = document.getElementById('container');
var mydata = {bar: 'drinks'};
ReactDOM.render(<Component data={mydata} />, container);
ReactDOM.render(<Component data={mydata} />, container);
ReactDOM.render(<Component data={mydata} />, container);
结果会输出两次 componentWillReceiveProps,虽然属性数据没有改变,但是仍然会调用 componentWillReceiveProps 方法。
参考 Facebook (A=>B) => (B => A)
1.4.9 shouldComponentUpdate(nextProps, nextState)
boolean shouldComponentUpdate(
object nextProps, object nextState
)
条件: 接收到新属性或者新状态的时候在 render 前会被调用(除了调用 forceUpdate 和初始化渲染以外)
用处: 该方法让我们有机会决定是否重渲染组件,如果返回 false,那么不会重渲染组件,借此可以优化应用性能(在组件很多的情况)。
1.4.10 componentWillUpdate
void componentWillUpdate(
object nextProps, object nextState
)
条件:当组件确定要更新,在 render 之前调用
用处:这个时候可以确定一定会更新组件,可以执行更新前的操作
注意:方法中不能使用 setState ,setState 的操作应该在 componentWillReceiveProps 方法中调用
1.4.11 componentDidUpdate
void componentDidUpdate(
object prevProps, object prevState
)
条件:更新被应用到 DOM 之后
用处:可以执行组件更新过后的操作
1.4.12 生命周期与单向数据流
我们知道 React 的核心模式是单向数据流,这不仅仅是对于组件级别的模式,在组件内部 的生命周期中也是应该符合单向数据的模式。数据从组件的属性流入,再结合组件的状态,流入生命周期方法,直到渲染结束这都应该是一个单向的过程,其间不能随意改变组件的状态。
1.4.13 实例练习:通过 mixin 打印出组件生命周期的执行顺序
1.4 React 组件生命周期的更多相关文章
- React组件生命周期小结
React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...
- React—组件生命周期详解
React—组件生命周期详解 转自 明明的博客 http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...
- 野心勃勃的React组件生命周期
当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件 React实现了UI=Fn(St ...
- React组件生命周期过程说明
来自kiinlam github94 实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidM ...
- React组件生命周期过程说明【转】
实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getI ...
- 深入React组件生命周期
上篇博文使用React开发的一些注意要点对React开发的一些重点进行了简单的罗列总结,虽然也提到了React生命周期,但只略微小结,在此单独写篇React生命周期的总结. 在组件的整个生命周期中,随 ...
- 3. React 组件生命周期介绍
React 中的每个组件都有三个阶段,这三个阶段构成了组件完整的生命周期.组件的生命周期为]); return; } this.setState({name: event.target ...
- react组件生命周期过程
实例化 首次实例化 getDefaultProps getInitialState componentWillMount render componentDidMount 实例化完成后的更新 getI ...
- react组件生命周期
1. Mounting/组建挂载相关 (1)componentWillMount 组件将要挂载.在render之前执行,但仅执行一次,即使多次重复渲染该组件或者改变了组件的state (2)compo ...
随机推荐
- Android如何正确引用其它jar包 (转)
转:http://blog.csdn.net/liranke/article/details/17226083 Android项目常常需要引用自定义的或者外部的jar包,这里提供一些经验,供参考. 一 ...
- eclipse导入工程时出现大红色感叹号(转)
转载文章:http://blog.csdn.net/xiaotaibai2008/article/details/6365334 因为也遇到了同样的问题,所以google了以下,希望对于我这个小菜鸟有 ...
- Linux常用命令的使用方法
Linux 命令大全 Linux 命令大全 1.文件管理 cat chattr chgrp chmod chown cksum cmp diff diffstat file find git gitv ...
- 「2020 新手必备 」极速入门 Retrofit + OkHttp 网络框架到实战,这一篇就够了!
老生常谈 什么是 Retrofit ? Retrofit 早已不是什么新技术了,想必看到这篇博客的大家都早已熟知,这里就不啰嗦了,简单介绍下: Retrofit 是一个针对 Java 和 Androi ...
- CTF隐写——越光宝盒
0x题目 原题来自于实验吧:http://www.shiyanbar.com/ctf/1992 一句话,和一个PNG图片. 0x解题 1.下载图片以后,发现打不开. 首先想到的就是文件头可能被修改了, ...
- 用scp实现多服务器文件分发
需要安装expect环境 yum install expect -y vi ip.txt #主机地址池 192.168.1.1 192.168.1.2 192.168.3.3 #如果是同一网段也可以不 ...
- npm yarn bower (前端必会的工具)
https://qunitjs.com/ https://www.cnblogs.com/shytong/p/5417789.html
- 06、python的基础-->编码小知识
1.编码类型ascii A : 00000010 8位 一个字节 unicode A : 00000000 00000001 00000010 00000100 32位 四个字节 中:00000000 ...
- 20140914 1到N自然数排序
1.关于一道1到N自然数排序的华为面试题 http://blog.csdn.net/hongyuan19/article/details/1887656 为什么想进入华为 你对华为了解多少? 华为给我 ...
- Python值正则表达式(RE)
要想在Python中使用正则表达式,首先要引入模块: import re . 匹配任意一个 + 匹配至少一个 * 匹配0个至多个 ? 1个或0个(可有可无) - 表范围 \ 转义 ^ 在首 $ ...