Question

所以我想理解为什么我们不能在功能无状态组件中使用this.props进行反应。

例如，我正在研究HOC，我们可以获得这样的道具

 const withClass = (WrappedComponent, className) => {
   console.log("this is wrapped component" + WrappedComponent)

return (props) => (
        <div className={className}>
           <WrappedComponent {...props} />
      </div>
    )
}

现在，因为这是一个功能组件，所以如果我们做类似

的事情

 <WrappedComponent {...this.props} />

它不会起作用，所以我的问题是为什么我们不能在功能组件中使用this.props。

Ps：export default withClass( App, classes.App ); App是class App extends PureComponent {（如果有人想知道我们的论点。

Answer 1

功能组件没有this，因为它只是一个功能。 JavaScript中的函数没有this，直到函数不是任何对象的方法，或者不是new关键字使用的构造函数。另外值得一提的是，箭头功能，正是你的HOC究竟是什么，不可能被绑定到特定的上下文，因为它只能用于普通函数，我们可以说是标准函数。

This关键字存在于任何地方，在全局范围内它只是window对象，但只在内部对象中表示对象实例，尽管我们可以将自定义上下文（this）绑定到标准函数使用.bind或.call方法，但它是不同的主题。

回到React，如果你创建一个类组件，你将this，this.props将工作，因为类组件被new关键字及其所有方法转换为对象与this绑定作为对象的引用。

摘要 - 功能组件是纯函数，它们将props作为函数参数传递，并且没有自己的this对象。

要了解的一些额外资源：

关于背景和范围的非常好的文章：

http://ryanmorr.com/understanding-scope-and-context-in-javascript/

Answer 2

@iRohitBhatia，您的问题是需要深入JavaScript基础的问题，因为this实际上不是Reactjs概念，而是JavaScript关键字。这是good resource，但在这里我会做一个简短的介绍。

在ES6标准之前，JavaScript主要使用基于原型的编程，这是一种面向对象的编程（OOP），其中的类不是直接定义的，而是通过添加属性和方法来派生的到另一个类的实例。（See here）。

因此，在基本的JavaScript中，有两种创建对象实例的方法： Try this in Codepen

使用常规功能（在React中，请考虑：功能/无状态组件）

function createSchool(name, type) {
  const p = {};
  p.name = name;
  p.type = type;
  p.description = function(){
    alert('Hello, ' + p.name + ' is a ' + p.type + '.')
  };
  return p;
}

// create
const makerere = createSchool('Makerere', 'University');
const kitovu = createSchool("St. Henry's", 'college')

使用构造函数（在React中，认为：类/有状态组件）

function School(name, type){
  this.name = name;
  this.type = type;
  this.description = function(){
    alert('Hello, ' + this.name + ' is a ' + this.type + '.')
  }
}

// create
const makerere = new School('Makerere', 'university');
const kitovu = new School("St. Henry's", 'college');

为什么要this？

使用构造函数，我们有两个新对象，每个对象存储在不同的命名空间下-这就是为什么我们首先调用makerere或kitovu以便访问属性的原因。但是，这两个对象具有相同的属性，即属性（name和type）和方法（description）。

尽管如此，每个对象都使用我们在实例化（创建）时为其分配的属性值。关键字this使每个对象/类可以使用自己的值，而不使用其他意外值。

因此，在Reactjs中，this.props允许每个class component严格使用其自身的属性值，尽管所有类都继承自React.Component。对于functional components，props对于该组件是隐式唯一的，因为它们从不共享任何父对象。

在有状态和无状态组件中使用Props

2 个答案: