20、构建可扩展的Web UI：从React到Flux

构建可扩展的Web UI：从React到Flux

1. 构建简单的React应用

在构建简单的React应用时，我们使用了一些从其他来源借鉴的CSS代码，为鼠标悬停的报告添加了美观的阴影和边框效果，不过整体UI还是比较基础的。我们的主要目标是展示如何将React UI与用Go构建的云服务连接起来，而不是教授如何构建丰富的用户界面，因为这方面已有无数相关书籍。

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

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

2. 测试React应用

测试React应用可以单独写成一本书，或者至少占据一本关于React的书中很大的篇幅。在之前的开发中，我们对Go代码的测试要求非常严格，但考虑到本书的主要目标是构建云原生Go服务和应用，我们没有专门用一章来介绍React应用的单元测试。

测试React应用的基本思路是在 package.json 文件中添加一个命令来运行测试。如果查看我们模板中的 package.json 文件，会发现只是显示了一条没有测试的消息。

如果你使用像Karma这样的JavaS