常见基础问题（React篇三）

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

1. 模拟 componentDidMount：useEffect(()=>{ },[ ])，不加依赖，为空数组。

2. 模拟 componentDidUpdate：useEffect(()=>{ },[ aa ])加上依赖，监听aa的变化，或者useEffect(()=>{ })，此时监听所有的数据变化。但在第一次渲染也会执行。可以再次封装，避免第一次渲染时执行。

3. 模拟 componentWillUnmount：在模拟的 componentDidMount内部加上一个函数（下面示例中的console.log('did unmount')处）。

代码示例如下：

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>
  )
}