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 渲染时创建一次