你可能已经听说过大名鼎鼎的 why-did-you-update ，它能够发现程序中不必要的重新渲染：

其大致原理是将 React.Component.prototype.componentDidUpdate 覆盖为一个新的函数，在其中进行了每次渲染前后的 props 的深度比较，并将结果以友好直观的方式呈现给用户。但它有一个明显的缺陷——如果某一组件定义了 componentDidUpdate 方法， why-did-you-update 就失效了。

想要解决上述问题、并且更进一步地了解其他生命周期的触发情况，或者说，以上帝视角看到整个 React 应用的运行情况，该怎么做呢？

最直接的做法是，对每个组件修改其代码或使用 HoC 来达到目的。但有此类需求的项目体积往往已经具备一定规模，逐个修改代码的做法是不可接受的，想象一下在每个组件的代码都进行这样的修改会是多么繁琐的工作：

那么有没有一款轻松易用，可以在一处监听项目中所有组件的工具呢？

有！

react-lifecycle-hooks 可以帮助你可以对项目中所有组件的 React 生命周期事件进行监听，而完全不需要修改原有代码。

一切的秘密其实在 JSX ，让我们重新审视 JSX ：