Effect Hook 可以讓你在函數(shù)組件中執(zhí)行副作用操作，這里提到副作用，什么是副作用呢，就是除了狀態(tài)相關(guān)的邏輯，比如網(wǎng)絡(luò)請(qǐng)求，監(jiān)聽事件，查找 dom。

可以這樣說，在使用了useState或是useEffect這樣的hooks之后，每次組件在render的時(shí)候都生成了一份本次render的state、function、effects，這些與之前或是之后的render里面的內(nèi)容都是沒有關(guān)系的。而對(duì)于class component來說，state是一種引用的形式。這就造成了二者在一些表現(xiàn)上的不同。

只要是副效應(yīng)，都可以使用useEffect()引入。它的常見用途有下面幾種。

• 獲取數(shù)據(jù)(data fetching)
• 事件監(jiān)聽或訂閱(setting up a subscription)
• 改變 DOM(changing the DOM)
• 輸出日志(logging)

副效應(yīng)是隨著組件加載而發(fā)生的，那么組件卸載時(shí)，可能需要清理這些副效應(yīng)。

useEffect()允許返回一個(gè)函數(shù)，在組件卸載時(shí)，執(zhí)行該函數(shù)，清理副效應(yīng)。如果不需要清理副效應(yīng)，useEffect()就不用返回任何值。

使用useEffect()時(shí)，有一點(diǎn)需要注意。如果有多個(gè)副效應(yīng)，應(yīng)該調(diào)用多個(gè)useEffect()，而不應(yīng)該合并寫在一起。

一、參數(shù)規(guī)則

1.可選的

2.數(shù)組類型

3.值為state或者props

二、不同的參數(shù)和返回

1.不傳參數(shù)

默認(rèn)的行為，會(huì)每次 render 后都執(zhí)行，一般表單控制中使用。

類似于類組件中的componentDidMoount以及componentDidUpdate。

useEffect(() => {
    console.log('useEffect with no dependency')
})

2.空數(shù)組

傳入第二個(gè)參數(shù)，每次 render 后比較數(shù)組的值沒變化，不會(huì)在執(zhí)行。

類似于類組件中的 componentDidMount。

useEffect(() => {
    console.log('useEffect with empty dependency')
}, [])

3.有一個(gè)或者多個(gè)值得數(shù)組

傳入第二個(gè)參數(shù)，只有一個(gè)值，比較該值有變化就執(zhí)行

傳入第二個(gè)參數(shù)，有2個(gè)值的數(shù)組，會(huì)比較每一個(gè)值，有一個(gè)不相等就執(zhí)行；

類似于類組件中的componentDidUpdate；

useEffect(() => {
    console.log('useEffect widh specify dependency')
}, [state, props])

4.返回一個(gè)函數(shù)

返回時(shí)傳遞一個(gè)函數(shù)進(jìn)行卸載，在組件卸載時(shí)候調(diào)用；

類似于類組價(jià)中componentWillUnmout。

useEffect(() => {
   console.log('useEffect widh specify callback'); 　　
   return () => { 　　　　
     console.log('useEffect with specify callback'); 　　
   } 
})

如果你熟悉 React class 的生命周期函數(shù)，你可以把 useEffect Hook 看做componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個(gè)函數(shù)的組合。

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

使用 Hook 的示例

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

默認(rèn)情況下，它在第一次渲染之后和每次更新之后都會(huì)執(zhí)行。你可能會(huì)更容易接受 effect 發(fā)生在“渲染之后”這種概念，不用再去考慮“掛載”還是“更新”。React 保證了每次運(yùn)行 effect 的同時(shí)，DOM 都已經(jīng)更新完畢。

數(shù)據(jù)獲取，設(shè)置訂閱以及手動(dòng)更改 React 組件中的 DOM 都屬于副作用。有些副作用可能需要清除，所以需要返回一個(gè)函數(shù)，比如掛載時(shí)設(shè)置定時(shí)器，卸載時(shí)取消定時(shí)器。

class Example extends Component {
  constructor (props) {
    super(props);
    this.state = {
      count: 0
    }
  }
  componentDidMount() {
    this.id = setInterval(() => {
      this.setState({count: this.state.count + 1})
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.id)
  }
  render() { 
    return <h1>{this.state.count}</h1>;
  }
}

使用 Hook 的示例

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{count}</h1>
}