React Hooks之useState、useEffect使用

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函數組件對比。