React中如何在渲染前仅声明一次变量且避免重渲染重置？

方案一：用额外的useRef存储高度值 #

这是最适配React组件生命周期的方案，因为useRef的.current属性会在组件整个生命周期内保持引用，不会随重渲染被重置，完美满足“仅初始化一次、赋值后保持值不变”的需求。

import { useRef, useEffect } from 'react';

const YourComponent = () => {
  // 修正ref类型为HTMLDivElement（你要获取的是div的高度）
  const jselectRef = useRef<HTMLDivElement>(null);
  // 用useRef存储高度值，初始值设为undefined
  const defaultHeightRef = useRef<number | undefined>(undefined);

  useEffect(() => {
    if (jselectRef.current) {
      defaultHeightRef.current = jselectRef.current.offsetParent?.clientHeight;
      console.log(defaultHeightRef.current); // 输出正确高度值
    }
  }, []);

  // 后续使用时取defaultHeightRef.current即可
  console.log(defaultHeightRef.current); // 首次渲染为undefined，更新后保持值不重置

  return <div ref={jselectRef}>你的组件内容</div>;
};

方案二：模块级变量 #

把defaultHeight声明在组件外部（模块作用域内），这样它只会在模块加载时初始化一次，不会随组件重渲染重置。但要注意，这个变量是全局的，若组件被多次渲染或卸载后重新挂载，会保留之前的值，需根据业务场景谨慎使用。

import { useRef, useEffect } from 'react';

// 模块级变量，仅初始化一次
let defaultHeight: number | undefined;

const YourComponent = () => {
  const jselectRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (jselectRef.current) {
      defaultHeight = jselectRef.current.offsetParent?.clientHeight;
      console.log(defaultHeight);
    }
  }, []);

  console.log(defaultHeight); // 首次渲染为undefined，更新后值保持不变

  return <div ref={jselectRef}>你的组件内容</div>;
};

解决TypeScript报错问题 #

针对首次加载时值为undefined的TS报错，可通过以下方式处理：

• 类型守卫：使用前先判断值是否存在

  if (defaultHeightRef.current !== undefined) {
    // 此处使用defaultHeightRef.current，TS不会报错
  }
  

• 默认值兜底：用空值合并运算符给默认值

  const height = defaultHeightRef.current ?? 0;
  

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