17、React Hooks：性能优化与自定义钩子全解析

React Hooks：性能优化与自定义钩子全解析

1. React Memo 简介

React Memo 是一个高阶组件（HOC），它可以包裹其他组件，对组件进行记忆化处理。只有当组件的 props 发生变化时，才会重新渲染该组件。不过，并非所有情况都需要使用记忆化，Memo 的主要目的是优化性能。因此，只有在能提升应用性能时，才使用 Memo。可以使用 Profiler 来检查应用的性能，在使用 Memo 前后都运行性能分析，以确定是否值得进行记忆化处理。

2. useMemo 的使用

• 基本原理 ： useMemo() 钩子可以在函数的依赖项未发生变化时，记忆函数的输出。它接收一个函数和一个依赖项数组作为参数，当依赖项数组中的值发生变化时，会重新调用传入的函数并更新记忆的值；若依赖项未变，则返回之前记忆的值。
• 示例代码 ：
  • 最初的 Combinations.js 代码如下：

import React from "react";
const Combinations = React.memo(function ({countBooks, shelfName }) {
  console.log("Combinations component is re-rendered");
  let arrangements = 1;
  for (le