Реагируй компонент, в чем разница между обратными вызовами реализующих методов - PullRequest
Новая
       9

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

1 голос
/ 06 марта 2020 

import React from 'react';
import ChildComponent from './ChildComponent';

class SampleComponent extends React.Component {

  sampleCallbackOne = () => {
    // does something
  };

  sampleCallbackTwo = () => {
    // does something
  };

  render() {
    return (
      <div>
          <ChildComponent
            propOne={this.sampleCallbackOne}
            propTwo={() => this.sampleCallbackTwo()}
          />
      </div>
    );
  }
}

export default SampleComponent;

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

Мне было интересно, в чем именно разница в обоих направлениях, поскольку они, кажется, функционируют одинаково?

Почему оба способа работают?

Ответы [ 2 ]

1 голос
/ 06 марта 2020 
 <ChildComponent
            propOne={this.sampleCallbackOne}
            propTwo={() => this.sampleCallbackTwo()}
          />

для propOne: здесь вы передаете ссылку sampleCallbackOne.

для propTwo: вы заключаете sampleCallbackTwo в другую функцию.

В обоих случаях вы получите те же результаты

1 голос
/ 06 марта 2020

Это общая точка, которая кажется странной.

См. Подробности в документе события обработки 

// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);

handleClick() {
  console.log('this is:', this);
}

<button onClick={this.handleClick}>

Если вы не добавляете () после this.handleClick, вам необходимо связать this в вашем конструкторе, в противном случае вы можете использовать следующие два метода:

A. publi c синтаксис поля класса

, который включен по умолчанию в Create React App 

handleClick = () => {
  console.log('this is:', this);
}

<button onClick={this.handleClick}>

B. Функции стрелок

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

// The same on event handling but different in:
<button
  onClick={(e) => this.deleteRow(id, e)} // automatically forwarded, implicitly
/>
<button
  onClick={this.deleteRow.bind(this, id)} // explicitly
/>

Образец

В основном в нашей практике мы используем publi c синтаксис поля класса с параметрами, которые будут выглядеть следующим образом: 

// No need to bind `this` in constructor
// Receiving params passed by elements as well as getting events of it
handler = (value: ValueType) => (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
  // Do something with passed `value` and acquired `event`
}
<NumberFormat
  ...
  onBlur={this.handler(someValue)} // Passing necessary params here
/>

Мы можем разделить handler function, передав ему различные параметры. 

// Justify via keyword of stored content in flat data structure
handler = (value: string) => (event: React.ChangeEvent<HTMLInputElement>, id: ValidationItems) => {
  // Do something with 
  // passed `value`, 
  // acquired `event`,
  // for each element diffenced via `id`
};

<YourComponent
  id="ID_1"
  value={store.name1}
  onChange={this.handler("name1")}
/>;

<YourComponent
  id="ID_2"
  value={store.name2}
  onChange={this.handler("name2")}
/>;

// ... more similar input text fields
...