了解React
特点
视图层框架、组件化、JSX表达式、虚拟DMO
视图层框架
- 一个构建用户界面的框架
- 声明式的框架
- 数据驱动DOM，再用事件反馈给数据
组件化开发
- 组件组合而不是继承
- state && props
- 生命周期
理解JSX
- 一种JS扩展的表达式
- 带有逻辑的标记语法，有别于HTML模版
- 对样式，逻辑表达式和事件的支持
虚拟DOM
- 对DOM进行模拟
- 比较操作前后的数据差异
- 如果有数据差异，统一操作DOM
优点
简洁、灵活、高效
缺点
思维转换、依赖生态、变动频繁
安装React
新建React项目
在已有项目引入React
JSX语法
JSX基本语法
ReactDOM
样式处理
数据逻辑处理
React组件
组件基本机构
state && props
事件处理
组件的组合方式
组件间的数据通信
生命周期
生命周期节点
Mounting:挂载阶段
Updating:运行时阶段
Unmounting:卸载阶段
Error Handling:错误处理阶段
Router原理
历史
跳转
事件
常见Router
页面Router
Hash Router
H5 Router
React-Router
- React官方提供的路由插件，单页面应用必备
- 使用版本，react-router-dom@v4.2.2
- 动态路由，纯react组件
常用组件
/ ，路由方式 ，路由规则 ，路由选项 - /
，跳转导航 ，自动跳转
React数据管理
- 依赖状态提升来和兄弟元素进行数据交互
- 通过发布订阅模式做数据交互
- Redux等数据管理工具
应用场景
- 状态提升：组件层级扁平，兄弟组件通信情况很少
- 发布订阅：业务规模较小，层级较深的业务
- Redux：业务复杂，组件层级较深，兄弟组件通信密切