react在线文件_你也想做掌控全局的 React 大师吗？

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

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

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

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

class 

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

有！

EnixCoda/ReactLifecycleHooks​github.com

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

// 假设这是项目中已有的一个组件, app.js

// 新建的监听专用文件，在必要时引入你的项目

一个 DEMO 明明白白​codesandbox.io

原理揭秘

是 JSX ，我加了 JSX 。

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

<

JSX 是一种语法，在 React 下其对应的原生 JavaScript 表示约为

React

React 的每一次渲染实际上是多次调用了 React.createElement 方法，生成对应的 JavaScript Object （VDOM）来表达视图。如果改写该方法，将记录每个传入的 Component ，就能追踪到所有被渲染的组件。

核心代码摘要：

const 

于是每次渲染出的 VDOM 中都是被 decorate 方法处理过的新组件，带有全套的生命周期方法。而且，由于新组件的生命周期是对原组件的巧妙包装，使用 react-lifecycle-hooks 不会对你的应用表现产生任何的影响，达到了无缝切入的效果。强烈建议你玩一下上方的在线 demo ！

展望

react-lifecycle-hooks 的不是开箱即用可以直接为你提高生产力、解决实际问题的库，它只是提供了一个便于你掌握应用中 React 组件动态的入口，因此更像是为打造其他实用库而出现的基础库，比如在它之上可以开发出类似 React DevTools 的实用工具或优化 why-did-you-update！

// 简单改写 why-did-you-update

通过它甚至可以实现 polyfill react hooks！以下为我实现的概念版。

react-hooks-polyfill​github.com

实现思路请看我的另一篇文章 Enix：用 HOC 实现 React hooks ！

欢迎 Star / issue ！

PS: react-lifecycle-hooks 的名称可能让你想起近日大火的 react useHooks 概念，但二者除了名字接近外没有任何关系 :-)