react 生态圈之 React Router

一、React Router，路由不止是页面切换，更是代码组织方式

1. 为什么需要路由，如下所示：

• 单页应用需要进行页面切换
• 通过 URL 可以定位到页面
• 更有语义的组织资源

2. React Router 的特性，如下所示：

• 声明式路由定义
• 动态路由

3. 三种路由实现方式，如下所示：

• URL 路径
• hash 路由
• 内存路由

4. 基于路由配置进行资源组织，如下所示：

• 实现业务逻辑的松耦合
• 易于扩展，重构和维护
• 路由层面实现 Lazy Load

5. React Router API，如下所示：

• <Link>，普通链接，不会触发浏览器刷新
• <NavLink>，类型 Link 但是会添加当前选中状态
• <Prompt>，满足条件时提示用户是否离开当前页面
• <Redirect>，重定向当前页面，例如登录判断
• <Route>，路由配置的核心标记，路径匹配时显示对应组件
• <Switch>，只显示第一个匹配的路由

二、React Router，参数定义，嵌套路由的使用场景

1. 通过 URL 传递参数，如下所示：

• 如何通过 URL 传递参数，<Route path ="/topic/:id" .../>
• 如何获取参数，this.props.match.params

2. 何时需要 URL 参数，页面状态尽量通过 URL 参数定义

3. 嵌套路由，如下所示：

• 每个 React 组件都可以是路由容器
• React Router 的声明式语法可以方便的定义嵌套路由

三、UI 组件库的对比和介绍，Ant.Design，Material UI，Semantic UI

1. 选择 UI 库的考虑因素，如下所示：

• 组件库是否齐全
• 样式风格是否符合业务需求
• API 设计是否便捷和灵活
• 技术支持是否完善
• 开发是否活跃

四、使用 Next.js 创建 React 的同构应用

1. 同构应用，浏览器初次发送请求给服务器，服务端逻辑，服务器返回渲染后的 App 页面给浏览器，客户端操作

2. 创建页面，如下所示：

• 页面就是 pages 目录下的一个组件
• static 目录映射静态文件
• page 具有特殊静态方法 getInitialProps

3. 在页面中使用其它 React 组件，如下所示：

• 页面也是标准的 node 模块，可使用其它 React 组件
• 页面会针对性打包，仅包含其引入的组件

4. 使用 Link 实现同构路由，如下所示：

• 使用 next/link 定义链接
• 点击链接时页面不会刷新
• 使用 prefetch 预加载目标资源
• 使用 replace 属性替换 URL

五、使用 Jest、Enzyme 等工具进行单元测试

1. React 让前端单元测试变得容易，如下所示：

• React 应用很少需要访问浏览器 API
• 虚拟 DOM 可以在 NodeJS 环境运行和测试
• Redux 隔离了状态管理，纯数据层单元测试

2. 单元测试涉及的工具，如下所示：

• Jest，Facebook 开源的 JS 单元测试框架
• JS DOM，浏览器环境的 NodeJS 模拟
• Enzyme，React 组件渲染和测试
• nock，模拟 HTTP 请求
• sinon，函数模拟和调用追踪
• istanbul，单元测试覆盖率

六、常用开发调试工具，ESLint、Prettier、React DevTool，Redux DevTool

1. ESLint，如下所示：

• 使用 .eslintrc 进行规制的配置
• 使用 airbnb 的 Javascript 代码风格

2. Prettier，如下所示：

• 代码格式化的神器
• 保证更容易写出风格一致的代码