[Front-end knowledge] React foundation consolidation (forty-six) - the application of custom Hook

React foundation consolidation (forty-six) - the application of custom Hook

1. Application of custom Hook

Custom Hook is essentially just an extraction of function code logic. Strictly speaking, it is not a feature of React.

1. Print logs when implementing component creation/destruction

   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. Realize Context sharing

   Encapsulation TokenContextand UserContexttwo Contexts are in the custom Hook useUserToken, and userUserTokenthe content of the two Contexts can be obtained at the same time by using:

   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. Implement getting the scroll position

   Encapsulate the scrolling listening event:

   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;
   
   

   useScrollPositionReuse through custom 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 data storage

   Encapsulate useLocalStoragecustom 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;
   
   

   Through useLocalStorageautomatic storage of localStorage data and reuse. That is, once the value that requires local storage changes, update localStorage accordingly:

   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>
     );
   });