Question

我正在寻找一种方法将反应类方法同时绑定到构造函数中的this，因为我厌倦了为每个组件键入this._anotherFunction = this._anotherFunction.bind(this) 10次。

我还没有看到其他人为此发布解决方案，并认为分享我的答案会很有用。

有兴趣看看是否有其他人有类似的实施，或者我实施的方式是否有任何问题。

Answer 1

给出以下React类函数：

_showModal() {}
_hideModal() {}
// etc.

在构造函数中我添加了：

// bind all of the class's methods to the class
bindClassMethods.bind(this)([
  '_showModal',
  '_hideModal',
  // etc.
]);

这是我写的可重用的util函数来解决这个问题：

export function bindClassMethods(classMethods = []) {
  if (!_.isArray(classMethods)) {
    console.error(`Need to pass an array to bindClassMethods().`);
    return;
  }
  classMethods.map(fnc => {
    if (!this[fnc]) {
      console.error(
        `Warning: func ${fnc} is not defined! It probably has been removed from this class' methods.`
      );
    } else {
      this[fnc] = this[fnc].bind(this);
    }
  });
}

我发现当我忘记删除或更新功能绑定时，控制台日志对于提醒自己很有用。

Answer 2

重温此问题-先前关于将箭头函数用作类属性的建议存在一些缺点，包括性能影响。（尽管对性能的影响可以忽略不计，但值得注意的是。）

新提议的解决方案：

创建一个extends Component的新类，例如ComponentAutoBind
extends ComponentAutoBind将自动将其自己的方法绑定到类实例的任何子组件
从绑定中排除React生命周期方法

See this gist for proposed solution

Working codepen example

我意识到扩展Component可能不是最佳实践，但我的实现仅影响构造函数-所有其他Component类属性均未受影响。

以下是一些令人难以置信的链接：

https://medium.com/@forsakenharmony/you-should-maybe-mention-that-the-arrow-function-in-the-class-body-is-just-syntactic-sugar-c7bfb3383bef
https://blog.usejournal.com/arrow-functions-are-disrupting-react-components-63662d35f97b
https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36-仅讨论Render方法，但相同的原理适用于类属性

反应中的批量绑定类方法

2 个答案: