React 开发文档

了解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:业务复杂,组件层级较深,兄弟组件通信密切
0%