javascript - 绑定(bind)与箭头功能(用于react onClick事件)

因此，我试图学习 react ，并且对构造函数中的.bind(this)有所了解。但是我想我现在明白了，只想知道为什么我会在onClick中使用它与箭头功能。请参见下面的代码:

绑定(bind)方法确保eventClick函数中的“this”引用了类

Class Click extends react.Component {
  constructor(props) {
   super(props)
   this.clickEvent = this.clickEvent.bind(this);
  }

  render = () => (
    <button onClick={this.clickEvent}>Click Me</button>
  )

  clickEvent() {console.log(this)} // 'this' refers to the class
}

但是，此方法也引用了该类。有没有哪个优点/缺点可以使用？

Class Click extends react.Component {

  render = () => (
    <button onClick={() => {this.clickEvent()}}>Click Me</button>
  )

  clickEvent() {console.log(this)} // 'this' refers to the class
}

最佳答案

首先，让我们看一下每种技术的示例。
bundle :

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.clickHandler = this.clickHandler.bind(this);
  }

  clickHandler() {
    console.log( this )
  }

  render() {
    return <button onClick={this.clickHandler}>Click Me</button>
  }
}

箭头功能:

import React from 'react';
class MyComponent extends React.Component {
  constructor(props) {
    super(props)
  }

  clickHandler = () => {
    console.log( this )
  }

  render() {
    return <button onClick={this.clickHandler}>Click Me</button>
  }
}

优点和缺点:
在公共(public)类字段上使用箭头功能更易于理解，
由于更少的代码行，
但是请记住，使用箭头功能会影响两件事:
首先是内存和性能;当您使用类字段定义函数时，整个方法都驻留在类的每个实例的上，而不是原型(prototype)上，但是使用绑定(bind)技术，每个实例上仅存储一个小的callback，这将调用您的方法存储在原型(prototype)上。
可能会受到影响的第二件事是您如何编写单元测试。
您将无法使用组件原型(prototype)对以下函数调用进行存根:

const spy = jest.spyOn(MyComponent.prototype, 'clickHandler');
// ...
expect(spy).toHaveBeenCalled();

您将必须找到另一种方法来存根该方法，方法是通过传递 Prop 中的 spy 或检查状态更改。
结论
计算机真的很擅长阅读代码。您不必为此担心。
您可能需要考虑使用类属性箭头功能使代码更易于阅读。

但是，如果要同时保持人类可读性和性能，请考虑使用plugin-transform-arrow-functions插件(尽管对我来说是v7.2.0 caused problems)，只需运行npm i --save-dev @babel/plugin-transform-arrow-functions并将其添加到“babel.config.js”或“.babelrc”文件中即可，例如:

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": false }],
    ["@babel/plugin-transform-arrow-functions", { "spec": true }]
  ]
}

您还可以使用auto-bind decorator之类的东西，它将上面的示例转换为:

import React from 'react';
import { boundMethod as bind } from 'autobind-decorator';
class MyComponent extends React.Component {
  constructor(props) {
    super(props)
  }

  @bind
  clickHandler() {
    console.log( this )
  }

  render() {
    return <button onClick={this.clickHandler}>Click Me</button>
  }
}

关于javascript - 绑定(bind)与箭头功能(用于react onClick事件)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50375440/