【前端知识】React 基础巩固(四十六)——自定义Hook的应用

React 基础巩固(四十六)——自定义Hook的应用

一、自定义Hook的应用

自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上而言，它并不算React的特性。

1. 实现组件创建/销毁时打印日志

   import React, {
         
          memo, useEffect, useState } from "react";
   
   function useLogLife(name) {
         
         
     useEffect(() => {
         
         
       console.log(`${
           
           name}组件创建`);
       return () => {
         
         
         console.log(`${
           
           name}组件销毁`);
       };
     }, []);
   }
   
   const Home = memo(() => {
         
         
     useLogLife("Home");
   
     return <h1>Home Page</h1>;
   });
   
   const About = memo(() => {
         
         
     useLogLife("About");
   
     return <h1>About Page</h1>;
   });
   
   export default memo(function App() {
         
         
     const [isShow, setIsShow] = useState(true);
   
     useLogLife("App");
     return (
       <div>
         <h1>App Component</h1>
         <button onClick={
         
         (e) => setIsShow(!isShow)}>切换</button>
         {
         
         isShow && <Home />}
         {
         
         isShow && <About />}
       </div>
     );
   });
   
   

   

2. 实现Context共享

   封装TokenContext和UserContext 两个Context在自定义HookuseUserToken中，通过使用userUserToken同时获取两个Context的内容：

   import React, {
         
          memo, useContext } from "react";
   import {
         
          useUserToken } from "./hooks";
   
   const Home = memo(() => {
         
         
     const [user, token] = useUserToken();
     console.log(user, token);
     return <h1>Home Page</h1>;
   });
   
   const About = memo(() => {
         
         
     const [user, token] = useUserToken();
     console.log(user, token);
     return <h1>About Page</h1>;
   });
   
   export default memo(function App() {
         
         
     return (
       <div>
         <h1>App Component</h1>
         <Home />
         <About />
       </div>
     );
   });
   
   

   

3. 实现获取滚动位置

   封装滚动监听事件：

   import {
         
          useEffect, useState } from "react";
   
   function useScrollPosition() {
         
         
     const [scrollX, setScrollX] = useState(0);
     const [scrollY, setScrollY] = useState(0);
     useEffect(() => {
         
         
       function handleScroll() {
         
         
         console.log(window.scrollX, window.scrollY);
         setScrollX(window.scrollX);
         setScrollY(window.scrollY);
       }
       window.addEventListener("scroll", handleScroll);
       return () => {
         
         
         window.removeEventListener("scroll", handleScroll);
       };
     }, []);
   
     return [scrollX, scrollY];
   }
   
   export default useScrollPosition;
   
   

   通过useScrollPosition自定义Hook进行复用：

   import React, {
         
          memo } from "react";
   import "./style.css";
   import {
         
          useScrollPosition } from "./hooks";
   const Home = memo(() => {
         
         
     const [scrollX, scrollY] = useScrollPosition();
     console.log("Home", scrollX, scrollY);
     return (
       <h1>
         Home Page: {
         
         scrollX} --- {
         
         scrollY}
       </h1>
     );
   });
   
   const About = memo(() => {
         
         
     const [scrollX, scrollY] = useScrollPosition();
     console.log("About", scrollX, scrollY);
     return (
       <h1>
         About Page: {
         
         scrollX} --- {
         
         scrollY}
       </h1>
     );
   });
   export default memo(function App() {
         
         
     return (
       <div className="app">
         <h1>App Component</h1>
         <Home />
         <About />
       </div>
     );
   });
   
   

   

4. localStorage数据存储

   封装useLocalStorage自定义Hook：

   import {
         
          useEffect, useState } from "react";
   
   function useLocalStorage(key) {
         
         
     const [data, setData] = useState(() => {
         
         
       const item = localStorage.getItem(key);
       if (!item) return "";
       return JSON.parse(item);
     });
   
     useEffect(() => {
         
         
       localStorage.setItem(key, JSON.stringify(data));
     }, [data]);
   
     return [data, setData];
   }
   export default useLocalStorage;
   
   

   通过useLocalStorage来实现localStorage数据的自动化存储，并进行复用。即，一旦需要本地存储的值发生变化，便对localStorage进行对应的更新：

   import React, {
         
          memo, useEffect, useState } from "react";
   import "./style.css";
   import {
         
          useLocalStorage } from "./hooks";
   
   export default memo(function App() {
         
         
     // 通过key，直接从localStorage获取数据
     const [token, setToken] = useLocalStorage("token");
   
     function setTokenHandle() {
         
         
       setToken("new token");
     }
   
     const [avatarUrl, setAvatarUrl] = useLocalStorage("avatarUrl");
     function setAvatarUrlHandle() {
         
         
       setAvatarUrl("new url");
     }
   
     return (
       <div className="app">
         <h1>App Component</h1>
         <h1>token:{
         
         token}</h1>
         <button onClick={
         
         setTokenHandle}>设置token</button>
         <h1>Avatar:{
         
         avatarUrl}</h1>
         <button onClick={
         
         setAvatarUrlHandle}>设置avatarUrl</button>
       </div>
     );
   });