Question

在React的源代码中，原型函数具有一个带有三个参数的签名：

function Component(props, context, updater) {

但是，每当我看到有人使用现代ES6功能扩展React.Component时，他们就只用props声明构造函数，如下所示：

constructor(props)

原型函数和constructor文字之间有什么区别？剩下的两个参数在哪里呢？

Answer 1

因此Es6为它添加了class关键字和构造函数。但是，它只是语法糖，仍然像以前一样基于原型模型。我不了解其他两个参数，但我想这与创建自己的词法作用域的函数有关。

Answer 2

您显然可以使用组件中提供的所有三个参数。但通常，只有在高级情况下，我们才使用props，而不是每次都使用。同样，您可以使用其他人。

以下是使用context api的示例：

ES6类组件

class ContextConsumer extends React.Component {
  /* 
     contexTypes is a required static property to declare 
     what you want from the context
  */
  static contextTypes = {
      currentUser: React.PropTypes.object
  };
  render() {
    const {currentUser} = this.context;
    return <div>{currentUser.name}</div>;
  }
}

ES6类组件，其构造函数被覆盖

class ContextConsumer extends React.Component {
  static contextTypes = {
      currentUser: React.PropTypes.object
  };
  constructor(props, context) {
    super(props, context);
    ...
  }
  render() {
    const {currentUser} = this.context;
    return <div>{currentUser.name}</div>;
  }
}

示例取自this blog。我建议您调查一下博客以使其更加熟悉。

另一个参数是updater，您可能已经使用过this.forceUpdate()并调用了更新程序。但是事实上，在正常情况下我们不直接使用updater。虽然，我还没有遇到在构造函数中使用更新程序的情况。您也许可以弄清楚是否遇到一些高级案件。

坦率地说，使用聪明的反应，我什至从未尝试过尽可能使用props。只是为我们提供了它们，以便我们在需要时可以在生命周期挂钩中使用。

好吧，让我用react代码稍微解释一下：

function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  // If a component has string refs, we will assign a different object later.
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}

Component.prototype.forceUpdate = function(callback) {
  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};

Component函数具有3个参数，该参数正在函数内部使用。后来，定义了它的原型forceUpdate，挂钩了updater以将forceUpdate与enqueueForceUpdate排队。因此，this.forceUpdate实际上调用了Component更新程序，并允许我们重新呈现该组件。我希望，现在看看它的原型方法是有道理的。

原型函数和构造函数常量之间有什么区别？

据我了解，您想知道为什么用所需的参数调用构造函数。

使用类/函数构造函数，以便可以使用对该函数的替代。例如，在构造函数内部传递props，您想对此进行覆盖。因此，您明确通知该函数使用构造函数中使用的props。

React.js中ES5和ES6构造函数之间的区别

2 个答案: