Reactv16.7.0-alpha.2 Hooks學習

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的簡單用法