React 16 - 生态：UI 库、Next.js、测试、开发调试工具

# UI 库

# Ant.Design

• 组件齐全，适合企业场景

# Material UI

• 样式更加美观，适合 2C 场景

# 选择因素

1. 组件库是否齐全
2. 样式风格是否符合企业业务需求
3. API 设计是否便捷灵活
4. 技术支持是否完善
5. 开发是否活跃

# Next.js

# 同构应用

在服务端执行虚拟 DOM 渲染，此时前端和服务端渲染层是同一套代码

# 创建同构应用

创建 Next.js 应用程序 (opens new window)

创建页面

• 页面就是 pages 目录下的一个组件
• static 目录映射静态文件
• page 具有特殊静态方法 getInitialProps，用于获取页面初始化数据

在页面中使用其他 React 组件

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

使用 Link 实现同构路由

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

动态加载页面

代码语言：javascript复制

import dynamic from 'next/dynamic';

const DynamicComponentWithCustomLoading = dynamic(
  import('../components/hello'),
  {
    loading: () => <p>Loading...</p>,
  }
);

export default () => 
  <div>
    <Header />
    <DynamicComponentWithCustomLoading />
    <p>Home page</p>
  </div>

# 单元测试

React 让前端单元测试变得容易

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

# 相关工具

• Jest：单元测试框架
• JS DOM：浏览器环境的 Node.js 模拟
• Enzyme：React 组件渲染和测试
• nock：模拟 HTTP 请求
• sinon：函数模拟和调用跟踪
• istanbul：单元测试覆盖率

# 开发调试工具

• ESLint
• Prettier
• React DevTool
• Redux DevTool

next ui 测试 开发 调试工具

0 人点赞