时间戳

首页 > 解决方案 > React 事件处理程序性能问题

reactjs - React 事件处理程序性能问题

问题描述

关于使用箭头函数与绑定到this事件处理程序的类方法，React 的官方文档中写道：

这种语法（箭头函数）的问题是每次LoggingButton（示例组件）呈现时都会创建不同的回调。在大多数情况下，这很好。但是，如果此回调作为道具传递给较低的组件，则这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用类字段语法，以避免此类性能问题。

既然新方法推荐使用函数组件而不是类，那么我们如何解决上述性能问题呢？

标签： reactjs

解决方案

使用useCallback来记忆函数。useCallback 的第二个参数允许您指定哪些变量应该导致重新创建函数。如果其中一个发生变化，将创建一个新的回调，否则将重用相同的函数引用。如果你不想创建一个新函数，一个空数组作为第二个参数就可以了。

import React, { useCallback } from 'react';

const ExampleComponent = (props) => {
  const onClick = useCallback(() => {
    console.log('got clicked', props.name);
  }, [props.name]);

  return (
    <SomeOtherComponent onClick={onClick} />
  )
}

推荐阅读