Reactjs 了解this.function（）和this.function之间的区别

您好，我一直在阅读react以及编写一些代码，我忍不住注意到，在代码的某些部分，我们将使用

this.function（）

，在一些部分，我们将使用

this.function

调用。我不明白它们之间的区别，以及如何确定何时使用

调用（）

我什么时候不应该

例如，我可以使用下面的代码

this.function

//Arrow function used to bind the necessary variables
CallFunction = (event) =>{ 
   console.log("Event was called");
}

render(){
   return(
      <form onSubmit={this.CallFunction} />
   );
}

//用于绑定必要变量的箭头函数
调用函数=（事件）=>{
log（“调用了事件”）；
}
render（）{
返回(
);
}

接下来，我可以有以下代码

CallFunction () {
   console.log("Event was called");
}

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

CallFunction（）{
log（“调用了事件”）；
}
render（）{
返回(
{this.CallFunction（）}
);
}

这只是普通的ole javascript，它是执行函数和仅引用函数之间的区别。如果您有parens，该函数将在渲染时立即执行。因此，在第二个示例中，当这个组件挂载时，您会在控制台中立即看到“Event was called”。我们之所以必须这样做，有几个原因，一个简单的原因是，我们只想将一些代码分解成一个新函数，以便更容易阅读

对于回调，我们不希望立即执行函数，因此不使用paren。我们只是引用函数。我们基本上是说，当有人提交此表单时，我希望您执行以下功能。如果我们使用了parens，那么该函数将在组件安装时立即执行，而不是等到表单提交

编辑：有时需要在渲染时执行函数，然后返回要作为事件处理程序回调执行的新函数：

function thisRunsOnRender () {
  return function thisRunsOnSubmit (e) {
    console.log(e) // this would be the submit event
  }
}

....

render () (
  <form onSubmit={thisRunsOnRender()} />
)

函数thisRunsOnRender（）{
返回函数thisRunsOnSubmit（e）{
console.log（e）//这将是提交事件
}
}
....
渲染（）(
)

这只是普通的ole javascript，它是执行函数和仅引用函数之间的区别。如果您有parens，该函数将在渲染时立即执行。因此，在第二个示例中，当这个组件挂载时，您会在控制台中立即看到“Event was called”。我们之所以必须这样做，有几个原因，一个简单的原因是，我们只想将一些代码分解成一个新函数，以便更容易阅读

对于回调，我们不希望立即执行函数，因此不使用paren。我们只是引用函数。我们基本上是说，当有人提交此表单时，我希望您执行以下功能。如果我们使用了parens，那么该函数将在组件安装时立即执行，而不是等到表单提交

编辑：有时需要在渲染时执行函数，然后返回要作为事件处理程序回调执行的新函数：

function thisRunsOnRender () {
  return function thisRunsOnSubmit (e) {
    console.log(e) // this would be the submit event
  }
}

....

render () (
  <form onSubmit={thisRunsOnRender()} />
)

函数thisRunsOnRender（）{
返回函数thisRunsOnSubmit（e）{
console.log（e）//这将是提交事件
}
}
....
渲染（）(
)

我明白了，根据您的回答再次确认一下，我是否正确地假设

this.function

只会在

onSubmit

事件上运行，也就是说，当调用

render（）

时，它不会被触发。另一方面，

this.function（）

仅在调用

render（）

时才会触发。因此，如果我将

this.function（）

放入

中，就会导致错误，因为触发

render（）

时调用

this.function（）

。是-或多或少。在该事件处理程序中执行函数可能不会像在运行时错误中那样实际导致“错误”，但如果您不打算在渲染时立即执行该函数，则可能会导致错误。我还忘了添加一件事。如果我使用

，如果我执行

onSubmit

事件，它是否也会激活该函数？否。尽管有时您可能需要执行一些操作，例如在那里创建一个返回新函数的函数。在这种情况下，新函数将执行如果我这样做，我假设

返回的

新函数将仅在
render（）
正确时执行？我明白了，根据您的回答再次确认一下，我是否正确地假设
this.function
将仅在
onSubmit
事件时运行，也就是说，当调用
render（）
时，它不会被触发。另一方面，
this.function（）
仅在调用
render（）
时才会触发。因此，如果我将
this.function（）
放入
中，就会导致错误，因为触发
render（）
时调用
this.function（）
。是-或多或少。在该事件处理程序中执行函数可能不会像在运行时错误中那样实际导致“错误”，但如果您不打算在渲染时立即执行该函数，则可能会导致错误。我还忘了添加一件事。如果我使用
，如果我执行
onSubmit
事件，它是否也会激活该函数？否。尽管有时您可能需要执行一些操作，例如在那里创建一个返回新函数的函数。在这种情况下，新函数将执行如果我这样做，我假设
返回的
新函数将仅在
呈现（）时执行，正确吗？