不要再在React组件的回调函数中使用箭头函数！

JavaScript 箭头函数

当你在构建React应用程序时，许多开发人员喜欢使用箭头函数，因为它们简洁易用。但是，您知道直接在组件回调中使用箭头函数可能会带来一些性能问题吗？在这篇文章里，我们将分析为什么会发生这种情况，并介绍一些你应该考虑的最佳实践。

在深入了解最佳实践之前，让我们先快速回顾一下箭头函数。箭头函数是在ES6中引入的一种语法，为在JavaScript中编写函数提供了一种更简洁的语法。您可以用更简洁的写法来代替冗长的function关键字。

const add = (a, b) => a + b; // 这个函数用于将两个数字相加

它们是编写干净代码的好工具，特别是在React组件中特别有用。例如，你经常会看到类似这样的代码。

    <button onClick={() => console.log('Clicked!')}>  
      点我!  
    </button>

很简单吧？不过，问题在于箭头函数如何与React的渲染周期互动。

当你直接在 React 组件内部创建一个函数，比如在事件处理程序中使用箭头函数时，每当组件重新渲染时，都会生成一个新的函数实例。我们来看一个简单的例子：

function MyComponent() {  
  return (  
    <button onClick={() => console.log('Clicked!')}>  
      点我吧！  
    </button>  
  );  
}

乍一看，这看起来无害。但每当我组件 MyComponent 渲染（比如状态更新或父组件重新渲染时），都会创建一个新的箭头函数实例。如果出现以下情况，这可能会带来问题：

1. 您的组件频繁重新渲染：频繁的重新渲染意味着不断地创建新的函数实例，这可能会效率低下。
2. 当你将这个函数作为属性传递给子组件时：会导致这些子组件不必要的重新渲染，因为React认为每次收到的都是新的属性（即使函数执行的是相同的操作）。
3. 使用React的**useCallback**或**useMemo**进行性能优化：使用这些钩子时，新的函数实例可能会打破缓存机制，导致渲染次数比预期的更多。

对于小型应用来说，这可能不算什么大问题，但当你的应用规模扩大且组件数量增加时，性能影响会变得明显。

比如说，你有一个父组件，里面有一个项目清单。你会为清单中的每个项目渲染一个子组件。

    function ParentComponent({ items }) {  
      return (  
        <div>  
          {items.map((item) => (  
            <ChildComponent key={item.id} onClick={() => handleClick(item)} />  
          ))}  
        </div>  
      );  
    }

在这个例子中，每次 ParentComponent 重新渲染时，都会为每个项目创建一个新的箭头函数，这会导致每个 ChildComponent 也跟着重新渲染，即使 items 和 handleClick 没有改变。

为了避免这种性能问题，并让组件更易读，你应该将回调函数定义在组件渲染范围之外，并使用useCallback钩子。

如果你正在使用带钩子的功能组件，React 提供了 useCallback 这个工具，它允许你缓存函数定义。

    import { useCallback } from 'react';  

    function MyComponent() {  
      const handleClick = useCallback(() => {  
        console.log('Clicked!');  
      }, []); // 依赖数组确保函数只在依赖项改变时才会重新生成  

      return <button onClick={handleClick}>点击我!</button>;  
    }

这种方法在将函数作为属性传递给子组件时特别有效，因为这样能通过保持函数引用不变来避免不必要的重新渲染。

这并不是说箭头函数在回调中是邪恶的或应该完全避免。它们很适合快速原型或那些不常渲染的组件。如果你确定性能不会成为问题，使用它们也无妨。

但對於頻繁重新渲染的組件或將回調函數作為 props 傳遞的情況，最好避免使用內聯箭頭函數來定義回調。

箭头函数是 JavaScript 中一个很棒的功能，使代码更简洁清晰。但是直接在 React 组件的回调中使用它们，尤其是在应用变大时，可能会导致不必要的重新渲染问题和性能下降。下面是一些最佳实践建议：

• 将回调函数定义在渲染作用域之外，并使用 useCallback 在函数组件中缓存函数。
• 注意何时将回调函数作为属性传递下去。

意识到这些性能陷阱和最佳实践将帮助你构建更高效且易于扩展的React应用程序。祝你编程愉快！

在您离开之前，感谢您加入In Plain English社区！

• 记得为作者👏点个赞并关注他/她
• 关注我们：X | LinkedIn | YouTube | Discord | Newsletter
• 了解我们其他平台的内容：CoFeed | Differ
• 更多信息请访问PlainEnglish.io