Javascript 应用 - React 中 Mixins 的示例

Question

这是 React 文档中的一段代码。

我试图解析当我们在组件中调用 setInterval 时发生了什么:

var SetIntervalMixin = {
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.map(clearInterval);
  }
};

var TickTock = React.createClass({
  mixins: [SetIntervalMixin], // Use the mixin
  getInitialState: function() {
    return {seconds: 0};
  },
  componentDidMount: function() {
    this.setInterval(this.tick, 1000); // Call a method on the mixin
  },
  tick: function() {
    this.setState({seconds: this.state.seconds + 1});
  },
  render: function() {
    return (
      <p>
        React has been running for {this.state.seconds} seconds.
      </p>
    );
  }
});

React.render(
  <TickTock />,
  document.getElementById('example')
);

• 我说得对吗:当我们这样做时

this.setInterval(this.tick, 1000); // Call a method on the mixin

我们将 mixin 称为 setInterval，尽管它没有参数，但它有一个关键字 arguments我们可以在正文中使用，我们称之为 apply在另一个setInterval来自 Window 命名空间，将 null 作为第一个参数，因为它是一个纯函数，并作为我们希望看到的闭包(函数 + 其状态关闭)的参数与刷新率一起执行？

• 额外问题:没有显式的高阶参数并使用 Window.setInterval(callback, Interval) 有什么好处吗？

Answer 1

你基本上是正确的，尽管它只是应用参数数组，而不是使用闭包。

正如您在链接中暗示的那样，这里有两个概念需要熟悉:

首先是Function arguments多变的。以下是其描述中的关键信息

The arguments object is a local variable available within all functions

第二个是Function.prototype.apply 。这是它的描述

The apply() method calls a function with a given this value and arguments

因此，React mixin 所做的就是获取传递到 mixin 的 setInterval 函数中的所有参数，并将它们应用于标准 setInterval 函数。它传递 null 作为 this 参数，但它也可以传递 window，因为它是 setInterval 所在的对象。使用 window 看起来像这样

this.intervals.push(setInterval.apply(window, arguments));

至于额外的问题，使用参数的好处是它提供的灵 active ，因为 window.setInterval接受间隔参数之后的附加参数。但是，该示例使用显式参数并避免使用 apply 也同样有效(假设您可以将参数限制为仅显式写入的参数)。换句话说，下面的例子在功能上几乎是等价的

setInterval: function(func, delay, param1) {
  var intervalId = window.setInterval(func, delay, param1);
  this.intervals.push(intervalId);
},

此外，使用 apply 的一个缺点是它会降低性能，因为 JIT 无法对其进行编译。大多数时候，JavaScript 代码执行并不是性能瓶颈，因此通常只需要担心相关代码是否已被识别为需要性能优化。