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

这篇具有很好参考价值的文章主要介绍了【前端知识】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>
      );
    });
    
    

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

  2. 实现Context共享

    封装TokenContextUserContext 两个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>
      );
    });
    
    

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

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

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

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

    【前端知识】React 基础巩固(四十六)——自定义Hook的应用,前端知识,React,react.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-622981.html

到了这里,关于【前端知识】React 基础巩固(四十六)——自定义Hook的应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端知识】React 基础巩固(四十一)——手动路由跳转、参数传递及路由配置

    利用 useNavigate 封装一个 withRouter(hoc/with_router.js) 添加到hoc/index.js文件中 利用withRouter,拦截Home组件,实现手动跳转路由 路由参数传递包括:1.动态路由传参;2.查询字符串传参 改造withRouter,通过 useParams() 和 useSearchParams() 来接收两种参数传递: 在界面中,通过params来接收

    2024年02月14日
    浏览(51)
  • 【前端知识】React 基础巩固(四十四)——其他Hooks(useContext、useReducer、useCallback)

    在类组件开发时,我们通过 类名.contextType = MyContext 的方式,在类中获取context,多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context: 可以看到,当我们需要使用多个Context时,存在大量繁琐的嵌套代码;而Context Hook能够让我们通过Hook直接获取某个Context的值,如

    2024年02月14日
    浏览(47)
  • 【前端知识】React 基础巩固(三十六)——RTK中的异步操作

    引入RTK中的createAsyncThunk,在extraReducers中监听执行状态 在界面中引入所需的异步操作Action 查看运行结果 extraReducer还可以传入一个函数,函数接受一个builder参数: 查看运行结果,与之前的写法结果一致

    2024年02月15日
    浏览(50)
  • 【前端知识】React 基础巩固(三十七)——自定义connect高阶组件

    从这行代码可以看到,目前的connect直接引用了上级目录的store,过于依赖目前既定的store,这样不利于复用。假设另一个项目的store所在位置不在上级目录中,则会出现问题。 为了让所有人都能使用,我们应该把这种“写死”的做法换成让开发者自己传入一个store: 构建一个

    2024年02月15日
    浏览(50)
  • 【前端知识】React 基础巩固(十三)——列表渲染

    在 React 中没有像 Vue 模块语法中的 v-for 指令,而是需要我们通过 JS 代码的方式组织数据,转成 JSX 在 React 中,展示列表最多的方式就是使用数组的 map 高阶函数 在展示数组前,有时会进行一些处理 过滤一些内容(filter 函数) 截取数组中的一部分内容(slice 函数) 列表中的

    2024年02月10日
    浏览(54)
  • 【前端知识】React 基础巩固(二十八)——StrictMode

    StrictMode 是一个用来突出显示应用程序中潜在问题的工具 与 Fragment 一样,StrictMode 不会渲染任何可见的 UI 为后代出发额外的检测和警告 严格模式检查仅在开发模式下运行,不影响生产构建 严格模式检查什么? 识别不安全的生命周期 使用过时的 ref API 检查意外的副作用 组件

    2024年02月16日
    浏览(51)
  • 【前端知识】React 基础巩固(二十七)——Fragment

    Fragment 允许将子列表分组,而无需向 DOM 添加额外节点 可以采用语法糖 / 来替代 Fragment,但在需要添加 key 的场景下不能使用此短语 查看Fragment应用后的效果

    2024年02月16日
    浏览(61)
  • 【前端知识】React基础巩固(二)——JSX注意点

    createElement存在的问题: 繁琐不简洁 不直观,无法一眼看出所描述的结构 不优雅,开发体验不好 JSX 简介:JSX 是 JavaScript XML 的简写,表示了在JS代码中写XML(HTML)格式的代码 优势:声明式语法更加直观,与HTML结构相同,降低学习成本,提高开发效率 JSX 是 react 的核心内容‘

    2024年02月09日
    浏览(71)
  • 【前端知识】React 基础巩固(二十三)——React 性能优化 SCU相关

    React 的渲染流程 JSX - 虚拟 DOM - 真实 DOM React 的更新流程 props/state 改变 - render函数重新执行 - 产生新的DOM树 - 新旧DOM树进行diff - 计算出差异进行更新 - 更新到真实的DOM React 在 props 或 state 发生改变时,会调用 React 的 render 方法,会创建一颗不同的树 React 需要基于这两颗不同的

    2024年02月15日
    浏览(73)
  • 【前端知识】React 基础巩固(三十五)——ReduxToolKit (RTK)

    Redux Tool Kit (RTK)是官方推荐的编写Redux逻辑的方法,旨在成为编写Redux逻辑的标准方式,从而解决上面提到的问题。 RTK的核心API主要有如下几个: configureStore:包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合你的slice reducer,添加你提供的任何Redux中间件

    2024年02月15日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包