使用无状态组件的热加载(Hot Module Reloading)

当你开始使用 MobX 时，这一点尤其明显，因为 observables 使得创建大量的无状态组件变得非常容易。这里有一些小贴士，是关于如何构建无状态组件的同时还能享受HMR带来的便利:

函数声明和箭头函数所做的事完全相同，但实际上它们具有在 React 开发者工具中具有名称的关键优势。

然后在 React 开发者工具中是这样显示的:

现在开发者工具中可以正确的显示组件了:

确保顶层组件是有状态的观察者

在本案例中， 是无状态的，但同样可以正常使用 HMR，因为 UI 树的根级是有状态的观察者。因此，每当我们改变任何无状态组件时，它都会热加载，因为观察者同样会在根组件中触发计算。既然根组件是一个正常的老式 React 组件，它会为所有的子组件触发 HMR，瞧！无状态组件、observables 和热加载魔法般的完美融合在一起！