React Hooks 如何模拟组件生命周期？

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>Frank  
            <button onClick={onClick}>+1</button>  
        </div>  
    )  
}