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

Question

出于调试原因，我想将以下行添加到通用 render() 方法中，以便它会在所有组件中执行。

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

Answer 1

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

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

Answer 2

我假设您想在不更改任何现有代码的情况下执行此操作。我尝试了这个并找到了一种方法如果你正在使用类似 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* 组件。

[旧答案]

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

将此代码添加到您的应用程序的 entry-point（在您需要 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);
  }
});

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

没有名称的

ReactElements（即组成常规 HTML 元素的组件，如 span 和 div）不会显示。一组值得注意的例外是 button 和其他 input 元素，因为 React 提供了包装这些元素的复合组件以帮助管理状态。它们显示为 ReactDOMButton 和 ReactDOMInput。

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

React.js: modify render() method for all components?

javascript

reactjs