在反應渲染之前只聲明一次變量？

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;
  });
}