React组件回调实现方法有什么区别

Question

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 事件，我发现我可以通过两种方式成功地将它传递到组件的 props 中。

我想知道这两种方式的确切区别是什么，因为它们似乎以相同的方式起作用？

为什么这两种方式都有效？

Answer 1

这是一个看似奇怪的共同点。

参考 handling-events

文档中的详细信息

// 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，否则，你可能需要使用下面两种方法：

一个。 public class 字段语法

在 Create React App

中默认启用

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

<button onClick={this.handleClick}>

乙。箭头函数

可能会导致性能问题，不推荐，参考上面的文档

// 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
/>

样本

基本上在我们的实践中，我们使用 public class 字段语法 和参数，如下所示：

// 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

Answer 2

 <ChildComponent
            propOne={this.sampleCallbackOne}
            propTwo={() => this.sampleCallbackTwo()}
          />

对于 propOne：您在这里传递 sampleCallbackOne 的引用。

对于 propTwo：您正在将 sampleCallbackTwo 包装在另一个函数中。

在这两种情况下你会得到相同的结果

React组件回调实现方法有什么区别

React component what's the difference between callbacks implement methods

javascript

callback

reactjs

一个。 public class 字段语法

乙。箭头函数

样本