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.οnhashchange=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等数据管理工具