使用无状态组件的热加载(Hot Module Reloading)
当你开始使用 MobX 时,这一点尤其明显,因为 observables 使得创建大量的无状态组件变得非常容易。这里有一些小贴士,是关于如何构建无状态组件的同时还能享受HMR带来的便利:
函数声明和箭头函数所做的事完全相同,但实际上它们具有在 React 开发者工具中具有名称的关键优势。
然后在 React 开发者工具中是这样显示的:
现在开发者工具中可以正确的显示组件了:
确保顶层组件是有状态的观察者
在本案例中, 是无状态的,但同样可以正常使用 HMR,因为 UI 树的根级是有状态的观察者。因此,每当我们改变任何无状态组件时,它都会热加载,因为观察者同样会在根组件中触发计算。既然根组件是一个正常的老式 React 组件,它会为所有的子组件触发 HMR,瞧!无状态组件、observables 和热加载魔法般的完美融合在一起!