Понимание разницы между this.function () и this.function - PullRequest
Новая
       13

Понимание разницы между this.function () и this.function

0 голосов
/ 21 июня 2019

Привет, я читал об реакции, а также занимался некоторым кодированием, и я не могу не заметить, что в некоторых частях кода мы будем использовать 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} />
   );
}

Далее у меня может быть следующий код 

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

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

1 Ответ

2 голосов
/ 21 июня 2019

Это просто ole javascript, это разница между выполнением функции и просто ссылкой на функцию.Если у вас есть парены, эта функция будет выполнена сразу после рендера.Таким образом, во втором примере вы увидите «Event было вызвано» сразу в консоли, когда этот компонент монтируется.Есть несколько причин, по которым нам, возможно, придется сделать это, простая из-за того, что мы просто хотим выделить часть нашего кода в новую функцию, чтобы упростить чтение.

С обратными вызовами мы не делаемЯ хочу сразу же выполнить функцию, чтобы мы не использовали парэнс.Мы просто ссылаемся на функцию.Мы в основном говорим, что вот функция, которую я хочу, чтобы вы выполняли, когда кто-то отправляет эту форму.Если бы мы использовали парены, то эта функция выполнялась бы немедленно при монтировании компонента - не дожидаясь отправки формы.

edit: иногда вам нужно выполнить функцию при рендеринге, а затем вернуть new функция, которую вы хотите выполнить как обратный вызов обработчика событий: 

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

....

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