【问题标题】:React: Does using arrow functions in Functional Components result in more re-rendering?React:在功能组件中使用箭头函数会导致更多的重新渲染吗?
【发布时间】:2020-07-20 02:16:22
【问题描述】:

使用Class-based Components,我们可以在状态下使用bind,因为存在state,从而减少了重新渲染。

Functional Components 不提供此功能,因为要使用state,我们需要Hooks,而使用Hooks,该组件无需拥有state 即可获得强大的功能。

我的问题是:
对于整个 App,在 Functional Components 中使用 arrow functions (=>) 是否会导致重新渲染增加?

【问题讨论】:

  • 你能给我们一个你担心会导致额外重新渲染的代码示例吗?
  • 绑定技巧是为了this对象引用类而不是调用者......它不会导致更少的重新渲染。

标签: reactjs components arrow-functions


【解决方案1】:

好的,arrow function is a short syntax alternative to a regular function expression
它们没有自己的与 thisargumentssupernew.target 关键字的绑定。

箭头函数很简单ES6,它与react 功能无关。

其实react中的Component lifecycle受到stateprops的影响。

因此,除了在() => () 中调用setState 的部分之外,箭头函数不会直接或间接影响您的组件渲染/更新。

【讨论】:

  • 我离题了。我知道您提到的有关箭头功能的内容。但是,当使用箭头函数来绑定功能时,比如将任何 handleChange() 绑定到状态,我们可以内联进行 - 使用箭头函数 () => () - 或在组件中绑定 handleChange() - 减少重新渲染.至少这是我所知道的。
  • 除非另有说明,我怀疑您指的是“Handling events in React”的问题。即便如此,react-team 也明确表示这两种方法可以达到相同的结果。但是我会说,如果state 没有在任何arrow 函数中更新,则对组件渲染没有影响。请分享您提到的内容的链接。我也想了解更多...
猜你喜欢
  • 2021-07-25
  • 2022-11-29
  • 1970-01-01
  • 1970-01-01
  • 2021-07-25
  • 2021-01-14
  • 1970-01-01
  • 2020-01-06
  • 2021-06-02
相关资源
最近更新 更多