20、构建可扩展的 React 和 Flux 应用

构建可扩展的 React 和 Flux 应用

1. 构建简单的 React 应用

在构建简单的 React 应用时，使用了一些从其他来源借鉴的 CSS 代码，为鼠标悬停的报告添加了漂亮的阴影和边框效果，不过整体 UI 非常基础。

目标是展示如何将 React UI 与使用 Go 构建的云服务连接起来，而不是教授如何构建丰富的用户界面。

当应用运行起来后，可以尝试更改代码的各个方面，观察哪些 UI 部分会自动更新，哪些需要刷新浏览器。通常几乎不需要停止和启动 Webpack 监控器。

这个示例存在一些问题，它比较牵强、过于简单，且没有进行任何网络调用。当页面层次结构变得更加复杂，同一页面上有多个组件需要在状态改变时得到通知时，问题就会显现出来。React 的虚拟 DOM 能很好地响应状态变化进行重新渲染，但将事件处理程序强制传递给嵌套控件是不可扩展的，因此需要一种新的状态管理抽象，同时保持组件模型的优雅性。

2. 测试 React 应用

测试 React 应用可以是一个单独的大主题。基本思路是在 package.json 文件中添加一个命令来运行测试。如果使用像 Karma 这样的 JavaScript 测试套件，需要在项目中添加大量的样板代码和依赖项，然后在 package.json 中添加一个调用 karma start 的命令。

测试的目标是调用组件的方法，并断言其状态已相应修改。要深入了解如何断言虚拟 DOM 的状态或内容，需要查阅详细的 React 参考资料。

3. 进一步阅读资