视图层框架

一个构建用户界面的框架
声明式的框架
数据驱动DOM，再用事件反馈给数据

组件化开发

组件组合而不是继承
state && props
生命周期

理解JSX

一种JS扩展的表达式
带有逻辑的标记语法，有别于HTML模板
对样式、逻辑表达式、事件的支持

虚拟DOM

对DOM进行模拟
比较操作前后的数据差异
如果有数据差异，统一操作DOM

react 优点

简洁
灵活
高效

react 缺点

思维转换
依赖生态
变动频繁

JSX 语法

react 组件

组件基本结构
state && props
事件处理
组件的组合方式

生命周期

生命周期的概念
生命周期的作用
生命周期的节点
1.mounting : 挂载阶段
2.updating: 运行阶段
3.unmounting:卸载阶段
4.error handing:错误处理阶段（16版本加入 render时的错误）

router

1.访问先后关系的一种机制。

路由历史
跳转
事件

2.常见router

页面router

hash router
h5 router

window.localtion.href="" // 打开新页面

window.localtion.href="#test"

history.pushState("起的名字"，"title","跳转的地址")   推荐地址

历史发生变化，事件 window.onpopstate=function(e){e.state}  只处理后退，不处理前进

history.replacesate("起的名字"，"title","跳转的地址")   // 替换当前路由

================================

// 页面路由
window.location.href = 'http://www.baidu.com';
history.back();


// hash路由
window.location = '#hash';
window.onhashchange = function(){
    console.log('current hash:' , window.location.hash);
}
// h5路由
// 推进一个状态
history.pushState('name','title','/path');
// 替换一个状态
history.replaceState('name','title','/path');
// popstate
window.onpopstate = function(){
    console.log(window.location.href);
    console.log(window.location.pathname);
    console.log(window.location.hash);
    console.log(window.location.search);
}