相关疑难解决方法(0)

所以我正在努力学习反应,并.bind(this)在构造函数中与理解混淆了一点.但是我想我现在明白了,只是想知道为什么我会在onClick中使用它与箭头函数.见下面的代码:

绑定方法确保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
}

ES6中的新箭头函数就像一行函数,它使代码更加简洁明了,并且还允许您将调用者的范围保持在函数内部,这样您就不需要做类似的事情var _this = this;,或者使用该bind功能等.

使用ES6箭头函数比普通的javascript函数有任何显着的性能提升吗？

从 React Hooks 开始，我决定放弃 React 类组件。我现在只处理钩子和功能组件。

简单的问题：

我理解在类体内使用箭头函数而不是常规函数之间的区别。箭头函数会自动绑定（词法 this）到我的类的实例，我不必在构造函数中绑定它。这很好。

但由于我不再处理类，我想知道在功能组件内部执行以下操作有什么区别：

function App() {

  // REGULAR FUNCTION
  function handleClick1() {
    console.log('handleClick1 executed...');
  }

  // ARROW FUNCTION
  const handleClick2 = () => {
    console.log('handleClick2 executed...');
  }

  return(
    <React.Fragment>
      <div className={'div1'} onClick={handleClick1}>
        Div 1 - Click me
      </div>
      <div className={'div2'} onClick={handleClick2}>
        Div 2 - Click me
      </div>
    </React.Fragment>
  );
}

题

两者都工作正常。

性能上有区别吗？我应该赞成一种方式而不是另一种方式吗？它们都在每次渲染时重新创建，对吗？

关于可能重复的注意事项

我真的不认为这是一个重复的问题。我知道关于箭头和正则之间的区别有很多问题，但我想从 React 功能组件的角度了解 React 是如何处理它的。我环顾四周，没有找到。

用于测试的代码片段

function App() {

  // REGULAR …

以不同的方式在ES6/ES2015中创建顶级功能有哪些优点/缺点？或者这仅仅是品味/风格指南等问题？

选项1:

function square(n) {
   return n * n;
}

选项2:

var square = function(n) {
  return n * n;
};

选项3:

var square = (n) => {
   return n * n;
};

选项4:

const square = (n) => {
   return n * n;
};

我们都知道常规函数和箭头函数之间的区别。这不是关于这些差异的问题，而是关于他们的表现的问题。

由于箭头函数既不必创建它们自己的this值，也不必创建它们的arguments，因此它们似乎（至少在直觉上）应该很快。在一个非常简化的基准测试中：

let i;

console.time("regular");
const regular = function(a) {
  return a * a
};
i = 10000;
while (--i) regular(i);
console.timeEnd("regular");

console.time("arrow");
const arrow = a => a * a;
i = 10000;
while (--i) arrow(i);
console.timeEnd("arrow");

在其他条件相同的情况下，箭头函数是否比常规函数更快？而且，如果“是”，差异是否与现实世界相关，或者我们可以将其作为不必要的微观优化而忽略吗？

考虑:

function f1() {
  function n11() { .. lots of code .. };
  const n12 = () => { .. lots of code .. };
  return n11()+n12()+5;
}

const f2 = () => {
  function n21() { .. lots of code .. };
  const n22 = () => { .. lots of code .. };
  return n21()+n22()+5;
}

我试图理解调用f1和f2的内存含义.

关于n11,这个答案说:

对于一些非常小且通常无关紧要的"浪费"的价值.JavaScript引擎现在效率很高,可以执行各种技巧/优化.例如,只有函数对象(但不是实际的函数代码!)需要在内部"复制".没有显示其他情况的实际测试用例,没有"浪费"问题.这个成语(嵌套和匿名函数)在JavaScript中很常见,并且非常优化.

但是我想知道这是否也适用于箭头函数(即n12,n21和n22)..开销只是如上所述的函数对象,还是每次调用f1/f2时都会复制整个嵌套函数代码？

谢谢!