ReactJs 调用 {this.functionName} 和 {this.functionName()} 有什么区别

Question

我已经使用 ReactJs 几天了。 我觉得有些语法有点奇怪。 例如，有时我必须以这种方式调用函数：

{this.functionName}

结尾没有括号。

有时我不得不这样称呼它：

{this.functionName()}

就像在这个例子中：

  <button onClick={this.streamCamVideo}>Start streaming</button>
  <h1>{this.logErrors()}</h1>

查看调用this.streamCamVideo和this.logErrors()之间的区别。
有人可以为此提供解释吗？

编辑 1：根据要求，以下是它们的定义：

  streamCamVideo() {
    var constraints = { audio: true, video: { width: 1280, height: 720 } };
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(function(mediaStream) {
        var video = document.querySelector("video");

        video.srcObject = mediaStream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
      })
      .catch(function(err) {
        console.log(err.name + ": " + err.message);
      }); // always check for errors at the end.
  }
 logErrors(){
      return(navigator.mediaDevices.toString())
  }

Answer 1

{this.streamCamVideo}是对streamCamVideo函数的引用。 您可以将this.streamCamVideo视为一个变量，其值为一个函数。 像这样思考：

const myVariable = 'some text'

const myOtherVariable = function() {
  console.log("You are inside the myOtherVariable function");
}

myVariable和myOtherVariable都是变量。 一个具有字符串的值，另一个具有函数的值。 假设您要将这两个变量都传递给另一个函数：

const anotherVariable = function(aStringVariable, aFunctionVariable) {
  console.log(aStringVariable, aFunctionVariable)
}

anotherVariable(myVariable, myOtherVariable)

您可能会看到这样的内容记录到控制台：

some text
[Function]

请注意，您永远不会看到记录到控制台的文本“您在 myOtherVariable 函数中”。 那是因为从未调用过myOtherVariable函数。 它只是传递给anotherVariable函数。 为了调用该函数，您需要执行以下操作：

const anotherVariable = function(aStringVariable, aFunctionVariable) {
  aFunctionVariable()
  console.log(aStringVariable, aFunctionVariable)
}

注意aFunctionVariable()后面的括号吗？ 这就是实际调用函数的样子。 因此，在这种情况下，您会看到类似这样的内容记录到控制台：

You are inside the myOtherVariable function
some text
[Function]

该函数实际上正在被调用。

所以在你的例子中：

<button onClick={this.streamCamVideo}>Start streaming</button>
<h1>{this.logErrors()}</h1>

this.streamCamVideo只是作为变量传递给<button>元素。 单击按钮时，将执行分配给onClick任何内容。 那时你作为变量传递的函数将被实际调用。

另外，注意this.logErrors()后面的括号吗？ 正在执行logErrors函数。 它不会作为变量传递给任何东西。

Answer 2

{this.functionName}表示在特定触发器上引用函数。 这种方式函数只会在触发时被调用。

{this.functionName()}是一个实际的函数调用，这个方法可以用来传递参数。 这个函数调用将在页面呈现时被调用。 这种方式函数将在没有任何触发器的情况下被重复调用。 为了停止重复的函数调用，我们可以使用回调。 像下面这样，

{() => this.functionName()} 。 这样函数只会被执行一次。

Answer 3

{this.functionName} 用作引用类型，它不会在每次渲染时创建实例，但 {this.functionName()} 会在每次渲染时创建一个 functionName 实例

<button onClick={this.streamCamVideo}>Start streaming</button>

在这里，如果您使用 this.streamCamVideo 现在它使用引用类型，它不会创建 streamCamVideo 的实例，而是如果您像这样使用

<button onClick={()=>{this.streamCamVideo()}}>Start streaming</button>

现在它创建了一个 streamCamVideo 实例，而不是使用 streamCamVideo 的引用。 在每次渲染时创建一个实例会降低应用程序的性能

此外，在评估时，第一个只是对函数的引用，在第二种情况下，函数被执行，表达式将被评估为函数的返回值。

Answer 4

当您希望调用函数并立即返回其结果时，我们可以使用this.logErrors() 。 在 React 中，我们通常遵循这种方法将 JSX 代码的一部分拆分为一个单独的函数，以提高可读性或可重用性。

例如：

render() {
  someFunction() {
    return <p>Hello World</p>;
  }

return (
    <div>
      {this.logErrors()}
    </div>
  );
}

当您只想传递对该函数的引用以执行其他操作时，我们可以使用this.streamCamVideo 。 在 React 中，这是在处理事件处理程序时使用的，该处理程序可以通过 props 传递给另一个子组件，以便组件可以在需要或被触发时调用事件处理程序。

例如：

class myExample extends React.Component {
  streamCamVideo() {
   console.log("button clicked!");
   }
  render() {
    return (
      <div>
        <Button someCustomFunction={this.streamCamVideo} />
      </div>
    );
  }
}

class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.someCustomFunction}>Click me</button>
    );
  }
}

Answer 5

...
this.functionName(args) {
...
}

当它被称为

... onClick={this.functionName}

反应组件接受像

function SomeReactComponent({ onClick }) {
...

这样就可以像调用 onClick 函数一样

...
onClick(someEvent);
...

以便您的函数可以使用这些参数

...
this.functionName(someEvent) {
...
}

当它这样调用时

... onClick={this.functionName()}

onClick 接受 functionName 的结果，在这种情况下它也应该是一个函数。

Answer 6

一个是属性，另一个带“()”的是函数。