React：關於使用 ref 和 useLayoutEffect 來確定組件是掛載還是卸載的問題

Question

我有一個這樣的組件

function App() {
  const mounted = useRef()
  useLayoutEffect(() => {
    mounted.current = true
    return () => {
      console.log('unmounted') // this does not get called when I unmount the component
      mounted.current = false
    }
  }, [])

  if (mounted.current) {
    console.log('mounted')
  }
  return (
    <div>
      {/* this hello world div doesn't get rendered on the screen👇, I thought useLayoutEffect would be called before browser paints screen */}
      {mounted.current && <div>hello world</div>}
    </div>
  )
}

我知道useEffect可以達到目的。 我使用useLayoutEffect是因為它比useEffect運行得早一點。 根據這個https://github.com/donavon/hook-flow鈎子流程圖。

我的問題是：

1. 卸載組件后，我沒有看到console.log('unmounted')運行
2. 我期待<div>hello world</div>在我刷新頁面后呈現在屏幕上，因為我useLayoutEffect回調會在瀏覽器繪制屏幕之前運行，當它繪制屏幕時，ref 設置為 true通過回調。

Answer 1

我期待 hello world 在我刷新頁面后呈現在屏幕上，因為我 useLayoutEffect 回調會在瀏覽器繪制屏幕之前運行，當它繪制屏幕時，ref 被回調設置為 true。

雖然useLayoutEffect比運行更快useEffect ，它仍然是異步的。 它類似於setTimeout(fn, 0)和setTimeout(fn, 60)之間的區別。 useLayoutEffect回調直到功能組件返回后才會運行，但會在用戶看到新元素之前運行。

因此，由於mounted.current在組件第一次渲染時為false，並且由於沒有發生狀態更改，因此不會重新渲染，並且不會出現hello world 。

卸載組件后，我沒有看到 console.log('unmounted') 運行

在這里工作正常，我看到了：

 function App() { const mounted = React.useRef() React.useLayoutEffect(() => { mounted.current = true return () => { console.log('unmounted') // this does not get called when I unmount the component mounted.current = false } }, []) if (mounted.current) { console.log('mounted') } return ( <div> {/* this hello world div doesn't get rendered on the screen👇, I thought useLayoutEffect would be called before browser paints screen */} {mounted.current && <div>hello world</div>} </div> ) } const Outer = () => { const [show, setShow] = React.useState(true); React.useEffect(() => { setTimeout(() => { setShow(false); }, 2000); }, []); return ( show ? <App /> : null ); }; ReactDOM.render(<Outer />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>