react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结
本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~
目前团队内对react的使用非常普遍,之前对react使用不多,正好我目前在做的项目也在使用react+redux,借着这个机会系统的学习下react+redux。
react是什么
react是一个JavaScript类库,通过react,我们可以构建可组合的UI,也就是说,我们可以通过重用组件来组合出我们的UI。可以说react的核心便是组件,目的就是重用和组合。
react解决什么问题
官网有这样一句话.
We built React to solve one problem: building large applications with data that changes over time.
我们知道,随着应用规模的不断扩大,UI背后的数据模型越来越复杂,业务逻辑也不可避免的变得越来越复杂,以至于复杂到仅仅是修复一个简单的问题我们就需要投入大量的时间和精力。
现有的很多前端框架都在致力于解决这样的问题,基本思想都是基于MV*的模式,这里有一篇文章详细介绍了各种MV*模式的原理和优缺点。
那么,react是如何解决这个问题的呢?
react聚焦于组件。react理解的组件实际上就是一个状态机。当组件处于某个状态时,就输出这个状态对应的界面。在React中,我们只需要简单的去更新某个组件的状态,然后输出基于新状态的整个界面。React负责以最高效的方式去比较两个界面并更新DOM树。至于如何对组件之外的数据进行管理,react提出了flux方案。
react点点点
生命周期
前面我们知道,react组件是一个状态机器,以状态为输入,以界面为输出。在不同状态切换之间,react提供了一系列的生命周期方法,大致可以分为如下三类:
实例化时期
react组件在实例化时会依次调用如下组件方法:
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
存在期
当react组件被实例化后,用户的一些操作会导致组件状态的更新,此时如下方法将依次被调用:
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
销毁时期
在组件销毁的时候,会调用如下组件方法:
- componentWillUnmount
这里有一段简单的测试代码:
var ChildComponent = React.createClass({
render: function () {
console.log("call render");
return (
<div>
{this.props.data}
</div>
);
},
componentWillReceiveProps: function () {
console.log("call componentWillReceiveProps");
},
shouldComponentUpdate: function () {
console.log("call shouldComponentUpdate");
return true;
},
componentWillUpdate: function () {
console.log("call componentWillUpdate");
},
componentDidUpdate: function () {
console.log("call componentDidUpdate");
},
componentWillUnmount: function () {
console.log("call componentWillUnmount");
}
});
var MyComponent = React.createClass( {
getDefaultProps: function () {
// console.log("call getDefaultProps");
return {
className: "test"
};
},
getInitialState: function () {
// console.log("call getInitialState");
// console.log("log prop: ", this.props);
return {
text: "something"
};
},
componentWillMount: function () {
console.log("call componentWillMount");
},
componentDidMount: function () {
console.log("call componentDidMount");
},
render: function () {
console.log("call render");
var child;
if (this.state.text === "after click") {
child = null;
} else {
child = <ChildComponent data={this.state.text} />;
}
return (
<div className={this.props.className} onClick={this.handleClick}>
{child}
</div>
);
},
handleClick: function () {
this.setState({
text: "after click"
});
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById("content")
);
常用API
关于API的部分,官网已经给了详尽的说明,此处略去。
JSX
JSX是react的核心组件之一。react坚信标签和生成它的代码是紧密相连的,如果展示逻辑非常复杂(事实上大多数情况下都是),那么通过模板语言来实现这些逻辑会产生大量代码,于是react做了一个非常简单、可选类似HTML语法 ,通过函数调用即可生成模板的编译器,称为JSX。
通过JSX,我们可以用HTML的语法创建JavaScript对象。比如,为了在React中生成一个链接,通过纯JavaScript可以这么写:
React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')
通过JSX这就变成了:
<a href="http://facebook.github.io/react/">Hello React!</a>
我们发现通过JSX,代码会更加简洁和易读,使用起来也更加方便。
更过关于JSX的内容请参考官方文档.
组合可重用的组件
前面我们知道,react的核心就是组件,目的就是重用和组合。那么我们如何才能做到组件可重用和组合呢?
首先说说组合。
组合描述的是一种从属关系,在面向对象编程中被描述为HAS-A的关系。
在react中,我们通过如下的代码实现组合:
<Parent><Child data={this.props.childData} /></Parent>
在这个例子中,Parent中有一个Child的实例,Parent是拥有着。在组件中,组件不能改变自身的props,组件的props始终与组件的拥有着设置的保持一致。
这里就有一个非常有趣的事情。组件的props永远来自于组件的拥有者(默认的除外),组件的拥有者可以通过它的props 或state计算出一些值,并把这些值绑定到它们拥有的组件的props上,即在react中,数据就通过props的方式从组件的拥有者单向的流向了组件。
再说说可重用。
可重用,第一感觉就是有一层抽象含义在其中。我们从若干相似的组件中抽象出一层接口,实现公共的组件。换句话说,我们把一些页面上通用的设计元素(按钮、表单等)拆分成接口设计良好的可复用组件。每一个组件经过良好的测试和封装,那么在下次开发相似的页面的时候,可以写更少的代码,也意味着更高的开发效率和更高的质量。
react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)的更多相关文章
- react学习二 生命周期
转自:https://www.cnblogs.com/gdsblog/p/7348375.html react 中compent getDefaultProps object getDefaultPr ...
- 【JAVASCRIPT】React学习-组件生命周期
摘要 整理组件加载过程,详细见官方文档:https://facebook.github.io/react/docs/react-component.html mount 过程 1)constructo ...
- React Native之生命周期
React Native生命周期主要分为三大阶段:实例化阶段(图中上框部分),存在阶段(图中左框部分),销毁阶段(图中右框部分). 如图: 下面简单讲解一下三大阶段中各自的函数: 实例化阶段: 在日常 ...
- react第三单元(react组件的生命周期)
第三单元(react组件的生命周期) #课程目标 灵活掌握react组件的生命周期以及组件的活动过程. 能够灵活使用react的生命周期 #知识点 react的类组件的生命周期分为三个阶段 实例期 存 ...
- React组件和生命周期简介
React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...
- React 学习(四) ---- 生命周期函数
现在我们能修改状态,页面可以进行交互了,但是还有一种状态改变没有解决,那就是倒计时效果,时间一直在变化,组件状态也一直在改变,但我们什么都没有做,如果要实现这样的效果,需要怎么处理? 我们都知道,改变 ...
- 2. React组件的生命周期
2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中Re ...
- Vue与React的异同 -生命周期
vue的生命周期 创建前 beforeCreate 创建 create 挂载前 beforeMount 挂载 mounted 更新前 beforeUpdate 更新 updated 销毁前 bef ...
- React 组件的生命周期方法
React 组件的生命周期方法 按渲染顺序: 1: componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行. 2: componentDidMount() – 仅在第 ...
随机推荐
- Zookeeper的安装和使用
首先在Zookeeper官网下载最新版本,下载后解压到用户目录下. tar -zxvf zookeeper-3.4.8.tar.gz 重命名conf目录下zoo_sample.cfg文件为zoo.cf ...
- Java编程中“为了性能”需做的26件事
1.尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面: (1)控制资源的使用,通过线程同步来控制 ...
- nyoj220 推桌子(贪心算法)
这道题太坑了,from 和to有可能写反,还得正过来: 推桌子 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 The famous ACM (Advanced Co ...
- 深度学习入门教程UFLDL学习实验笔记三:主成分分析PCA与白化whitening
主成分分析与白化是在做深度学习训练时最常见的两种预处理的方法,主成分分析是一种我们用的很多的降维的一种手段,通过PCA降维,我们能够有效的降低数据的维度,加快运算速度.而白化就是为了使得每个特征能有同 ...
- 医学CT图像特征提取算法(matlab实现)
本科毕设做的是医学CT图像特征提取方法研究,主要是肺部CT图像的特征提取.由于医学图像基本为灰度图像,因此我将特征主要分为三类:纹理特征,形态特征以及代数特征,每种特征都有对应的算法进行特征提取. 如 ...
- 【Network】Calico, Flannel, Weave and Docker Overlay Network 各种网络模型之间的区别
From the previous posts, I have analysed 4 different Docker multi-host network solutions - Calico, F ...
- JS中创建函数的三种方式及区别
1.函数声明 function sum1(n1,n2){ return n1+n2; }; 2.函数表达式,又叫函数字面量 var sum2=function(n1,n2){ return n1+n2 ...
- iOS之initialize与load
initialize和load 这两个方法都是是什么时候调用的呢?都有着什么样的作用,下面看看吧! initialize +(void)initialize{ } 什么时候调用:当第一次使用这个类的时 ...
- Mysql Error: Host ‘xxx.xxx.xxx.xxx’ is not allowed to connect to
1.打开cmd控制台 2. mysql -u root -p 输入密码 3. mysql>grant all privileges on *.* to 'root' @'%' identifie ...
- HTTP协议GET和POST请求的区别
浏览器中输入网址访问资源一般都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交.Http协议定义了与服务器交互的不同方法,最基本的方法有4种, ...