Skip to main content

useEffect 如何模拟组件生命周期？

  1. 模拟 componentDidMount
  2. 模拟 componentDidUpdate
  3. 模拟 componentWillUnmount

代码示例如下：

import { useEffect,useState,useRef } from "react";
import "./styles.css";

export default function App() {
     const [visible, setNextVisible] = useState(true)
  const onClick = ()=>{
    setNextVisible(!visible)
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {visible ? <Frank/> : null}
      <div>
        <button onClick={onClick}>toggle</button>
        </div>

    </div>
  );
}
function Frank(props){
   const [n,setNextN] = useState(0)

   const first = useRef(true)
   useEffect(()=>{
      if(first.current === true){
         return
      }
      console.log('did update')
   })
   useEffect(()=>{
      console.log('did mount')
      first.current = false
      return () => {
         console.log('did unmount')
      }
   },[])

   const onClick = () => {
      setNextN(n+1)
   }

   return (
      <div>
      <button onClick={onClick}>+1</button>
      </div>
   )
}

参考文章​

答题思路跟 Vue 的一样 1. 钩子在文档里，蓝色框框里面的都是生命周期钩子 2. 把名字翻译一遍就是满分 3. 要特别说明哪个钩子里请求数据，答案是 componentDidMount