视图层框架
- 一个构建用户界面的框架
- 声明式的框架
- 数据驱动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> 自动跳转
