为何更新page.current后，useRef创建的nextPage未同步更新？

问题核心在于useRef的工作机制：

• useRef的初始化参数仅在组件首次渲染时执行一次。你写const nextPage = useRef(page.current + 1)时，这个计算在第一次渲染时得到结果2，并把该值存入nextPage.current。后续无论page.current怎么变化，nextPage的初始化逻辑都不会再运行。
• useRef的current属性只是普通的JavaScript值，不存在响应式绑定关系。修改page.current = 5只是改变了page这个ref对象的current值，并不会自动触发nextPage.current的更新。

如果需要nextPage始终和page.current + 1保持同步，有几种可行方案：

• 直接计算，不单独存ref：每次需要用到下一页值时，直接使用page.current + 1，无需提前存为ref：

const handleNext = () => {
  const nextPageValue = page.current + 1;
  // 这里使用nextPageValue执行后续操作
};

• 手动同步更新：修改page.current的同时，手动更新nextPage.current：

page.current = 5;
nextPage.current = page.current + 1; // 同步更新nextPage

• 改用useState（需触发渲染时）：如果page的变化需要触发组件重新渲染，用useState替代useRef，这样nextPage会在每次渲染时自动计算：

const [page, setPage] = useState(1);
const nextPage = page + 1; // page变化时自动重新计算

内容的提问来源于stack exchange，提问作者Alyona