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学习笔记(持续更新)的更多相关文章

  1. 数据分析之Pandas和Numpy学习笔记(持续更新)<1>

    pandas and numpy notebook        最近工作交接,整理电脑资料时看到了之前的基于Jupyter学习数据分析相关模块学习笔记.想着拿出来分享一下,可是Jupyter导出来h ...

  2. [读书]10g/11g编程艺术深入体现结构学习笔记(持续更新...)

    持续更新...) 第8章 1.在过程性循环中提交更新容易产生ora-01555:snapshot too old错误.P257 (这种情况我觉得应该是在高并发的情况下才会产生) 假设的一个场景是系统一 ...

  3. Semantic ui 学习笔记 持续更新

    这个semantic 更新版本好快~ 首先是代码的标识<code></code> 具体样式就是红框这样的 圈起来代码感觉不错 不过要在semantic.css里在加上如下样式~ ...

  4. Git学习笔记(持续更新)

    1.强制同步为远程的代码 远程仓库回退了commit的情况下(第2条描述之情况),强制同步远程的代码到本地 #更新远程最新的所有代码,但是不merge或者rebase git fetch --all ...

  5. R语言的学习笔记 (持续更新.....)

    1. DATE 处理 1.1 日期格式一个是as.Date(XXX) 和strptime(XXX),前者为Date格式,后者为POSIXlt格式 1.2 用法:as.Date(XXX,"%Y ...

  6. angularjs1学习笔记--持续更新

    angularJS使用的MVC为何不属于二十三种设计模式之一? MVC被GoF (Gang of Four,四人组, <Design Patterns: Elements of Reusable ...

  7. ggplot2 学习笔记 (持续更新.....)

    1. 目前有四种主题 theme_gray(), theme_bw() , theme_minimal(),theme_classic() 2. X轴设置刻度 scale_x_continuous(l ...

  8. # MongoDB学习笔记(持续更新)

    启动mongo服务 sodo mongo 显示数据库(显示数据库名称和大小,单位GB) > show dbs admin (empty) local 0.078GB test 0.078GB t ...

  9. GOF 的23种JAVA常用设计模式 学习笔记 持续更新中。。。。

    前言: 设计模式,前人总结下留给后人更好的设计程序,为我们的程序代码提供一种思想与认知,如何去更好的写出优雅的代码,23种设计模式,是时候需要掌握它了. 1.工厂模式 大白话:比如你需要一辆汽车,你无 ...

  10. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

随机推荐

  1. 部署Kettle做ETL开发并使用Crontab制作调度系统

    背景说明: 在数据量较小,且数据源和装载地都是关系型数据库时,使用Kettle做ETL较为简便. 由于调度系统产品因为服务器环境方面的因素,而无法部署,故使用Linux的crontab定时器来制作简易 ...

  2. 12.源码分析—如何为SOFARPC写一个序列化?

    SOFARPC源码解析系列: 1. 源码分析---SOFARPC可扩展的机制SPI 2. 源码分析---SOFARPC客户端服务引用 3. 源码分析---SOFARPC客户端服务调用 4. 源码分析- ...

  3. Python 03 整型、字符串

    1. 整型和布尔值 1.1 整型——数字(int) 用于比较和运算.  整型32位:-2**31 ~ -2**31-1 整型64位:-2**63 ~ -2**63-1 python2 :整型 int ...

  4. Codeforces 976E

    题意略. 思路: 容易知道那a次倍增放在同一个怪身上是最优的,其余的怪我们只需要取hp值和damage值中间最大的那个就好了(在b值的限制下). 然而我们并不知道把那a次倍增放在哪个怪身上最好,那么我 ...

  5. sql查询技巧指南

    传送门(牛客网我做过的每到题目答案以及解析) sql定义: 结构化查询语言(Structured Query Language)简称SQL,是一种特殊目的的编程语言,是一种数据库查询和程序设计语言,用 ...

  6. fiddler的安装于使用(一)安装fiddler

    Fiddler的简介 Fiddler是位于客户端和服务器端之间的代理,也是目前最常用的抓包工具之一 .它能够记录客户端和服务器之间的所有 请求,可以针对特定的请求,分析请求数据.设置断点.调试web应 ...

  7. Elasticsearch 在docker和centos下的安装教程

    前言 新版本的Elasticsearch不能以root用户来运行.因此,MAC下建议使用Docker来安装. 国内各版本镜像:点击这 Centos7.4 64位 第一步 下载.tar.gz的安装包 不 ...

  8. P3317 [SDOI2014]重建 变元矩阵树定理 高斯消元

    传送门:https://www.luogu.org/problemnew/show/P3317 这道题的推导公式还是比较好理解的,但是由于这个矩阵是小数的,要注意高斯消元方法的使用: #include ...

  9. 这一次,彻底弄懂 Promise 原理

    作者声明 本人将迁移至个人公众号「前端Q」及「掘金」平台写文章.博客园的文章将不再及时更新发布.欢迎大家关注公众号「前端Q」及我的掘金主页:https://juejin.im/user/5874526 ...

  10. 林大妈的JavaScript进阶知识(三):HTML5 History API

    HTML5中新增了History API,它用于管理浏览器路由跳转的一个url栈.History是window对象的一部分,它也是一个对象,因此称它是BOM(类似DOM,Browser Object ...