reactjs - react : Which is recommended arrow or normal function?

Question

在感到手动功能/对象绑定(bind)以及与范围相关的问题令人头疼之后，我开始使用箭头功能，但非常清楚的是，我知道使用正常功能(ES5)比使用箭头功能(ES6)更好。

我对这些功能的理解

React中的正常功能:

1. Bind object/function manually in order to play with state or props inside the function and to avoid scope related issues
2. Bind object/function always in constructor but not directly in render
3. If you do it in constructor then Webpack creates new object/function in bundle.js file only once when your component renders for the first time
4. If you do it directly in render then Webpack will create a new object/function in bundle.js file every time your component renders and re-renders
5. If you don’t bind then you can’t access state or props. You have to assign current object to a local variable otherwise this.state or this.props is undefined

React中的箭头功能:

1. No need to bind an object/function in constructor nor render
2. You no need to depend on local variable interms of current object i.e., let that = this;
3. You will not have scope issues and object/function binding takes automatically

但是我的查询是，我听说建议使用常规函数并将其绑定(bind)到构造函数中，而不要使用箭头函数，因为每次组件渲染和重新渲染时，箭头函数都会在Webpack bundle.js中创建新的对象/函数。

Is this true? Which is Recommended?

这个线程接受的答案 Correct use of arrow functions in React说->这取决于您在哪里使用Arrow函数。如果在render方法中使用了Arrow函数，则每次调用render时，它们都会创建一个新实例，就像bind如何工作一样。

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

Answer 1

那里有很多答案，但人们总是感到困惑。我知道这一点是因为我前一段时间感到困惑。一段时间后，我掌握了这些概念。

1. Bind object/function manually in order to play with state or props inside the function and to avoid scope-related issues

不完全正确。您无需绑定(bind)功能即可与状态或 Prop 一起玩。当您在合并范围中丢失 this上下文时，可以将该函数绑定(bind)到 this。例如在回调函数中。

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

您不需要绑定(bind)函数，因为 this指向您的类，并且您不会丢失其上下文。但是，如果您在按钮之类的回调中使用函数，则必须将其绑定(bind):

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

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

因为您丢失了上下文，所以这不起作用。现在，您需要以某种方式重新获得其上下文？好的，让我们看看如何做到这一点。首先，我想将其绑定(bind)到按钮回调中。

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

是的，这可行。但是，它将在每个渲染中重新创建。所以:

2. Bind object/function always in constructor but not directly in render

是的。不要像上面那样绑定(bind)它，而是在您的构造函数中进行。

3. If you do it in constructor then Webpack creates new object/function in bundle.js file only once when your component renders for the first time

4. If you do it directly in render then Webpack will create a new object/function in bundle.js file every time your component renders and re-render

您在这里总结了到目前为止我一直在尝试解释的内容。但是，我想Webpack不是这样做的，您的App是。

5. If you don’t bind then you can’t access state or props. You have to assign current object to a local variable otherwise this.state or this.props is undefined

同样，如果您在类范围内使用函数，则不必绑定(bind)它。如果在类之外使用此函数(例如按钮回调)，则必须将其绑定(bind)。这与 state或 props不相关。这与使用 this有关。

绑定(bind)的第二个选项是通过使用常规函数在构造函数中进行绑定(bind)，而第三个选项是使用无绑定(bind)的箭头函数。

现在，箭头功能。

1.No need to bind an object/function in constructor nor render

是的。

2. You no need to depend on local variable interms of current object i.e., let that = this;

是的。

3. You will not have scope issues and object/function binding takes automatically

是的。

But my query is that I heard that it’s recommended to use normal function and bind it in constructor rather than using arrow function because arrow functions create new object/function in Webpack bundle.js every time your component renders & re-renders.

就像每个人都说的那样，这取决于您在哪里使用它们。

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

在这里，它将在每个渲染中重新创建。但是，如果您不需要传递任何参数，则可以通过引用使用它。

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

这与上一个相同。因此，如果您在render方法中看到 ()，则在每个渲染中都会重新创建此函数。常规或箭头一无所谓。如果您以某种方式调用它，那么您正在重新创建它。这适用于像 aFunction.bind(this)这样的渲染中的绑定(bind)。我在那里看到 ()。

因此，请按其引用使用函数，以避免出现此问题。现在，最大的问题是，当我们需要一些论点时会发生什么？如果使用箭头函数传递参数，请尝试更改逻辑。

但这真的很重要吗？就像@Eric Kim所说的那样，如果您确实需要优化，则是一个问题。这是一个普遍的建议，因为我已经从很多人那里听到过。但就我个人而言，如果要在每个渲染器中重新创建函数，我将尽量避免使用它们。但是，这完全是个人的。

您如何更改逻辑？您正在映射具有项目的数组并创建
一个按钮。在此按钮中，您正在使用一个将项目名称传递给函数的函数。

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

将在每个项目的每个渲染中重新创建此功能!因此，更改您的逻辑，创建一个单独的 Item组件并将其映射。传递 item， aFunction作为 Prop 。然后，在此组件中使用处理程序函数，即可使用您的函数。

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

在这里，您正在使用带有其引用的 onClick处理程序，它将调用您的真实函数。在每个渲染中均不会重新创建任何功能。但是，不利的一面是，您需要编写一个单独的组件和更多代码。

您大部分时间都可以应用此逻辑。也许会有一些您不知道的例子，谁知道呢。因此，决定权由您决定。

顺便说一句，@ widged在评论中给出的Medium帖子是有关此问题的著名讨论。箭头功能真的比常规功能慢吗？是的。但是多少钱？我猜没有那么多。同样，对于已编译的代码也是如此。将来，当他们成为本地人时，他们将成为更快的人。

作为个人说明。自从我喜欢箭头功能以来，我一直都在使用它们。但是不久前在讨论中，有人说

When I see an arrow function in the class I think that: 'This function is being used/called outside of this class'. If I see a regular one I understand that this function called inside the class.

我真的很喜欢这种方法，现在，如果我不需要在类之外调用函数，我将使用常规方法。