Day21 React useEffect Hook

在 React component 做资料 fetch、subscription、或手动改变 React component 中的 DOM 都是 side effect操作。这些操作就是程序语言中经常看到的Side Effects(副作用)（或简称 effect）。

Side Effect(副作用)也就是除了主要的作用外，会产生额外的其他作用，现在经常会出现在很多进阶使用的JavaScript框架或函式库之中。

我们透过使用useEffect Hook，在 component 中放置 useEffect 让我们可以直接从component 内部呼叫 useEffect中存取 count state 变数（或任何 props）。透过使用这个 Hook，告诉 React component 需要在 render 後做一些事情。React 将记住你传递的 function并在执行 DOM 更新之後呼叫它。可以执行资料提取或呼叫其他命令式 API。

在下面的实作中，我在component中加入useEffect，每当onClick Event被触动，DOM的元件更新就会重新render ,就会执行 useEffect，跳出 alert()对话视窗。

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

const App = () => {

  const [num,setNum] = useState(0);

  useEffect(()=>{
    alert(`button clicked ${num}`);
  });

  return (
    <div>
      <button onClick={()=>{
        setNum (num +1);
      }}>Click number {num}
      </button>
    </div>
  )
}

export default App

React class 的生命周期方法

你可以把 useEffect 视为React class 的生命周期方法的 componentDidMount()，componentDidUpdate() 和 componentWillUnmount() 的组合。

如果用React class 的生命周期方法来执行Side Effect，因在 React class component 中，render 方法本身不会触发 side effect。如果我们希望在 React 更新 DOM 之後执行我们的 side effect。必需将 side effect 放入 componentDidMount() 和 componentDidUpdate()中，告知React Component 当元件被加入到 DOM 中时或当元件的 props 或 state 更新时，重新渲染 (re-rendered) DOM ，触发执行 side effect。
回到之前的实作中，如果用React class的方法必需把 alert() 放入componentDidMount() 和 componentDidUpdate()中，才能执行。

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 0
    };
  }

  componentDidMount() {     
    alert(`button clicked ${this.state.num}`)
  }
  componentDidUpdate() {    
    alert(`button clicked ${this.state.num}`)
  }

  render() {
    return (
      <div>       
        <button onClick={() => this.setState({ num: this.state.num + 1 })}>
         Click number {this.state.num}
        </button>
      </div>
    );
  }
}

所以使用useEffect Hook的方式，每次在更新 DOM重新render之後都会执行Side effect这样的特性，操作和时效上更优。