Вызов функции в React

Это взаимозаменяемо?

Краткий ответ: Нет.

Давайте посмотрим на различные фрагменты, которые вы опубликовали:

someFunction() vs someFunction

С прежним синтаксисом вы фактически вызываете эту функцию. Последнее является просто ссылкой на эту функцию. Итак, когда мы используем какой?

• Вы должны использовать someFunction(), когда хотите, чтобы эта функция вызывалась и ее результат возвращался немедленно. В React это обычно наблюдается, когда вы разделяете части своего кода JSX на отдельную функцию; либо по причинам удобочитаемости или повторного использования. Например:

  render() {
    myFunction() {
      return <p>Foo Bar</p>;
    }
    return (
      <div>
        {myFunction()}
      </div>
    );
  }
  

• Вы должны использовать someFunction, когда хотите только передать ссылку на эту функцию чему-то другому. В React это обычно обработчик событий, который передается другому дочернему компоненту через props, чтобы этот компонент мог вызывать обработчик событий, когда это необходимо. Например:

  class myApp extends React.Component {
    doSomething() {
      console.log("button clicked!");
    }
    render() {
      return (
        <div>
          <Button someFunction={this.doSomething} />
        </div>
      );
    }
  }
  
  class Button extends React.Component {
    render() {
      return (
        <button onClick={this.props.someFunction}>Click me</button>
      );
    }
  }
  

someFunction() vs this.someFunction()

Это связано с контекстом функции. В основном, «где эта функция?». Является частью текущего компонента, затем используйте this.someFunction(), является ли он частью родительского компонента, переданного в качестве реквизита, затем используйте this.props.someFunction(). Является ли это функцией внутри текущего метода, тогда просто используйте someFunction().

Очевидно, что это намного больше, чем это, но это лучшее основное резюме, которое я могу дать.

Для лучшего понимания прочитайте здесь. Это отличное руководство о том, как ключевое слово this работает в Javascript и, в частности, в React.

Если вы хотите вызвать функцию, варианты 2 и с некоторыми предположениями 5 должны работать.

Если вы хотите на самом деле передать функцию как свойство какому-то дочернему компоненту, чтобы он мог вызвать ее позже (скажем, чтобы уведомить ваш корневой элемент о каком-то событии), тогда вариант 1 (с предварительной привязкой) и 3 ( с определением переменной const {handleAddTodo} = this и предварительной привязкой :) ) должно работать

// this works if handleAddTodo was prebinded or doesn't use this
handleAddTodo ={this.handleAddTodo} 

// this probably wont work unless handleAddTodo is higher order function that returns another function
handleAddTodo ={this.handleAddTodo()} 

// This wont work unless you have a var/let/const that is referencing a function
handleAddTodo ={handleAddTodo} 

// Same as 1
handleAddTodo ={this.handleAddTodo} 

// 3 and 2 combined
handleAddTodo ={handleAddTodo()} 

В ES6 вы можете использовать обычную функцию или функцию стрелки:

Функция 1 (обычная функция)

functionA(){
   //Something here
}

Затем следует вызвать this.functionA()

Функция2 (Стрелочная функция)

functionA = () => {
   //SomeThing Here
}

Затем следует вызвать this.functionA

*Function3 (например, в константе React) *

const A = (functionTest) =>{
  return (
     <div>{functionTest}</div>
    );
}

functionTest — это mapStateToProps в React :)

Я надеюсь, что это полезно для вас :)

это правильно -> handleAddTodo ={this.handleAddTodo} Когда функция передается дочернему компоненту, вы должны связать свою функцию следующим образом handleAddTodo ={this.handleAddTodo.bind(this)}. приведенный ниже код поможет развеять ваши сомнения.

Простой пример

import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);

   };

   updateState() {
      this.setState({data: 'Data updated...'})
   }

   render() {
      return (
         <div>
            <button onClick = {this.updateState}>CLICK</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}

export default App;

Дочерние события

import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);
   };

   updateState() {
      this.setState({data: 'Data updated from the child component...'})
   }

   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}

class Content extends React.Component {

   render() {
      return (
         <div>
            <button onClick = {this.props.updateStateProp.bind(this)}>CLICK</button>
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}

export default App;

Ссылка

Вы можете запускать события с помощью this.props.someProps(). Проверьте следующий образец.

import React, { Component } from 'react';    

class AddToDo extends Component {
   render() {
      return (
         <button onClick={ev => this.props.handleAddToDo(ev, 'hello')}>
            {this.props.title}
         </button>
      )
   }
}

class Todos extends Component {
   handleAddToDo(ev, someVal) {
      // do something
   }

   render() {
      return (
         <AddToDo title="Add" handleAddToDo={(ev, someVal) => this.handleAddToDo(ev, someVal)} />
      )
   }
}

export default Todos;

Чтобы вызвать функцию, вы должны добавить ()

{this.handleAddTodo()}   

Об обработке событий — Обработка#Events

Функции стрелок — Functions#ArrowFunctions