React 自定义 Hook 中，由于组件重新渲染，Hook 内部的变量可能会被重置，导致闭包行为不符合预期。一个常见的例子是在分页 Hook 中，每次调用获取下一页数据的函数时，页码都会被重置为初始值。这是因为组件每次渲染都会重新执行 Hook 函数，从而重新初始化变量。为了解决这个问题，我们可以使用 useRef Hook 来在组件的多次渲染之间保持变量的状态。
问题分析：React 组件的重新渲染
React 组件在状态更新时会重新渲染。这意味着组件函数会被重新执行，包括其中定义的变量。在自定义 Hook 中，如果我们在 Hook 函数内部定义一个变量，并在每次调用 Hook 返回的函数时修改它，那么每次组件重新渲染时，这个变量都会被重置为初始值。
例如，考虑以下分页 Hook：
import { useState } from 'react';
const usePagination = (items, itemsPerPage = 4) => {
const [itemsToRender, setItemsToRender] = useState(items.slice(0, itemsPerPage));
let curPage = 1; // 问题所在：每次渲染都会重置为 1
const totalPages = Math.ceil(items.length / itemsPerPage);
const getItems = () => {
curPage += 1;
const min = (curPage - 1) * itemsPerPage;
const max = curPage * itemsPerPage;
setItemsToRender(state => state.concat(items.slice(min, max)));
};
return { getItems, itemsToRender, curPage, totalPages };
};
export default usePagination;在这个 Hook 中，curPage 变量用于跟踪当前页码。每次调用 getItems 函数时，curPage 都会递增，并根据新的页码获取新的数据。然而，由于组件每次渲染都会重新执行 usePagination Hook，curPage 变量会被重置为 1，导致分页逻辑失效。
解决方案：使用 useRef Hook
useRef Hook 提供了一种在组件的多次渲染之间保持变量状态的方法。useRef 返回一个带有 .current 属性的对象，该属性可以在组件的整个生命周期内保持不变。
酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描
以下是使用 useRef 解决上述问题的示例：
import { useState, useRef } from 'react';
const usePagination = (items, itemsPerPage = 4) => {
const [itemsToRender, setItemsToRender] = useState(items.slice(0, itemsPerPage));
const curPage = useRef(1); // 使用 useRef 保持页码状态
const totalPages = Math.ceil(items.length / itemsPerPage);
const getItems = () => {
curPage.current += 1; // 通过 .current 访问和修改值
const min = (curPage.current - 1) * itemsPerPage;
const max = (curPage.current) * itemsPerPage;
setItemsToRender(state => state.concat(items.slice(min, max)));
};
return { getItems, itemsToRender, curPage: curPage.current, totalPages };
};
export default usePagination;在这个修改后的 Hook 中，我们使用 useRef(1) 创建了一个 curPage ref。每次调用 getItems 函数时，我们通过 curPage.current += 1 来递增页码。由于 curPage 是一个 ref，它的值会在组件的多次渲染之间保持不变，从而解决了页码被重置的问题。
代码解释:
- const curPage = useRef(1);: 这行代码创建了一个 ref 对象，并将其初始值设置为 1。curPage 变量现在是一个对象，它有一个名为 current 的属性，用于存储实际的页码值。
- curPage.current += 1;: 这行代码通过访问 curPage.current 来递增页码。由于 curPage 是一个 ref，它的 current 属性的值会在组件的多次渲染之间保持不变。
- return { getItems, itemsToRender, curPage: curPage.current, totalPages };: 在返回的 Hook 对象中，我们将 curPage.current 的值作为 curPage 属性返回。这样，组件就可以访问到当前的页码值。
注意事项
- useRef 主要用于存储可变值，这些值不会触发组件重新渲染。如果需要状态更新并触发重新渲染，请使用 useState。
- useRef 返回的是一个普通 JavaScript 对象，可以通过 .current 属性访问和修改其值。
- useRef 在组件的整个生命周期内保持不变，即使组件重新渲染，useRef 返回的对象仍然是同一个。
总结
在 React 自定义 Hook 中，由于组件重新渲染，Hook 内部的变量可能会被重置。为了解决这个问题，我们可以使用 useRef Hook 来在组件的多次渲染之间保持变量的状态。通过使用 useRef，我们可以编写更健壮、更可预测的自定义 Hook。记住，useRef 适用于存储不需要触发组件重新渲染的可变值。对于需要触发重新渲染的状态，请使用 useState。
