javascript - 如果你调用一个函数,它返回一个箭头函数,作为你的一个组件的属性,返回的箭头函数会被反弹吗?

标签 javascript reactjs

我不想在每次重新渲染时都重新绑定(bind)一个函数。我有一个函数,它返回一个箭头函数(一个隐式绑定(bind)函数),它在渲染期间在另一个组件的属性内调用。

我担心每次重新渲染时这可能会反弹。如果是这样,这意味着我将在每次重新渲染期间为我的组件提供新属性。如果是,我会担心性能问题。

  bar = (foo) => () => {
    // Do some things
  }

  render() {
    return (
      <For
        each="foo"
        of={ foos }
      >
        <ExampleComponent
          baz={ this.bar(foo) }
        />
      </For>
    )
  }

我想知道 baz 是否在每次重新渲染期间获得新绑定(bind)的函数。

最佳答案

你是对的 - 每次调用 bar 时都会创建一个新的匿名箭头函数,这将出现在每个渲染器上。

这个问题最常见的解决方案是制作bar一个 memoized 函数,因此它返回与上次使用相同值 foo 调用时相同的函数.只是不要忘记在 memoize 缓存上设置缓存大小限制,否则你的内存使用量将永远不会减少。我建议使用 memoize-one模块。

关于javascript - 如果你调用一个函数,它返回一个箭头函数,作为你的一个组件的属性,返回的箭头函数会被反弹吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55815694/

相关文章:

javascript - 如何使用 PUT HTTPS 方法 ReactJS 设置 handleChange 函数

javascript - 主干网、路由、链路

javascript - 为什么除非我提供 onChange 回调,否则 React 会使 input[type ="text"] 字段只读?

javascript - 有比w3schools更全面的JavaScript函数引用吗?

javascript - 如何将 javascript 应用于多个 ID?

javascript - 在 React 中隐藏 HTML 元素

reactjs - RelayContainer : Expected prop `%s` to be supplied to `%s` , 但 ' + ' 得到 `undefined` 。如果这是故意的,则传递显式的 `null`

reactjs - 如何在 React 中处理来自 D3 的大量 DOM 操作以利用其 virtualDOM

javascript - 字符串到数组nodejs

javascript - 为什么我的 Cordova 应用程序的字体在 Windows Phone 8.1 设备上非常小?