react18之08自定义hook (简单的axios-get、修改浏览器title、localStorage、获取滚动条位置、img转换为base64)

react18之自定义hook ()

• hook的使用规则
  • 自定义hook本质而言就是一个函数，也就是抽离公共部门的代码，类似抽离组件或者说mixin(vue中的mixin)。
  • hook必须以use开头(不遵循的话，由于无法判断某个函数是否包含对其内部 Hook 的调用，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则)
  • 内部正常使用useState useEffect或者其他hooks
  • 自定义返回结果，格式不限
  • 在两个组件中使用相同的 Hook 不会共享 state（自定义 Hook 是一种重用状态逻辑的机制(例如设置为订阅并存储当前值)，所以每次使用自定义 Hook 时，其中的所有 state 和副作用都是完全隔离的。）
  • 每次调用 Hook，它都会获取独立的 state（从 React 的角度来看，我们的组件只是调用了 useState 和 useEffect，一个组件中可以调用多次useState和useEffect,它们都是完全独立的）

01：自定义一个 简单的axios hook 发起get请求

• npm i axios

useHttp.jsx

import { useState, useEffect } from "react";
import axios from "axios";
export default function UseHttp(props) {
  const { url } = props;
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    axios.get(url)
      .then((res) => {
        setData(res);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [url]);
  return [loading, data, error];
}

使用useHttp hook

import React, { useState,useEffect } from 'react';
import UseHttp from './useHttp';
export default function Base(props) {
    const [list,setList] = useState([])
    const url = 'http://localhost:9999' + '/list'
    const [loading,data,error] = UseHttp({url})
    useEffect(()=>{
      if ( data && data.status === 200) {
        setList(data.data)
      }
    },[data])

    return (
        <div className='content'>
          {
            loading ? '加载中' : 
            <>
             { error ? <div>error</div> :
              <div>
                {
                  list.map(item=>{
                    return (
                      <div key={item.id}>
                        name-{ item.name};
                        age- { item.age }
                      </div>
                    )
                  })
                }
              </div>}
            </>
          }
        </div>
    )
}

效果

02：自定义一个 修改浏览器title hook

import { useEffect } from 'react';

export default function useTitle(props) {
    const {title} = props

    useEffect(() => {
        document.title = title
        // 组件卸载时，恢复默认标题
        return () => {
          document.title = 'Original Title';
        };
    }, [title])

    return { title }
}

03：自定义一个 localStorage(获取、存储、移除) hook

useLocalStorage.jsx

import { useState, useEffect } from 'react';

const useLocalStorage = (key, initialValue) => {
  // 根据key获取localStorage的数据，若是有数据则返回，没有则返回初始化设置的值
  const [data, setData] = useState(() => {
    let storageVal = localStorage.getItem(key);
    return (storageVal && storageVal !== 'undefined') ? JSON.parse(storageVal) : initialValue;
  });

  // 若是数据有变化 则存储数据
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(data));
  }, [key, data]);

  const removeLocalStorage = () => {
    setData(initialValue);
    localStorage.removeItem(key);
  };

  return [data, setData, removeLocalStorage];
};

export default useLocalStorage;

使用hook

import React, { useState, useEffect } from 'react';
import useLocalStorage from './useLocalStorage';
export default function Base(props) {
    const [name,setName,removeLocalStorage]= useLocalStorage('name','')
    function getName(){
      console.log('name',name);
    }
    function setLocalName(){
      setName('我是setName')
    }
    function delLocalName(){
      removeLocalStorage('name')
    }
    return (
        <div className='content'>
          <div>
            <div>name-{name}</div>
            <div>获取name数据 - <button onClick={getName}>getName</button></div>
            <div>设置name数据 - <button onClick={setLocalName}>setName</button></div>
            <div>移除name数据 - <button onClick={delLocalName}>delName</button></div>
          </div>
        </div>
    )
}

效果

04：自定义一个 useScrollPosition(获取当前滚动条的位置) hook

useScrollPosition.jsx

import { useState, useEffect } from 'react';
function useScrollPosition() {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      let scrollY = window.scrollY ? Math.round(window.scrollY) : 0
      setScrollPosition(scrollY);
    }
    document.addEventListener("scroll", handleScroll);

    return () => {
      document.removeEventListener("scroll", handleScroll)
    }
  }, []);

  return scrollPosition;
}

export default useScrollPosition;

使用

   const scrollPosition = useScrollPosition()
   console.log('scrollPosition', scrollPosition);

效果

05：自定义一个 useImageToBase64(img转换为base64) hook

useImageToBase64.jsx

import React, { useState } from 'react';

const useImageToBase64 = () => {
  const [base64Image, setBase64Image] = useState(null);

  const imageToBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();

      reader.onload = () => {
        resolve(reader.result);
      };

      reader.onerror = (error) => {
        reject(error);
      };

      reader.readAsDataURL(file);
    });
  };

  const handleImageUpload = (event) => {
    const file = event.target.files[0];
    if (file) {
      imageToBase64(file)
        .then((base64) => {
          setBase64Image(base64);
        })
        .catch((error) => {
          console.error('Error converting image to Base64:', error);
        });
    }
  };

  return { base64Image, handleImageUpload };
};

export default useImageToBase64;

使用

import React from 'react';
import useImageToBase64 from "../自定义hook/useImageToBase64 "
export default function Test(props) {
  const { base64Image, handleImageUpload } = useImageToBase64();
  console.log('base64Image',base64Image);
    return (
        <div className='content' style={{marginTop:'40px'}}>
          Test
          <div>
            <input type="file" accept="image/*" onChange={handleImageUpload} />
            {base64Image && <img src={base64Image} alt="Uploaded" />}
          </div>
        </div>
    )
}

效果