2019年React Hooks是React生態圈裡邊最火的新特性了。它改變了原始的React類的開發方式，改用了函式形式;它改變了複雜的狀態操作形式，讓程式設計師用起來更輕鬆;它改變了一個狀態元件的複用性，讓元件的複用性大大增加。

State Hook（useState）:

　　state hook最主要的作用是獲取需要的state和更新state方法。

　　使用方法：const[state, setState] = useState(initialState);

　　與原來未使用hooks方法對比：

// 原來Class寫法
import React, { Component } from 'react'

 class Eaxmple extends Component {
   constructor (props) {
     super (props) 
     
 
this.state={count:0}
   }
  render() {
    return (
      <div>
        <p>總數:{this.state.count}</p>
        <button onClick={this.add.bind(this)}>增加</button>
      </div>
    )
  }
  add() {
    this.setState({count:this.state.count+1})
  }
}
export default Eaxmple

//
 
 react hooks寫法
import React,{useState} from 'react'

const EaxmpleHooks = () => {
  const [ count , setCount ] =useState(0)//陣列解構
  return (
    <div>
       <p>總數:{count}</p>
        <button onClick={()=>setCount(count+1)}>增加</button>
    </div>
  )
}
export default
 
 EaxmpleHooks

　　相比而言，簡潔明瞭了許多。

Effect Hook（useEffect）:

　　useEffect方法是在每次渲染之後執行，可以理解為class寫法中的componentDidMount / componentDidUpdate / componentWillUnmount（不完全一樣）。

　　使用方法：useEffect(() => {}, []);

　　使用條件：useEffect的第二個引數是一個數組，只有當陣列中的的值發生改變的時候才會呼叫effect，如果執行在第一次掛載和解除安裝的時候呼叫，只需要傳一個[]。

　　與原來未使用hooks方法對比：

// 原來Class寫法
import React, { Component, useState } from 'react'

class Eaxmple extends Component {
  constructor (props) {
    super (props) 
    this.state={count:0}
  }
  componentDidMount() {
    console.log(`componentDidMount => clicked ${this.state.count}`);
  }
  componentDidUpdate() {
    console.log(`compomentDidUpdate  => clicked ${this.state.count}`);
  }
  componentWillUnMount() {
    console.log(`componentWillUnMount => clicked ${this.state.count}`);
  }

  render() {
    return (
      <div>
        <p>總數:{this.state.count}</p>
        <button onClick={this.add.bind(this)}>增加</button>
      </div>
    )
  }
  add() {
    this.setState({count:this.state.count+1})
  }
}
export default Eaxmple

// react hooks寫法
import React,{useState, useEffect} from 'react'

const EaxmpleHooks = () => {
  const [ count , setCount ] =useState(0)//陣列解構
  useEffect(() => {
    console.log(`clicked ${count}`);
  });

  // 傳入[]引數，只執行一次
  // useEffect(() => {
  //   console.log(`clicked ${count}`);
  // }, []);

  // 監控count變化，一旦變化立即執行
  // useEffect(() => {
  //   console.log(`clicked ${count}`);
  // }, [count]);

  // 資料解綁銷燬
  // useEffect(() => {
  //   console.log(`我來了...`);
  //   return () => {
  //     console.log(`我走了...`); 
  //   }
  // }, []);

  return (
    <div>
       <p>總數:{count}</p>
        <button onClick={()=>setCount(count+1)}>增加</button>
    </div>
  )
}
export default EaxmpleHooks

React Hooks 使用起來非常的簡單，上面我們就寫使用 useState和useEffect函式元件對比。