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

构建可扩展的 React 和 Flux 应用

构建简单的 React 应用

在构建简单的 React 应用时，我们借鉴了一些 CSS 样式，为鼠标悬停的报告添加了漂亮的阴影和边框效果，但整体 UI 非常基础。我们的目标是展示如何将 React UI 与用 Go 构建的云服务连接起来，而不是教授如何构建丰富的用户界面，因为已有无数相关书籍。

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

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

测试 React 应用

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

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