自定义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>
  )
}