React自定义hooks学习

创建一个react项目可以参考：
https://blog.csdn.net/weixin_43398820/article/details/123776338

使用自定义hooks实现2个小例子

例1 获取鼠标当前坐标的自定义hooks

1. 新建src–>hooks->useMousePosition.tsx文件
   注：自定义hooks必须以set命名

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;

2. app.tsx引用自定义hooks (useMousePosition)

3. 效果如下：
   鼠标移动坐标会变化
   

例2 图片加载自定义hooks

1. 新建src --> hooks -->useUrlLoader.tsx

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;

2. 使用自定义hooks（app.jsx中引用）

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是一个在线获取狗狗图片的地址

3. 效果如下：
   加载中
   
   加载后
   
   源码地址：https://gitee.com/jlzhanglong/hooks.git