在反应渲染之前只声明一次变量？

Question

我需要使用useRef在 React 中获取 div 的高度并将其分配给变量defaultHeight 。

const jselectRef = useRef<HTMLButtonElement>(null)

let defaultHeight: number | undefined
console.log(defaultHeight) // returns undefined

useEffect(() => {
    if (jselectRef.current !== null) {
        defaultHeight = jselectRef.current.offsetParent?.clientHeight
        console.log(defaultHeight) // returns the height of the div (40)
    }
}, [])

console.log(defaultHeight) // returns undefined, even after first page render

由于useEffect在页面呈现后运行，因此我需要在其外部声明defaultHeight变量，但将其分配给其中的 ref。
但是，当我在useEffect之外声明变量时，每次我的组件重新渲染时，变量都会重置为undefined 。

有没有办法告诉 React 只声明变量let defaultHeight: number | undefined 在页面加载之前let defaultHeight: number | undefined一次？ 那么一旦useEffect根据 ref 设置变量，就不管它了吗？
useEffect在这里不起作用，因为第一次加载将是undefined ，这会触发 TypeScript。

我不认为useMemo会在这里应用，因为我们只是在声明变量，但我可能弄错了。

Answer 1

你可以使用另一个参考。 （这在很大程度上是 refs 的用途——在渲染中持续存在的变量——所以这对我来说似乎是最好的选择。）

const defaultHeight = useRef();

useEffect(() => {
 // ...
 defaultHeight.current = 123;
})

或使用 state，但请注意，这可能会触发重新渲染，您可能不希望这样做。

const [defaultHeight, setDefaultHeight] = useState();

useEffect(() => {
   // ...
   setDefaultHeight(123);
}, [])

或者您可以将它完全移到组件之外，但正如Giorgi Moniava 在下面的评论中正确指出的那样，如果在多个地方使用该组件，这种方法会造成干扰——它们都会更新同一个变量——因此不推荐。 在这里留下这个选项只是为了说明为什么你不应该这样做。

let defaultHeight;

function MyComponent () {
  useEffect(() => {
    // ...
    defaultHeight = 123;
  });
}