我在哪里可以找到有关为什么将对象方法分配为React中的DOM事件处理程序时的“此上下文”为什么不确定的文档？

Question

React组件似乎会改变在DOM事件处理程序中分配的的行为，但是我找不到任何详细介绍此行为的文档。

例如，当将对象的方法用作带有香草JS的DOM事件处理程序时，此上下文仍然是对象：

function SomeClass() {}
SomeClass.prototype.showThis = function() { console.log(this) };
let o = new SomeClass();

<button onclick="o.showThis()">Show "this"</button>

但是，反应改变了此行为，使得上下文变得不确定：

function SomeClass() {}
SomeClass.prototype.showThis = function() { console.log(this) };
let o = new SomeClass();

function App() {
  return (
       <button onClick={o.showThis}>Show this</button>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

解释这一点的文档在哪里？ （我可以推测为什么会发生这种情况，但想知道React文档中的何处。）

Answer 1

这不是什么特别的反应。这是由于以下事实：借助内联处理程序，当功能被调用时，它被作为对象的一部分调用：

onclick="o.showThis()"
         ^ object
                   ^^ invocation

但是在React代码中，它并未被作为对象的一部分调用 - 而是在对象的一部分。 o.showthis 被以a 回调的方式传递，然后像其他任何回调一样称呼 - 例如callback（）或类似的东西（而不是作为一个对象）。如果您非常稍微调整代码，以便将Shackthis作为对象的一部分调用，则它将显示与Inline Handler相同的行为：

onClick={() => o.showThis()}
               ^ object
                         ^^ invocation

function SomeClass() {}
SomeClass.prototype.showThis = function() { console.log(this) };
let o = new SomeClass();

function App() {
  return (
       <button onClick={() => o.showThis()}>Show this</button>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

因此，没有什么可以专门解释它的 - 这是基础JavaScript的行为。

如果将函数称为对象的一部分，并且您处于严格的模式，则类似地，您会在内联处理程序中获得未定义的。

'use strict';

function SomeClass() {}
SomeClass.prototype.showThis = function() {
  console.log(this)
};
const o = new SomeClass();

const theFn = o.showThis;

<button onclick="theFn()">Show "this"</button>