[Conocimiento de front-end] Consolidación de la base React (cuarenta y seis): la aplicación de Hook personalizado

Consolidación de la base React (cuarenta y seis): la aplicación de Hook personalizado

1. Aplicación de gancho personalizado

Custom Hook es esencialmente solo una extracción de la lógica del código de función.Estrictamente hablando, no es una característica de React.

1. Imprimir registros al implementar la creación/destrucción de componentes

   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. Darse cuenta de compartir contexto

   La encapsulación TokenContexty UserContextdos Contextos están en el Hook personalizado useUserToken, y userUserTokenel contenido de los dos Contextos se puede obtener al mismo tiempo usando:

   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. Implementar obtener la posición de desplazamiento

   Encapsule el evento de escucha de desplazamiento:

   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;
   
   

   useScrollPositionReutilizar a través de Hook personalizado:

   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. almacenamiento de datos localStorage

   Encapsular useLocalStoragegancho personalizado:

   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;
   
   

   A través useLocalStoragedel almacenamiento automático de datos de almacenamiento local y reutilización. Es decir, una vez que cambie el valor que requiere almacenamiento local, actualice localStorage en consecuencia:

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