React:推荐使用哪种箭头或正常功能？

Question

在我觉得做手动功能/对象绑定后,我开始使用箭头功能,并且范围相关的问题令人头疼,但我非常认真地了解使用正常功能(ES5)比使用箭头功能(ES6)更好.

我对这些功能的理解

React中的正常函数:

1. 手动绑定对象/函数以便在函数内部使用状态或道具并避免与范围相关的问题
2. 始终在构造函数中绑定对象/函数,但不直接在渲染中绑定
3. 如果你在构造函数中执行它,那么当你的组件第一次渲染时,Webpack只在bundle.js文件中创建一个新对象/函数
4. 如果你直接在渲染中执行它,那么每次组件渲染和重新渲染时,Webpack都会在bundle.js文件中创建一个新对象/函数
5. 如果你没有绑定,那么你就无法访问状态或道具.您必须将当前对象分配给本地变量,否则this.state或this.props是未定义的

React中的箭头功能:

1. 无需在构造函数中绑定对象/函数也不需要渲染
2. 你不需要依赖当前对象的局部变量interms,即,让那=这个;
3. 您不会有范围问题,并且会自动进行对象/功能绑定

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

这是真的？推荐哪个？

这个线程接受了答案在React中正确使用箭头函数说 - >这取决于你在哪里使用箭头功能.如果在render方法中使用了Arrow函数,那么每次调用render时它们都会创建一个新实例,就像bind的工作方式一样.

对不起,如果你觉得这是一个戏剧性的问题,但这是我最大的疑问.请建议

Answer 1

周围有很多答案,但人们总是感到困惑.我知道这是因为我前一段时间感到困惑.过了一段时间,我抓住了这些概念.

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>

是的,这很有效.但是,它将在每个渲染中重新创建.所以:

2. 始终在构造函数中绑定对象/函数,但不直接在渲染中绑定

是.不要像我上面那样绑定它,在构造函数中执行它.

3. 如果你在构造函数中执行它,那么当你的组件第一次渲染时,Webpack只在bundle.js文件中创建一个新对象/函数

4. 如果你直接在渲染中执行它,那么每次组件渲染和重新渲染时,Webpack都会在bundle.js文件中创建一个新对象/函数

您在此总结了我到目前为止所尝试解释的内容.但是,我认为Webpack不是这样做的,你的应用程序是.

5. 如果你没有绑定,那么你就无法访问状态或道具.您必须将当前对象分配给本地变量,否则this.state或this.props是未定义的

同样,如果在类范围内使用函数,则不必绑定它.如果你在类之外使用这个函数,比如按钮回调,你必须绑定它.这与state或无关props.这与使用有关this.

你的第二个绑定选项是使用常规函数在构造函数中进行绑定,第三个是使用不绑定的箭头函数.

现在,箭头功能.

1.不需要在构造函数中绑定对象/函数也不需要渲染

是.

2. 你不需要依赖当前对象的局部变量interms,即,让那=这个;

是.

3. 您不会有范围问题,并且会自动进行对象/功能绑定

是.

但我的疑问是我听说建议使用普通函数并将其绑定在构造函数中而不是使用箭头函数,因为每次组件渲染和重新渲染时,箭头函数都会在Webpack bundle.js中创建新的对象/函数.

就像每个人都说的那样,这取决于你使用它们的位置.

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

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

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

这与前一个一样.因此,如果()在render方法中看到a,则在每个渲染中重新创建此函数.常规或箭头,无关紧要.如果你以某种方式调用它,那么你正在重新创建它.这适用于渲染中的绑定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在评论中给出的Medium帖子是关于这个问题的着名讨论.箭头功能是否比常规功能慢？是.但是多少钱？我猜不是那么多.此外,对于已编译的代码也是如此.将来当他们成为本土人时,他们就会变得更快.

作为个人旁注.因为我喜欢它,所以我一直在使用箭头功能.但不久前有人在讨论中说

当我在课堂上看到一个箭头函数时,我认为:'此函数正在此类之外使用/调用'.如果我看到一个常规的,我明白这个函数在类中调用.

我真的很喜欢这种方法,如果我不需要在课堂外调用我的功能,我会使用常规方法.