视图层框架

• 一个构建用户界面的框架
• 声明式的框架
• 数据驱动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);
}

react-router

• <BrowserRouter> / <HashRouter> 路由方式
• <Route> 路由规则
• <Switch> 路由选项
• <Link/> , <NavLink> 路由跳转
• <Redirect> 自动跳转