Правильное использование функций стрелки в React

я понимаю, что функции стрелки делают вещи более эффективными, не воссоздание функций каждый раз, когда они упоминаются

это не правда.

функции стрелки обрабатывает this контекст лексическим способом, где" нормальная " функция делает это динамически.

в обоих примерах функции встроенной стрелки вы создаете новый экземпляр функции на каждый render.
Это создаст и передаст новый экземпляр на каждом render

onClick={() => {}}

в 3-м примере у вас есть только один экземпляр.
Это только передает ссылку на уже существующий экземпляр

onClick={this.myHandler}

---

Что касается преимуществ функций стрелки как полей класса (есть небольшой недостаток, я опубликую его в нижней части ответа), если у вас есть обычный обработчик функций, который должен получить доступ к текущему пример class via this:

myHandler(){
  //  this.setState(...)
}

вам нужно будет явное bind до class.
Наиболее распространенным подходом будет сделать это в constructor потому что он работает только один раз:

constructor(props){
  super(props);
  this.myHandler = this.myHandler.bind(this);
}

если вы используете функцию стрелки в качестве обработчика, вам не нужно bind до class потому что, как упоминалось выше, функция стрелки использует лексический контекст для this:

myHandler = () => {
  //  this.setState(...)
}

С обоими подходами вы будете использовать обработчик такой:

<div onClick={this.myHandler}></div> 

основная причина такого подхода:

<div onClick={() => this.myHandler(someParameter)}></div>

если вы хотите передать параметры обработчику рядом с native event что прошло, означает, что вы хотите передать параметр вверх.

как уже упоминалось, это создаст новый экземпляр функции каждого вывода.
(Для этого есть лучший подход, продолжайте читать).

пример запуска для такого случая использования:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [{ name: 'item 1', active: false }, { name: 'item 2', active: true }],
    }
  }
  toggleITem = (itemName) => {
    this.setState(prev => {
      const nextState = prev.items.map(item => {
        if (item.name !== itemName) return item;
        return {
          ...item,
          active: !item.active
        }
      });
      return { items: nextState };
    });
  }
  render() {
    const { items } = this.state;
    return (
      <div>
        {
          items.map(item => {
            const style = { color: item.active ? 'green' : 'red' };
            return (
              <div
                onClick={() => this.toggleITem(item.name)}
                style={style}
              >
                {item.name}
              </div>
          
          )})
        }
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

лучшим подходом было бы создание компонентного состава.
Вы можете создать дочерний компонент, который обертывает соответствующую разметку, будет иметь собственный обработчик и получит оба data и handler как реквизит от родителя.

дочерний компонент затем вызовет обработчик, который он получил от родителя, и передаст data в качестве параметра.

пример с ребенка компонент:

class Item extends React.Component {
  onClick = () => {
    const { onClick, name } = this.props;
    onClick(name);
  }
  render() {
    const { name, active } = this.props;
    const style = { color: active ? 'green' : 'red' };
    return (<div style={style} onClick={this.onClick}>{name}</div>)
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [{ name: 'item 1', active: false }, { name: 'item 2', active: true }],
    }
  }
  toggleITem = (itemName) => {
    this.setState(prev => {
      const nextState = prev.items.map(item => {
        if (item.name !== itemName) return item;
        return {
          ...item,
          active: !item.active
        }
      });
      return { items: nextState };
    });
  }
  render() {
    const { items } = this.state;
    return (
      <div>
        {
          items.map(item => {
            return <Item {...item} onClick={this.toggleITem} />
          })
        }
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

класс поля вниз в сторону:
Как я уже упоминал, есть небольшая нижняя сторона для полей класса.
Разница между методом класса и полем класса заключается в том, что поле класса присоединяется к instance на class (функция конструктора).
где в качестве класса методы и объекты присоединяются к прототипу.

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

учитывая этот блок кода:

class MyClass {
  myMethod(){}  
  myOtherMethod = () => {}
}

Бабель будет transpile это:

var _createClass = function() {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }
  return function(Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var MyClass = function() {
  function MyClass() {
    _classCallCheck(this, MyClass);

    this.myOtherMethod = function() {};
  }

  _createClass(MyClass, [{
    key: "myMethod",
    value: function myMethod() {}
  }]);

  return MyClass;
}();

Итак, ваш первый подход

<ThirdClass type="prev" onClick={()=>this.props.prevItem()} />

в этом вы можете передать любые аргументы, доступные в ThirdClass функции prevItem. Это хороший способ вызова родительских функций с аргументами.Такой

<ThirdClass type="prev" onClick={()=>this.props.prevItem(firstArgument, secondArgument)} />

ваш второй подход

<ThirdClass type="prev" onClick={this.props.prevItem} />

такой подход запрещает вам пройти любые конкретные ThirdClass аргументы.

оба приложения правы, это просто, это зависит от вашего использования случай. Оба подход с использованием функции стрелки es6 и прямо в вышеупомянутом соответствующие сценарии

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

Если вы не используете стрелу...

prevItem(){
  console.log("Div is clicked")
}

тогда вам придется создать конструктор, привязать его там...

class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.prevItem = this.prevItem.bind(this)
  }

  prevItem() { ... }
}

использование стрелки проще, когда вы начинаете, потому что она просто работает, и вам не нужно понимать, что такое конструктор, и углубляться в сложности this в javascript.

, производительность wise лучше привязать в конструкторе. Метод bind in constructor создаст один экземпляр функции и повторно использует его, даже если метод render вызывается несколько раз.