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等数据管理工具

 

posted @ 2019-01-05 01:08  GuliGugaLiz  阅读(173)  评论(0编辑  收藏  举报