自定義Hooks說明
1.react的自定義Hooks必須使用use開頭炭序。
2.需要使用index.js去裝載啤覆。(如下圖所示)，建立一個(gè)hooks目錄惭聂，然后裝載文件窗声。
image.png
一.自動(dòng)改變title的hooks
import { useLayoutEffect, useState } from 'react';
export default function useTitleHook(title) {
const [state, setState] = useState()
useLayoutEffect(()=>{
document.title = title;
setState(title);
}, [title])
return state;
}
這個(gè)hooks使用了useLayoutEffect這個(gè)hooks，他可以改變dom節(jié)點(diǎn)的元素
使用方式：
import { useTitleHook,useHttpHook } from '@/hooks' //引入自定義hooks
const title = useTitleHook(state);//state參數(shù)傳遞字符串辜纲，寫入title名稱
二.HTTP請(qǐng)求的hooks
import { useState, useEffect } from 'react';
import { Toast } from 'antd-mobile';
export default function useHttpHook({
url,
method = 'post',
headers,
body = {},
watch = []
}){
const [result, setResult] = useState();
const [loading, setLoading] = useState(true);
async function Http(){
setLoading(true);
const defaultHeader = {
'Content-type': 'application/json'
};
let params;
if(method.toUpperCase() === 'GET'){
params = undefined;
}else {
params = {
headers: {
...defaultHeader,
headers
},
method,
body: JSON.stringify(body)
}
}
return new Promise((resolve, reject)=>{
fetch('/api' + url, params)
.then(res => res.json())
.then(res => {
if(res.status === 200){
resolve(res.data);
setResult(res.data);
}else {
Toast.fail(res.errMsg);
reject(res.errMsg);
}
})
.catch(err => {
Toast.fail(err);
reject(err);
})
.finally(() => {
setLoading(false);
})
});
}
useEffect(()=>{
Http();
}, watch);
return [result, loading];
}
這個(gè)hooks集成了antd-mobile笨觅，主要做移動(dòng)端的請(qǐng)求拦耐，res.errMsg，res.data见剩，要根據(jù)項(xiàng)目中約定的數(shù)據(jù)格式進(jìn)行改寫杀糯，如果需要PC端的，同理苍苞，按需修改就行了固翰。
