阵营：这是推荐箭头或正常功能？阵营：这是推荐箭头或正常功能？(React: Which is rec

我开始使用箭头功能后，我觉得这样做的手动功能/对象的绑定和范围有关的问题都头疼，但非常随着研究的深入我才知道，这是更好的使用比箭头功能（ES6）正常功能（ES5）。

我对这些功能的认识

在正常功能阵营：

绑定对象/手动功能，以便与国家或道具发挥功能里面，避免范围有关的问题
绑定对象/功能总是在构造函数，但不能直接在渲染
如果您在构造函数中做到这一点，然后在的WebPack文件bundle.js创建新的对象/功能只有一次，当你的组件呈现的第一次
如果你这样做直接渲染然后会的WebPack创建新的对象/功能bundle.js文件中的每个组件的渲染和重新渲染时间
如果没有绑定，那么您将无法访问状态或道具。你必须指定当前对象的局部变量，否则this.state或this.props未定义

Arrow功能的阵营：

无需绑定的对象/函数的构造也呈现
您无需依赖于本地变量interms当前对象即，让那个=这一点;
你不会有问题的范围和对象/功能结合自动进行

但我的查询是，我听说它建议使用正常的功能，并将其绑定在构造函数，而不是使用箭头功能，因为箭头功能创建新的对象/功能的WebPack bundle.js每次你的组件呈现和重新呈现时间。

这是真的？这是推荐？

这个线程接受的答案正确使用箭头功能作出反应说- >这要看究竟在何处您使用的是Arrow功能上。如果Arrow功能是用于渲染的方法，那么他们创建一个新的实例每次渲染被称为就像绑定是如何工作的。

很抱歉，如果你觉得这是一个戏剧性的问题，但是这是我最大的疑问。请建议

Answer 1:

有这么多的答案，还有周围的人却总是感到困惑。我知道这是因为我得到了前一阵子混淆一次。一段时间后，我掌握的概念。

绑定对象/手动功能，以便与国家或道具发挥功能内，以避免与范围有关的问题

不完全正确。你并不需要绑定的功能与状态或道具玩。您绑定的功能， this时候你失去了this在范围方面。例如，在一个回调函数。

class App extends React.Component {
  state = {
    name: "foo",
  }
  aFunction() {
    console.log( this.state.name );
  }
  render() {
    return <div>{this.aFunction()}</div>;
  }
}

你并不需要你的函数绑定，因为this点你的类，你不会失去它的上下文。但是，如果你像一个按钮的回调使用功能，你必须将它绑定：

class App extends React.Component {
  state = {
    name: "foo",
  }
  aFunction() {
    console.log( this.state.name );
  }

  render() {
    return (
      <div>
        <button onClick={this.aFunction}>Click</button>
      </div>
    );
  }
}

因为你失去的情况下这是行不通的。现在，你需要得到它的上下文回莫名其妙吧？好吧，让我们来看看我们如何能做到这一点。首先，我想将它绑定在按钮的回调。

<button onClick={this.aFunction.bind(this)}>Click</button>

是啊，这个工程。但是，它会重新在每一个渲染。所以：

绑定对象/功能总是在构造函数，但不能直接在渲染

是。切勿将它像我上面那样做在你的构造。

如果您在构造函数中做到这一点，然后在的WebPack文件bundle.js创建新的对象/功能只有一次，当你的组件呈现的第一次
如果你这样做直接渲染然后会的WebPack创建新的对象/功能bundle.js文件中的每个组件的渲染和重新渲染时间

您在这里总结了我所试图解释到现在。但是，我想的WebPack是不是一个这样做，你的应用。

如果没有绑定，那么您将无法访问状态或道具。你必须指定当前对象的局部变量，否则this.state或this.props未定义

同样，如果你使用你的类域内的功能，你不必绑定。如果您使用此功能时，您在课堂之外，像一个按钮回调，你必须绑定。这是不相关的state或props 。这涉及到使用this 。

您的结合第二个选项是通过使用常规的功能，第三个是用箭头功能，而不结合做在构造函数中结合。

现在，箭头功能。

1.No需要的对象/功能结合在构造也不呈现

是。

您无需依赖于本地变量interms当前对象即，让那个=这一点;

是。

你不会有问题的范围和对象/功能结合自动进行

是。

但我的查询是，我听说它建议使用正常的功能，并将其绑定在构造函数，而不是使用箭头功能，因为箭头功能创建新的对象/功能的WebPack bundle.js每次你的组件呈现和重新呈现时间。

就像大家说，这取决于你在哪里使用它们。

render() {
    return (
        <div>
            <button onClick={() => this.aFunction()}>Click</button>
        </div>
    );
}

在此，将重新在每一个渲染。但是，如果你不需要任何参数传递给它，你可以参考使用。

render() {
    return (
        <div>
            <button onClick={this.aFunction}>Click</button>
        </div>
    );
}

这可以作为前一个。所以，如果你看到一个()中的渲染方法，此功能在每一个重新呈现。定期或箭头之一，无所谓。如果你以某种方式调用它，那么你重新创建它。这适用于绑定在渲染像aFunction.bind(this) 。我看到()那里。

所以，使用功能，通过它们的引用来避免这个问题。现在，最大的问题是，当我们需要一些参数会发生什么？如果您使用箭头函数传递参数，然后试着改变你的逻辑。

但是，它尽可能多的真正重要的？就像@Eric Kim表示，优化是一个问题，如果你真的需要它。这是一个总的建议，因为我已经从很多人听说过。但就个人而言，我试图避免使用功能，如果他们将在每一个渲染重建。但同样，这完全是个人的。

你如何改变你的逻辑是什么？你映射了与项目的数组，并创建一个按钮。在此按钮，您使用的是通过项目的名称，功能的功能。

{
    items.map( item =>
        <button onClick={() => this.aFunction(item.name)}>Click</button>
    )
}

该功能将重新在每一个渲染的每个项目！因此，改变你的逻辑，创建一个单独的Item组件并将其映射。通过该item ， aFunction作为道具。然后在这个分量的处理器功能，使用功能。

const Item = ( props ) => {
    const handleClick = () => props.aFunction( props.item.name );
    return (
        <button onClick={handleClick}>Click</button>
    );
}

在这里，您使用的是onClick其指向处理器，它调用你的真正功能。无功能将重新在每一个渲染。但是，作为一个缺点，你需要编写一个单独的组件和多一点的代码。

你可以把这个逻辑的大部分时间。也许会有一些例子，你不行，谁知道。因此，决定权在你。

顺便说一句，这@widged在评论中给了中等文章是关于此问题的讨论著名。有箭头的功能确实比普通的慢一些？是。但是有多少？与其说我猜。此外，这是对transpiled代码真。在当他们成为本地未来，那么他们将越快。

作为一个个人边注。我是用箭头功能所有的时间，因为我喜欢他们。不过，前一阵子在讨论中，有人说

当我看到班上一个箭头功能我认为：“该功能正在使用/称为这个类之外”。如果我看到一个普通一个据我所知，在类中调用该函数。

我真的很喜欢这种做法，现在如果我不需要调用超出了我的班我使用的是常规的一个我的功能。

Answer 2:

如果你有以下的代码作出反应，

class A extends React.Component {
  constructor(props) {
    super(props)
    this.state = {name: props.name}
  }
  render() {
    return (
       <button onclick={(event)=>console.log(this.state.name)} />
    )
  }
}

更改为以下

class A extends React.Component {
  state = {name: this.props.name}
  render() {
    return (
       <button onclick={this.logName} />
    )
  }
  logName = (event) => {
    console.log(this.state.name)
  }
}

这样一来，你是不是创造新的匿名功能，每一个渲染。

功能新的实例被创建你的代码运行每次()=>这是没有magic 。看看下面的成员函数

class A {
  memberFuncWithBinding = () => {}
  memberFuncWithoutBinding(){}
}

这两个成员函数当类实例化时，才创建一次。同样，没有魔法，但上部构件功能使用时，因为首选this该函数内部，你将有正确的A类此绑定。

编辑：你看，不尝试，你遇到的问题之前，优化你的代码。创造新的功能，每一个渲染速度较慢，但只有毫秒的一小部分。