如何在hooks内写一个变量改变的时候不会引起页面渲染

在 React 中，当组件状态或属性发生变化时，会重新渲染整个组件树。如果需要在 hooks 内写一个变量改变的时候不引起页面渲染，可以使用 `useRef` hook 来保存变量值，这样变量改变时不会引起组件重新渲染。

例如，假设需要保存一个计数器的值，并且在计数器发生变化时不引起页面渲染，可以使用以下代码：

import React, { useRef } from 'react';

function Counter() {
  const countRef = useRef(0);
  const increment = () => {
    countRef.current++;
  };
  return (
    <div>
      <button onClick={increment}>Increment</button>
      <p>Count: {countRef.current}</p>
    </div>
  );
}

在这个例子中，使用 `useRef` hook 创建了一个名为 `countRef` 的变量，并且将其初始值设置为 0。在 `increment` 函数中，直接修改 `countRef.current` 即可改变计数器的值。由于 `countRef` 是一个引用类型，所以修改其属性不会引起组件重新渲染，从而达到了不引起页面渲染的效果。