React 如何用hooks实现componentWillMount?

90 阅读1分钟

componentWillMount

首先我们要知道: useEffect的调用是在DOM更新之前,执行是在浏览器渲染之后,而useLayoutEffect的调用和执行都是在浏览器渲染之前,因此可以使用useRef来实现

import { useEffect, useLayoutEffect, useRef } from "react";

const useComponentWillMount = (cb) => {
  const willMount = useRef(true);
  if (willMount.current) cb();
  willMount.current = false;
};

function App() {

  useComponentWillMount(() => {
    console.log("useComponentWillMount");
  });
  
  useEffect(() => {
    // useEffect的调用是在DOM更新之前,执行是在浏览器渲染之后
    console.log("useEffect");
  });
  
  useLayoutEffect(() => {
    //useLayoutEffect的调用+执行都是在浏览器渲染之前
    console.log("useLayoutEffect");
  });
  
 return <div>App</div>;
}

export default App;