创建一个react项目可以参考:
https://blog.csdn.net/weixin_43398820/article/details/123776338
使用自定义hooks实现2个小例子
import React,{useState,useEffect} from "react";
//因为要返回positions对象所以函数不能为React.FC了
const useMousePosition= ()=>{
const [positions,setPositions] = useState({x:0,y:0});
useEffect(()=>{
console.log("add effect");
const updateMouse = (e: MouseEvent)=>{
setPositions({x:e.clientX,y:e.clientY});
}
document.addEventListener('mousemove',updateMouse);
return(()=>{
console.log("remove effect")
document.removeEventListener('mousemove',updateMouse);
})
},[])
return positions;
}
export default useMousePosition;
import React,{useState,useEffect} from "react";
//需要安装axios依赖
import axios from 'axios';
const useUrlLoader = (url:string, deps:any[] = [] )=>{
//请求获取到的数据
const [data,setData] = useState<any>(null);
//是否在加载中
const [loading,setLoading] = useState(false);
useEffect(()=>{
setLoading(true);
axios.get(url).then(request=>{
setData(request.data);
setLoading(false);
})
},deps)
return [data,loading];
}
export default useUrlLoader;
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import useUrlLoader from './hooks/useUrlLoader';
//返回数据格式
interface IShowResult{
message:string,
success:string
}
function App() {
//可以控制图片的加载
const [show,setShow] = useState(true);
const [data,loading] = useUrlLoader('https://dog.ceo/api/breeds/image/random',[show]);
const result = data as IShowResult;
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
//按钮切换就会请求url
<button onClick={()=>{setShow(!show)}}>toggle mouseTracker</button>
{
loading?<p>狗狗~ 加载中。。。。</p>:<img src={result && result.message}/>
}
</header>
</div>
);
}
export default App;
https://dog.ceo/api/breeds/image/random是一个在线获取狗狗图片的地址