从纯函数到备忘录：打造更高效的 React 函数式组件

前端

2023-11-13 07:01:44

函数式组件的魅力

在 React 中，函数式组件因其简单、高效而广受欢迎。与传统的 React.Component 组件相比，函数式组件更易于编写和理解，且性能更优。

函数式组件的优势

简洁性： 函数式组件仅是一个函数，无需定义构造函数和生命周期方法，代码更简洁。
易读性： 函数式组件的代码更易于阅读和理解，便于团队协作和维护。
性能： 函数式组件通常比 React.Component 组件性能更高，因为它们不需要创建实例，也不需要执行生命周期方法。

函数式组件的优化

尽管函数式组件已经具有较高的性能，但仍有一些方法可以进一步优化它们的性能。

使用纯函数

纯函数是指对于相同的输入，总是返回相同输出的函数。纯函数没有副作用，这意味着它们不会改变函数作用域之外的状态。

在 React 中，使用纯函数可以提高组件的性能。这是因为纯函数的输出只依赖于其输入，因此当组件的输入没有改变时，组件就不会重新渲染。

如何使用纯函数

可以使用箭头函数或 ES6 函数来定义纯函数。例如：

const add = (a, b) => a + b;

这个函数是纯函数，因为对于相同的输入 a 和 b，它总是返回相同的输出 a + b。

使用备忘录

备忘录是一种缓存机制，它可以存储函数的输入和输出。当函数再次被调用时，如果输入与上次相同，备忘录就会返回上次的输出，而无需重新执行函数。

在 React 中，可以使用备忘录来优化函数式组件的性能。这是因为备忘录可以防止组件在输入没有改变时重新渲染。

如何使用备忘录

可以使用 useMemo 钩子来使用备忘录。useMemo 钩子可以接受一个函数和一个依赖数组作为参数。当依赖数组中的值发生改变时，函数才会重新执行。否则，useMemo 钩子会返回上次执行函数的结果。

例如：

const memoizedValue = useMemo(() => {
  // 这是一个昂贵的计算
  return computeExpensiveValue();
}, [/* 依赖数组 */]);

在这个例子中，memoizedValue 变量存储了 computeExpensiveValue 函数的输出。当 computeExpensiveValue 函数的依赖数组中的值发生改变时，memoizedValue 变量才会重新计算。否则，memoizedValue 变量将始终返回上次计算的结果。