React.js:修改所有组件的render()方法?

时间:2015-05-25 20:26:27

标签: javascript reactjs

出于调试原因,我想在一般的render()方法中添加以下行,因此它将在所有组件中执行。

console.log('render' + this.constructor.displayName, this.state);

2 个答案:

答案 0 :(得分:8)

我假设您希望在不更改任何现有代码的情况下执行此操作。我玩弄了这个并找到了一种方法如果你正在使用webpack或browserify之类的东西构建你的应用程序并且你正在使用React v0.13 < /强>

重要的是要注意,这会使用私有方法,进入React的内部,并且可能随时中断。也就是说,它可能对您的调试有用目的。

[更新到更新]

如果您使用Babel,我高度建议您查看the React Transform plugin。这将让你为React做各种漂亮的东西,包括包装(或覆盖!)render方法。

<强> [更新]

我已经找到了一种方法,可以在不侵入React.addons.Perf的情况下做到这一点;密钥是ReactCompositeComponent的模块名称和_renderValidatedComponent的函数名称 - 只需包装该方法以注入自定义行为。

请注意,您需要将此代码放在之前require("react")

var ReactCompositeComponent = require("react/lib/ReactCompositeComponent");
var oldRenderValidatedComponent = ReactCompositeComponent.Mixin._renderValidatedComponent;
ReactCompositeComponent.Mixin._renderValidatedComponent = function() {
  var name = this.getName();
  if (name && !name.match(/^ReactDOM/)) {
    console.log("render: ", this.getName(), {props: this._instance.props, state: this._instance.state});
  }
  return oldRenderValidatedComponent.apply(this, arguments);
}

然后,您将得到与下面的旧答案非常相似的结果。我已经添加了更好的道具和状态记录,并过滤掉了任何内置的ReactDOM*组件。

Example

[旧答案]

我已经覆盖了性能工具的默认measure函数,当使用React.addons.Perf时,React通过其代码库调用该函数来衡量性能。通过这样做,我们能够获得默认测量策略通常会获得的信息。请注意,这会破坏正常行为React.addons.Perf

将此代码添加到应用程序的入口点(在您需要React之后):

var ReactInjection = require("react/lib/ReactInjection");
var ReactDefaultPerf = require("react/lib/ReactDefaultPerf");

ReactDefaultPerf.start();
ReactInjection.Perf.injectMeasure(function measure(moduleName, fnName, fn) {
  return function() {
    if (moduleName === 'ReactCompositeComponent' && fnName === '_renderValidatedComponent') {
      var name = this.getName();
      if (name) {
        console.log("render: ", name);
      }
    }

    return fn.apply(this, arguments);
  }
});

您将在控制台日志中获得以下内容:

Console

没有名称的

ReactElement(即组成常规HTML元素的组件,如spandiv)未显示。一组值得注意的例外是button和其他input元素,因为React提供了复合组件来包装它们以帮助管理状态。它们显示为ReactDOMButtonReactDOMInput

答案 1 :(得分:0)

React支持Mixins解决这些交叉问题:

https://facebook.github.io/react/docs/reusable-components.html#mixins

但是,不允许在mixin中定义render方法。每个React生命周期方法的限制在以下来源中:

https://github.com/facebook/react/blob/0c6bee049efb63585fb88c995de788cefc18b789/src/core/ReactCompositeComponent.js#L189

如果您可以将此行为分配给组件生命周期中的其他步骤之一,则mixins可能适合您。