如何保留表格元素初始scrollWidth，避免搜索时数值变更？

要保存表格元素的初始scrollWidth并避免后续更新，你可以通过以下方式实现：

1. 使用useRef存储初始值 #

useRef可持久化存储值且不会触发组件重渲染，非常适合保存这种仅需初始化一次的DOM属性值，替代之前的useState：

import { useRef, useEffect } from 'react';

// 存储初始scrollWidth的ref
const initialScrollWidth = useRef<number | undefined>();
// 绑定表格目标元素的ref（根据实际元素类型调整）
const elementRef = useRef<HTMLDivElement | null>(null);

2. 在组件首次挂载时赋值 #

通过空依赖的useEffect确保仅在组件挂载完成后获取一次初始scrollWidth：

useEffect(() => {
  // 确认DOM元素已挂载后赋值
  if (elementRef.current) {
    initialScrollWidth.current = elementRef.current.scrollWidth;
  }
}, []); // 空依赖数组保证该effect仅执行一次

3. 处理异步加载的表格数据 #

如果表格数据是异步获取的，空依赖的useEffect可能在数据渲染前执行，导致scrollWidth不准确。此时可将表格数据加入依赖，并添加判断确保只赋值一次：

const [tableData, setTableData] = useState([]); // 你的表格数据状态

useEffect(() => {
  // 仅当未保存初始值且DOM元素存在时赋值
  if (elementRef.current && !initialScrollWidth.current) {
    initialScrollWidth.current = elementRef.current.scrollWidth;
  }
}, [tableData]); // 依赖表格数据，确保数据渲染后再获取初始值

4. 使用初始值 #

后续搜索操作中，直接调用initialScrollWidth.current即可，这个值会始终保持组件首次挂载（或数据首次渲染）时的scrollWidth，不会随搜索后的DOM变化而更新。

为什么之前的useState方案无效？ #

如果你的elementRef在useEffect执行时还未绑定到DOM元素（比如表格还未完成渲染），setDestref会存入undefined，而空依赖的useEffect不会再次执行，导致后续无法获取到正确的初始值。useRef则可以在后续DOM挂载完成后随时访问，但我们只在初始化阶段赋值一次，避免后续更新覆盖初始值。

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