在Hook尚未出现之前，只有Class Component能够有生命周期可以使用。
什麽是生命周期？生命周期(lifecycle)是指Component从建立到销毁的过程。

React的生命周期分为三大阶段，并分别提供了对应函式使用：

• Mounting（载入）：建构Component并载入DOM渲染到画面。
  componentDidMount()：Component加到DOM後呼叫。

• Updating（更新）：更新Component资料状态使其重新渲染。

  componentDidUpdate()：Component更新後呼叫。

• Unmounting（销毁）：从DOM移除Component。

  componentWillUnmount()：Component从DOM中移除时呼叫。

多亏了Hook的出现，我们在function Component中也能有类似生命周期的功能去执行动作啦！

UseEffect

可以把 useEffect 视为 componentDidMount，componentDidUpdate 和 componentWillUnmount 的组合，当元件开始建立进行生命周期，当元件资料有变动重新渲染元件时，便可在useEffect中对应执行动作。

来看看useEffect的使用方法吧

在component的js页面引入useEffect

import React, { useEffect} from 'react';

和useState一样，放置在在Function Component函式中的return之前

function App() {

	//使用useEffect()

  return //省略...
}

useEffect()函式所含的两个参数都是必填：

第一个参数：放入元件生命周期边动时要执行的function。

第二个参数：用来限制哪些资料参数在重新渲染时被改变，可以重新触发useEffect，只想在元件第一次渲染跟销毁时执行想要fuction的话，在第二个参数放空阵列[ ]就好。

useEffect(() => { 
//渲染前要进行的动作 
},[state]) //或是放空阵列[]

我们来实作看看:

我在父元件App里，希望input是空的时候，资料count要为0，

利用useEffect在count资料改变时判断input的值是不是为空。

import React, { useState,useEffect} from 'react';
import './App.css';
import Child from './Child';

function App() {
  const [count, setCount]= useState(0);
 
  useEffect(() => {
    if(count==='')setCount(0);
    },[count])

  return(
    <div className="App">
      <p>请输入数字</p>
      <input type="number" onChange={(event)=> setCount(event.target.value)} />
      <Child count={count}></Child>
    </div>
  );
}

export default App;

子元件Child靠props接收input的值，在Mounting和Updating做不同的动作

import React, { useState,useEffect} from 'react';
import './All.css';

function Child(props) {
  
  const [total,setTotal] =useState('请输入大於0的数字')
  
  useEffect(() => {
    console.log('建立');
    },[])

  useEffect(() => {
      console.log('总和变了')
      if(props.count === '0') setTotal('请输入大於0的数字');
      else setTotal(`总和为${50+parseInt(props.count)}`)
      },[props.count])
  

  return (
    <div>
       <p>50+{props.count}={50+parseInt(props.count)}</p>
       <p>{total}</p>
       
    </div>
    
)}

export default Child;

最後呈现的效果如下：

Mounting+Updating

Updating