自定義hook

自定義hook

hook就是一個函數,有一些特定邏輯的封裝函數
1,用於處理字符串(url)
2,數據格式化(日期)
3,業務邏輯性
// 自定義hook相對於普通js復用邏輯的抽離,然后可以在頁面調用

// 自定義hook一般放在src下面hooks文件夾里面
// 自定義 Hook 是一個函數，其名稱以 “use” 開頭，函數內部可以調用其他的 Hook。

示例1: 處理字符串url

src/hooks/index.jsx

import url from 'url'
import qs from 'querystring'

// use就是hook標識
// 封裝了一個將string的url中的search處理成obj的自定義hook
function useUrlHandler(str){
  const {search} = url.parse(str)
  return qs.parse(search.slice(1))
}

// 在需要的頁面調用該hook函數
import React,{useState} from 'react'
import {useUrlHandler} from './hooks'

export default function App(){
  const urlObj = useUrlHandler('https://jd.com/phone/18?a=2&b=3#hash')
  const [url] = useState(urlObj)
  console.log(url,77)
  return (
    <div>
      <h5>自定義hook使用</h5>
    </div>
  )
}

示例2: 日期處理hook

export function useTimeHandler(date,type='/'){
  const d = new Date(date)
  const arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
  return d.getFullYear() + type + useNumber(d.getMonth() + 1) + type + useNumber(d.getDate()) + '' + arr[d.getDay()]
}

// 判斷月日是否需要加0
export function useNumber(n){
  if(isNaN(n)) return 'n格式不正確'
  if(n<10) return '0' + n
  return n
}

// 調用
const t = useTimeHandler(Date.now(),'-')
const [time] = useState(t)

示例3 axios封裝,返回結果數據類型檢查

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

export function useRequest(url){
  // 數據請求的處理
  const [data,setData] = useState(null)
  const [error,setError] = useState(null)
  const [loading,setLoading] = useState(true)
  useEffect(() =>{
    axios.get(url)
      .then(re =>{
        setData(res.data)
      })
      .catch(error => {
        setError(error)
      })
      .finally(() => {
        setLoading(false)
      })
  },[])
  return {data ,error,loading}
}

// 數據類型驗證hook
export function useDataTypeCheck(data){
  if(typeof data != 'object') return 0    //string/number/undefiend
  if(Object.prototype.toString.call(data) == '[object Null]') return 1  //null
  if(Object.prototype.toString.call(data) == '[object Object]'){
    // 證明是一個對象了
    if(Object.keys(data).length != 0){
      return data
    }else{
      return 2 //對象是空的{}
    }
  }
  if(Array.isArray(data)){
    if(data.length != 0){
      return data
    }else{
      return 3 //數組是空的[]
    }
  }
}

// 界面唯一性處理
export function useOnlyView(status,loading,error){
  if(status == 0) return '非引用類型'
  if(status == 1) return '數據加載中...'
  if(status == 2) return '空對象'
  if(status == 3) return '空數組'
}
if(loading) return <div>數據加載中</div>
if(error) return '數據請求失敗'

// 調用
import React from 'react'
import {useRequest,useDataTypeCheck,useOnlyView} from './hooks'
export default function App(){
  const {data,error,loading} = useRequest('/mock/data.json')  //數據請求
  const checkResult = useDataTypeCheck(data)    //數據校驗
  useOnlyView(checkResult,loading,error)   //界面化處理,避免出現報錯頁面,只出現一個頁面
  return (
    <div>
      {/* //到了這里一定是有結果的,前面處理過,不會報錯 */}
      {checkResult.username}  
    </div>
  )
}