【前端】react学习阶段总结,学习react、react-router与redux的这些事儿
前言
插一下,我发现好多踩。。。。。是理解失误么? 欢迎指正。
---------------------------------------------
借用阮一峰的一句话:真正学会 React 是一个漫长的过程。 这句话在我接触react深入以后,更有感触了。整个react体系都是全新的,最初做简单的应用,仅仅使用react-tools打包jsx时,我被react的函数式语法吸引,从而跳入这个圈子。一直到搭建webpack、react、react-router、redux架构,做了几个SPA项目,我还是感觉自己懂的太少,还在第一阶段徘徊,在这里暂时做一个阶段性总结,接下来将继续更深入了解react——不排除再转回vue。嘿嘿。
函数式组件
react是一个由多个组件组成的web工程或者app,而这些组件都是通过一个函数对象组成的,例如
React.createClass({
render:function(){
return <div>hello</div>
}
})
这是一个es5的写法,也是我最初接触时使用的手法。通过声明reactClass注册组件,通过render定义组件的jsx。
目前我的理解是:无论是es5的createClass亦或是es6的class,其组件核心在于,创建一个构造函数,这个构造函数中的成员定义了组件的视图、行为、状态、生命周期、再通过jsx和react-dom结合渲染,实现函数式组件。
更通俗的理解我觉得是,每一个组件其实都是一个类,这个类继承了react的核心,通过重写定义组件。这里使用web说明:
这就是我认识到的react的基本组成。
难点,状态管理
react的难点之一是状态管理,好在还有Flux,redux,这些解决方案,得益于大公司(facebook)的明星效应,react的社区活跃度很高(但是我很少看到比较高质量的中文react解决方案),这类的难点解决方案总会有很多选择。鉴于redux的流行程度,国内大多数应该都是它了吧,甚至据我所知,react在国内的使用程度比不上vue、angular。
还是谈谈我对状态管理的理解;这里不提redux等解决方案,我们往往需要先搞清楚为什么要用解决方案,再去用解决方案。
前面提到了函数式组件,一般我们做项目的时候,一个组件不会仅仅满足于返回一个静态dom,我们需要能够管理组件的刷新、更改、ajax查询等。
react中引入了一个叫做getInitialState的方法,它就是用来定义组件的状态,这个方法在不同的js版本中有不同的实现:
es5:
React.createClass({
getInitialState:function(){
return {
text:"hello world"
}
},
render(){
return <div>{this.state.text}</div>
}
})
es6:
import React,{Component} from "react";
class Hello extends Component{
constructor(props){
super(props);
this.state={
text:"hello World"
}
}
render(){
return <div>{this.state.text}</div>
}
}
如果你看babel打包后的代码,通过打包后的代码也可以看出es6转换成 getInitialState声明形式。
该如何理解组件状态呢?
这样看其实更简单,简单来说组件hello有一些组件属性,例如props、state。 state是实时管理组件,用什么样的样子显示到webview中的决定属性。
对这样一个组件来说,这样其实很简单了。但是想想一个页面可以拆分成多少个组件,这么多组件在一起组合、嵌套,你想想每个组件都有一个自己的state,如果外面的组件要控制里面的组件呢?a组件要控制b组件呢?,复杂程度立刻变为困难模式。但是刀山火海总会填平的,这就是redux解决的问题。
然而伴随redux而来的,是一堆贴着标签的,嘴角还露着尖尖的邪笑的丧尸大军,哦,那是更多的技术栈体系。。。。。。
难点,项目控制
用react做的项目会不会腐烂掉?我的经验是,会的,而且烂的也很难看。且看可能出现的情况
1.某个猿A,开发了一个页面,其中有10个组件。用到3个全局状态。组件嵌套良好,代码规范。就像下图的页面关系。
2.某个猿B(新手),接手了猿A的页面后,用到1个全局状态。增加一个组件,由于他可能不清楚猿A的那10个组件中的关系。
有可能变成了这样:
这可能是比较乐观的情况,更糟糕的可能是,他创建了一个依赖大部分组件的组件。。。而这些组件又依赖某些state......
这是我目前项目中感触到的。
SPA的问题
毫无疑问,spa适合那些简单的web架构。
更复杂一点儿的页面使用就显得很糟糕。它并没有带来更多的体验。我看过最夸张的,是es项目里面一个叫做kibana的监控平台,它的主文件大小是3970k! 整个页面几乎有6-8m!即使配合缓存技术,第一次加载都会慢的无法忍受。伴随之的,是项目复杂程度直线上升,因为router多了,router复杂了,切换协调可没有以前的html那么容易。
我有一个解决方案,那就是多SPA模式,我使用缓存协调多页面state,每个页面是一个SPA,例如列表页、内容页、评论页,组成一个SPA,反而更简单。
我的state处理方式:
var state = localStorage.getItem("state");
if(state === null || state === 'null'){
state = {
//页面标题
title:"资源服务总线" }
localStorage.setItem("state",JSON.stringify(state));
}
else{
state = JSON.parse(state);
}
export {state}
多页面使用 localStorage 共享state。每个站点应用都是一个SPA。
总结
篇幅有限,阶段性的总结总是会有很多内容的,捡一些重要的,需要深刻再理解的说明。
每篇博客都代表自己的一次成长,因为我记得有一个人说:看的学习效率是10%,做的学习效率是50%,而总结的效率是70%,教授给别人是最多的100%。
另外,有不对之处,欢迎指正,感谢。
=============================
转载需在明显处注明作者与出处链接。谢谢
【前端】react学习阶段总结,学习react、react-router与redux的这些事儿的更多相关文章
- Rust学习-阶段1学习总结
学习Rust已经两周了,基本上是断断续续的在学,或者是在上下班坐公交时,或者是在ODC没事做时.现在已经学习了Rust程序设计语言的前5章,是时候做一个总结了.关于数据类型或者if else这种内容我 ...
- React入门最好的学习实例-TodoList
前言 React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件. 最近前端界闹的沸沸扬扬的技术当属react了,加上项目需要等等原因,自己也决定花些时间来好 ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- reactjs学习一(环境搭配react+es6+webpack热部署)
reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study 或者使 ...
- 【原】整理的react相关的一些学习地址,包括 react-router、redux、webpack、flux
因为平时经常去网上找react相关的一些地址,找来找去很麻烦,所以自己整理了一下,不过前面部分不是我整理的, 是出自于:http://www.cnblogs.com/aaronjs/p/4333925 ...
- webpack学习(六)—webpack+react+es6(第3篇)
接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...
- 【React】学习笔记(一)——React入门、面向组件编程、函数柯里化
课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...
- React 学习笔记(学习地址汇总)
好的博文地址:http://www.ruanyifeng.com/blog/2015/03/react.html 官网学习地址:http://facebook.github.io/react/docs ...
- React Native小白入门学习路径——五
React Native小白入门学习路径--五 序 "哦天呐!" 这句话成了我在实验室的口头禅, 老师可能觉得我们都是大神吧,都还在看着基础就给布置了那么多任务:写一个RN的TDD ...
- webpack学习(六)—webpack+react+es6(第2篇)
接上篇 webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...
随机推荐
- Python项目实战:福布斯系列之数据采集
1 数据采集概述 开始一个数据分析项目,首先需要做的就是get到原始数据,获得原始数据的方法有多种途径.比如: 获取数据集(dataset)文件 使用爬虫采集数据 直接获得excel.csv及其他数据 ...
- 修改tomcat编码方式
打开server.xml <Connector URIEncoding="UTF-8" connectionTimeout="20000" port=&q ...
- DL4NLP——词表示模型(二)基于神经网络的模型:NPLM;word2vec(CBOW/Skip-gram)
本文简述了以下内容: 神经概率语言模型NPLM,训练语言模型并同时得到词表示 word2vec:CBOW / Skip-gram,直接以得到词表示为目标的模型 (一)原始CBOW(Continuous ...
- 什么是B-Tree
B-Tree就是我们常说的B树,一定不要读成B减树,否则就很丢人了.B树这种数据结构常常用于实现数据库索引,因为它的查找效率比较高. B-Tree与二叉查找树的对比 我们知道二叉查找树查询的时间复杂度 ...
- Java之集合初探(一)
一.集合概述.区别 集合是一种容器,数组也是一种容器 在Java编程中,装各种各样的对象(引用类型)的叫做容器. 为什么出现集合类? 面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的 ...
- zabbix 配置发送邮件报警
标签:监控/SQLServer/Windows 概述 本篇文章主要介绍如何配置zabbix借助外部邮件进行发送邮件报警,zabbix通过配置文件调用mailx来进行邮件的发送.在Centos6以上的版 ...
- [COGS 1065] 绿豆蛙的归宿
先贴题面w 1065. [Nescafe19] 绿豆蛙的归宿 ★ 输入文件:ldfrog.in 输出文件:ldfrog.out 简单对比时间限制:1 s 内存限制:128 MB 随着新 ...
- 使用Modelsim进行简单仿真
这里记载一下使用modelsim进行简单的仿真,方便以后使用的时候进行查看.所谓的简单的仿真,就是没有IP核.只用图形界面不用tcl脚本进行的仿真.简单的仿真步骤为: 1.改变路径到工作环境下的路径下 ...
- cve-2017-0199&metasploit复现过程
CVE-2017-0199 WORD/RTF嵌入OLE调用远程文件执行的一个漏洞.不需要用户交互.打开文档即中招 首先更新msf到最新,据说最新版简化了利用过程,不需要开启hta这一步.但没测成功 还 ...
- Android 原生 Intent 分享支持的那些事
版权声明: 本账号发布文章均来自公众号,承香墨影(cxmyDev),版权归承香墨影所有. 每周会统一更新到这里,如果喜欢,可关注公众号获取最新文章. 未经允许,不得转载. 一.前言 对于一个 App ...