React 組件重新渲染

Question

當組件在 react 中重新渲染時，function 會發生什么？ 每次都重新創建嗎？

export default function App() {
  console.log("rendered");
  const [isOpen, setisOpen] = useState(false);
  function handleClick() {
    setisOpen(true);
  }
  return (
    <div className="App">
      <button onClick={handleClick}>Click</button>
      {isOpen && <div>Secret is opened.</div>}
    </div>
  );
}

為什么這個組件會渲染 3 次？

Answer 1

在每次渲染父 function 時，都會創建子 function 以防止這種情況發生，您可以使用名為 useCallBack 的反應鈎子

    import React, { useCallback } from 'react'
    export default function App() {
       console.log("rendered");
       const [isOpen, setisOpen] = useState(false);
       const handleClick = useCallback(() => {
         setisOpen(true);
       }, []);

      return (
        <div className="App">
          <button onClick={handleClick}>Click</button>
          {isOpen && <div>Secret is opened.</div>}
        </div>
      );
    }

這里 [] 表示這個子 function 將在父 function 渲染時創建一次