React函数组件使用useRef替代var或let定义变量

React函数组件中不能使用var/let定义变量，使用中无法更改数值。需要使用useRef定义组件内变量。

export default function Doc({ params }: { params: { docid: string } }) {
  useEffect(() => {
    currChapterId.current = "test"
  }, []);
  
  var currChapterId = useRef("");
}

React 中的 useRef 是一个 Hook 函数，主要用于在组件中存储且更新组件中的可变值，类似于 class 组件中的实例属性。它的作用可以概述为：

保留变量：ref 可以用来保存组件中的变量，在组件不断刷新时不会丢失，相当于在组件之间共享一个变量。

操作 DOM 元素：ref 可以用来引用 DOM 元素，从而可以访问和修改该元素的属性和方法。

保存旧值：可以使用 ref 保存前一个状态或值，可以方便地进行比较，从而触发某些操作。

在 effect 中跨越渲染周期保存数据：ref 中保存的值不会触发组件重新渲染，可以用来在 effect 中保存一些状态数据或是保存一些和组件渲染无关的数据。