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 属性的对象，该属性可以在组件的整个生命周期内保持不变。
以下是使用 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。
