React学习笔记(持续更新)
2.2页面加载过程
1.资源加载过程:URL->DNS查询->资源请求->浏览器解析
①URL结构:http://www.hhh.com:80/getdata?pid=1#title[协议://域名:端口/路径?参数#哈希]
②DNS查询:浏览器<--(ip)(域名)-->DNS缓存+DNS服务器 (dns-prefetch缓存)
③资源请求:浏览器<--(status+response-header+body)(request-header+参数(url、body))-->后端服务器
④浏览器解析:DOM--JS执行-->DOM-->渲染树-->布局-->绘制
2.3ES6常用语法
1.let变量,const常量(不能重复定义,块级作用域,不变量提升)
2.箭头函数:参数=> 表达式/语句、继承外层作用域、不能用作构造函数、没有prototype属性
3.反引号标识``、支持多行字符串、支持变量和表达式
4.Promise:Promise对象、关键词:resolve、reject、then
5.面向对象-类:关键词:class、语法糖:function、构造函数:constructor
面向对象-类的继承:extends:类的继承,super:调用父类构造函数,
面向对象-对象:对象里属性简写,对象方法简写,属性可以为表达式,其它扩展
2.5本地存储
1.cookie:①用户端保存请求信息的机制。②分号分隔的多个key-value字段。③存储在本地的加密文件里。④域名和路径限制。
字段:name:cookie名称,domain:cookie生效的域名,path:cookie生效的路径,expires:cookie过期时间,HttpOnly:用户端不可更改
2.session:①服务端保存请求信息的机制。②sessionId通常存放在cookie里。③会话由浏览器控制,会话结束,session结束。
3.localStorage:①H5新特性。②有域名限制,不存在作用域概念。③只有key-value。④没有过期时间。⑤浏览器关闭后不消失。
4.sessionStorage:①和localStorage相似。②浏览器关闭消失。
3-2前端框架要解决的问题
1.传统的原生开发方式的不足:代码层面、效率问题、多页应用问题
2.框架开发的不足:兼容性问题,SEO不友好、有场景要求,开发自由度降低、黑盒开发,框架本身有出错风险、有学习成本。
3.三大框架对比:angular:09年发布,Google;主要版本:1.x,2.x,4.x,5.x(beta);基于html的大而全的MVC框架;
react:13开源,Facebook;最新版本:16.x;基于js的视图层框架;
vue:14开源,尤雨溪,阿里weex团队;主要版本:0.1x,1.x,2.x;基于html的视图层框架;
框架对比:angular react vue
组织方式:MVC 模块化 模块化
数据绑定:双向 单向 双向
模板能力:强大 自由 简洁
自由度 : 较小 大 较大
路由: 静态路由 动态路由 动态路由
app方案:Ionic RN Weex
适用场景:后端开发构建CURD 前端开发构建复杂web 前端开发快速构建web
4.2git项目建立及配置:https://www.cnblogs.com/GuliGugaLiz/p/9484525.html
4.4webpack配置
1.需要处理的文件类型
html-->html-webpack-plugin
脚本-->babel+babel-preset-react
样式-->css-loader+sass-loader
图片/字体-->url-loader+file-loader
2.webpack常用模块
html-webpack-plugin,html单独打包成文件
extract-text-webpack-plugin,样式打包成单独文件
CommonsChunkPlugin,提出通用模块
3.webpack-dev-server
为webpack项目提供web服务;使用不便2.9.7;更改代码自动刷新,路径转发;yarn add webpack-dev-server@2.9.7 --dev;解决多版本共存问题
5.2初识react
1.视图层框架(只关注显示,不关注数据层)、组件化(不是继承模式)、JSX表达式(在html中加入了逻辑处理)、虚拟DOM(减少低效操作提高性能)
视图层框架:①一个构建用户界面的框架②声明式的框架③数据驱动DOM,再用事件反馈给数据
组件化开发:①组件组合而不是继承②state&&props③生命周期
JSX:①一直js扩展的表达式②带有逻辑的html
虚拟DOM:①对DOM进行模拟②比较操作前后的数据差异③如果数据差异,统一操作dOM
2优点:简洁、灵活、高效
3.缺点:思维转换、依赖生态、变动频繁
5.5React的生命周期
1.加载过程:constructor-->componentWillMount-->componentDidMount
2.更新过程:shouldComponentUpdate-->componentWillUpdate-->componentDidUpdate;如果是props更新组件执行componentWillReceiveProps来接受父组件传过来的props
3.组件销毁:componentWillUnmount
5.6Router原理及React-Router
1.Router原理:历史-->跳转-->事件
2.常见Router:页面Router(window.location.href='http://www.baidu.com')-->Hash Router(1.(window.location.href='#test1';2.window.onhashchange=function(){console.log(''current hash:),window.location.hash})-->H5 Router(1.history.pushState('test','Title','/index/test');2.history.replaceState('test','Title','/index/test) =>跳转到localhost:8080/index/test)
3.React-Router:<BrowserRouter>/<HashRouter>,路由方式;<Route>,路由规则;<Swithch>,路由选项;<Link/><NavLink>,跳转导航;<Redirect>,自动跳转
5.7React数据管理
1.依靠状态提升来和兄弟元素进行数据交互;通过发布订阅模式做数据交互;Redux等数据管理工具
React学习笔记(持续更新)的更多相关文章
- 数据分析之Pandas和Numpy学习笔记(持续更新)<1>
pandas and numpy notebook 最近工作交接,整理电脑资料时看到了之前的基于Jupyter学习数据分析相关模块学习笔记.想着拿出来分享一下,可是Jupyter导出来h ...
- [读书]10g/11g编程艺术深入体现结构学习笔记(持续更新...)
持续更新...) 第8章 1.在过程性循环中提交更新容易产生ora-01555:snapshot too old错误.P257 (这种情况我觉得应该是在高并发的情况下才会产生) 假设的一个场景是系统一 ...
- Semantic ui 学习笔记 持续更新
这个semantic 更新版本好快~ 首先是代码的标识<code></code> 具体样式就是红框这样的 圈起来代码感觉不错 不过要在semantic.css里在加上如下样式~ ...
- Git学习笔记(持续更新)
1.强制同步为远程的代码 远程仓库回退了commit的情况下(第2条描述之情况),强制同步远程的代码到本地 #更新远程最新的所有代码,但是不merge或者rebase git fetch --all ...
- R语言的学习笔记 (持续更新.....)
1. DATE 处理 1.1 日期格式一个是as.Date(XXX) 和strptime(XXX),前者为Date格式,后者为POSIXlt格式 1.2 用法:as.Date(XXX,"%Y ...
- angularjs1学习笔记--持续更新
angularJS使用的MVC为何不属于二十三种设计模式之一? MVC被GoF (Gang of Four,四人组, <Design Patterns: Elements of Reusable ...
- ggplot2 学习笔记 (持续更新.....)
1. 目前有四种主题 theme_gray(), theme_bw() , theme_minimal(),theme_classic() 2. X轴设置刻度 scale_x_continuous(l ...
- # MongoDB学习笔记(持续更新)
启动mongo服务 sodo mongo 显示数据库(显示数据库名称和大小,单位GB) > show dbs admin (empty) local 0.078GB test 0.078GB t ...
- GOF 的23种JAVA常用设计模式 学习笔记 持续更新中。。。。
前言: 设计模式,前人总结下留给后人更好的设计程序,为我们的程序代码提供一种思想与认知,如何去更好的写出优雅的代码,23种设计模式,是时候需要掌握它了. 1.工厂模式 大白话:比如你需要一辆汽车,你无 ...
- React学习笔记(一)- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
随机推荐
- 部署Kettle做ETL开发并使用Crontab制作调度系统
背景说明: 在数据量较小,且数据源和装载地都是关系型数据库时,使用Kettle做ETL较为简便. 由于调度系统产品因为服务器环境方面的因素,而无法部署,故使用Linux的crontab定时器来制作简易 ...
- 12.源码分析—如何为SOFARPC写一个序列化?
SOFARPC源码解析系列: 1. 源码分析---SOFARPC可扩展的机制SPI 2. 源码分析---SOFARPC客户端服务引用 3. 源码分析---SOFARPC客户端服务调用 4. 源码分析- ...
- Python 03 整型、字符串
1. 整型和布尔值 1.1 整型——数字(int) 用于比较和运算. 整型32位:-2**31 ~ -2**31-1 整型64位:-2**63 ~ -2**63-1 python2 :整型 int ...
- Codeforces 976E
题意略. 思路: 容易知道那a次倍增放在同一个怪身上是最优的,其余的怪我们只需要取hp值和damage值中间最大的那个就好了(在b值的限制下). 然而我们并不知道把那a次倍增放在哪个怪身上最好,那么我 ...
- sql查询技巧指南
传送门(牛客网我做过的每到题目答案以及解析) sql定义: 结构化查询语言(Structured Query Language)简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用 ...
- fiddler的安装于使用(一)安装fiddler
Fiddler的简介 Fiddler是位于客户端和服务器端之间的代理,也是目前最常用的抓包工具之一 .它能够记录客户端和服务器之间的所有 请求,可以针对特定的请求,分析请求数据.设置断点.调试web应 ...
- Elasticsearch 在docker和centos下的安装教程
前言 新版本的Elasticsearch不能以root用户来运行.因此,MAC下建议使用Docker来安装. 国内各版本镜像:点击这 Centos7.4 64位 第一步 下载.tar.gz的安装包 不 ...
- P3317 [SDOI2014]重建 变元矩阵树定理 高斯消元
传送门:https://www.luogu.org/problemnew/show/P3317 这道题的推导公式还是比较好理解的,但是由于这个矩阵是小数的,要注意高斯消元方法的使用: #include ...
- 这一次,彻底弄懂 Promise 原理
作者声明 本人将迁移至个人公众号「前端Q」及「掘金」平台写文章.博客园的文章将不再及时更新发布.欢迎大家关注公众号「前端Q」及我的掘金主页:https://juejin.im/user/5874526 ...
- 林大妈的JavaScript进阶知识(三):HTML5 History API
HTML5中新增了History API,它用于管理浏览器路由跳转的一个url栈.History是window对象的一部分,它也是一个对象,因此称它是BOM(类似DOM,Browser Object ...