Reactv16.7.0-alpha.2 Hooks學習

ilvseyinfu發表於2019-02-16
ReactHook

Hooks的來源

Hooks => 鉤子，顧名思義，為了解決在函式元件（Function Component）中使用state和生命週期，同時提高業務邏輯複用。

Function Component == Puer Render Function 函式元件等同於一個純的專門用作渲染的函式，我們知道，在函式元件中，我們無法使用state和生命週期，這也是Hooks為了解決的問題。

第一個API: useState


import { useState } from react // 引入
const [count, setCount] = useState(0)    
相當於
this.state ={ count = 0} 所以 useState(arg)放陣列 字串 物件都可以，就是起到一個初始化state的作用
setCount 相當於 this.setState({count: count})
count = count + 1 這樣的寫法是錯的，不能直接修改state的值，需要使用setCount(value)
我們可以宣告多個狀態

第二個API: useEffect

這個函式是為了解決當狀態或者傳入的props發生變化後，需要做出的邏輯處理

比如： count + 1 後， 就會觸發

useEffect( () => {
// 邏輯處理在這裡
}, [count])  //第二個引數是繫結需要監聽變化的引數

下面是一個完整的例子

父元件中傳入的props value 每秒 + 1 父元件就不貼程式碼了，文末有完整程式碼地址
這個專案裡包含自定義Hook 以及useEffect的觸生命週期，包含自身state以及父元件傳入prop改變後，useEffect的用法

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

// 自定義hooks
function diyHooks (value) {

  const [flag, setFlag] = useState(false);

  useEffect(() => {
    if(value % 2 === 0) {
      setFlag(true)
    } else {
      setFlag(false)
    }
    console.log(flag)
  }, [value])

  return flag;

}


function Try (props) {

  const [count, setCount] = useState(0)
  const [number, setNumber] = useState(0)
  const value = props.value
  const flag = diyHooks(props.value)

  useEffect(() => {
    console.log(`count`, count);
  }, [count])

  useEffect(() => {
    console.log(`number`, number);
  }, [number])


  useEffect(() => {
    console.log(`props`, value)
  }, [value])

  return (
    <div>
      <span>{flag === true ? `true` : `false`}</span>
      <span>{value}</span>
      <button onClick={() => {
        setCount(count + 1)
        if(count % 2 ===  1) {
          setNumber(number + 1)
        }
      }}>Try It</button>
    </div>
  )
}

export default Try;

關於自定義hooks，我寫了一個react-hooks 介紹了React Hooks的簡單用法

相關文章