react学习基础储备

1. ES6的基础

1.1变量声明

• var声明变量会引起变量提升

console.log(foo)
var foo = 5
回车打印结果：
undefined
undefined

此段代码执行顺序为
var foo;
console.log(foo)  //undefined
foo = 5

• 使用let 则不会造成变量提升

console.log(foo) 
let foo = 5 
VM649:1 Uncaught SyntaxError: Identifier 'foo' has already been declared
 at <anonymous>:1:1

1.2 箭头函数

• 参数=>表达式/语句

let value = 2
let value2= x =>2*xlet value3= x =>{
    return 3*x
}

• 继承外层作用域

var obj={
    commonFn:function(){
        console.log(this)
    },
    arrowFn:()=>{
         console.log(this)
    }
}
obj.commonFn();指向obj作用域
obj.arrowFn();指向obj的作用域，window

• 不能用作构造函数
• 没有prototype属性

1.3 模版字符串

支持换行，添加变量和表达式

const str=`${3>2?'正确':'错误'}
输出：正确
dingo
`

2. 本地存储

2.1 cookie保存用户信息

document.cookie='name=wangxinyue'

2.2 localStorage

• h5新特性、有域名限制、不存在作用域概念
• 只有key-value
• 没有过期时间
• 浏览期关闭不消失

//添加
window.localStorage.setItem('nameLoca','wangxinyue')
//获取
window.localStorage.getItem('nameLoca') //"wangxinyue"
//移除
window.localStorage.removeItem('nameLoca')

2.3 sessionStorage

• sessionStorage和localStorage相似
• 浏览器关闭后消失

//添加
window.sessionStorage.setItem('nameSession','wangxinyue')//获取
window.sessionStorage.getItem('nameSession') //"wangxinyue"//移除
window.sessionStorage.removeItem('nameSession')

3. 页面加载过程

url解析->DNS查询->资源请求->浏览器解析

3.1URL结构3.2 DNS

域名

浏览器 < --------> DNS缓存+DNS服务器

IP地址

dns优化<link rel="dns-prefetch" href="//domain.com">

3.3 资源请求

3.4 浏览器解析

扩展从地址栏输入网址时，敲下回车后，发生哪些了哪些事情？ 

• 浏览器向DNS服务器（先查找缓存）查找输入URL对应的IP地址
• DNS服务器返回对应的IP地址
• 浏览器根据IP地址与目标web服务器在80端口上建立TCP连接
• 浏览器获取请求页面的html代码
• 浏览器在显示窗口内渲染HTML
• 窗口关闭时，浏览器中止与服务器的连接