美文网首页前端技术
React Hooks 核心原理与实战 学习笔记 3 扩展篇

React Hooks 核心原理与实战 学习笔记 3 扩展篇

作者: 吴摩西 | 来源:发表于2022-11-08 20:18 被阅读0次

    17 | 打包上线

    Less 的打包涉及到三个 loader,如下:

    • less-loader:用于将 Less 代码转换成 Css。
    • css-loader:用于处理 Css 中的 import、url 等语句,以便能分析出图片等静态资源打包到最终结果。
    • style-loader:会自动生成代码,并将打包后的 Css 插入到页面 style 标签。这个 loader 会将 Css 打包到 js 文件中,在应用运行时,自动生成的代码再把这些 css 应用到页面上。

    其实背后的过程主要是,生成的 CSS 代码会以字符串的形式作为一个模块打包到最终结果,然后在运行时由 style-loader 提供的一个函数 injectStylesIntoStyleTag ,来将这个模块加入到页面的 style 标签中,从而最终生效。

    实现提取 CSS 模块到单独 CSS 文件的 plugin 是 mini-css-extract-plugin

    同时,通过刚才讲的例子,你应该也能看到 plugin 和 loader 的一个区别,就是 loader 主要用于处理不同类型的资源,将它们转换成模块;而 plugin 通常用于生成一些除了 JavaScript bundle 之外的一些打包结果,比如例子中的 index.html 和 css 文件。

    | 单元测试

    如何使用 Jest 和 React Testing Library 进行单元测试工欲善其事,必先利其器。要开始单元测试,要做的第一件事就是选择你的测试框架。
    这其实包括两个部分的选择:

    • 一个是通用的 JavaScript 测试框架,用于组织和运行你的测试用例;
    • 另一个则是 React 的测试框架,用于在内存中渲染 React 组件并提供工具库用于验证测试的结果。

    这两部分市面上其实都有挺多选择,比如通用的 JS 测试框架有 Mocha,Jasmine,Jest 等等;而测试 React 的框架有 Enzyme,Testing Library 等。

    使用 React Testing Library 测试 React 组件我们可以先想一下,要对一个 React 组件进行单元测试,需要提供什么样的运行环境去运行测试用例呢?其实主要可以分为下面三点:

    1. 需要有一个浏览器运行环境。这个主要通过 jsdom 这样一个 npm 的模块去实现。它可以在 nodejs 环境中提供一个虚拟的浏览器环境,包括了几乎所有的浏览器 API,比如 document, window 等等,从而你的组件可以在内存中运行。
    2. 需要能够解析 JSX,以及项目中用到的最新的 JavaScript 语法 **。这是通过在 Jest 配置 Babel 去完成的。
    3. 需要能够方便地渲染一个 React 组件,并对结果进行验证。这正是 Testing Library 可以提供的功能。

    可以直接测试 hooks

    import { render, act } from '@testing-library/react';
    import useCounter from './useCounter';
    
    
    test('useCounter', () => {
      const hookResult = {};
      // 创建一个测试组件,仅运行 Hook,不产生任何 UI
      const WrapperComponent = () => {
        // 将 useCounter 的返回值复制给外部的 hookResult 对象
        Object.assign(hookResult, useCounter());
        return null;
      };
      // 渲染测试组件
      render(<WrapperComponent />);
      
      // 调用 hook 的 increment 方法
      act(() => {
        hookResult.increment();
      });
      // 验证结果为 1
      expect(hookResult.count).toBe(1);
      // 调用 hook 的 decrement 方法
      act(() => {
        hookResult.decrement();
      });
      // 验证结果为 0
      expect(hookResult.count).toBe(0);
    });
    
    
    import { renderHook, act } from '@testing-library/react-hooks';
    import useCounter from './useCounter';
    test('useCounter3', () => {
      // 使用 renderHook API 来调用一个 Hook
      const { result } = renderHook(() => useCounter());
      // Hook 的返回值会存储在 result.current 中
      // 调用加一方法
      act(() => {
        result.current.increment();
      });
      // 验证结果为 1
      expect(result.current.count).toBe(1);
      // 调用减一方法
      act(() => {
        result.current.decrement();
      });
      // 验证结果为 0
      expect(result.current.count).toBe(0);
    });
    

    总结来说,只有对那些可重用的 Hooks,才需要单独的单元测试。

    结语

    “完成”和“认真完成”,在结果上有质的差别。

    为什么 Facebook 要发明 React Hooks?React Hooks 解决了什么问题?

    这个问题其实不难,但凡对 React Hooks 有点了解,都可以说出个所以然来。比如,让代码更简洁、让代码更易维护、让开发效率更高,等等。然而从这些回答中你会发现,这些候选人对 React Hooks 的理解还停留在表面,没有深入到本质。当然,如果你认真学完了我们这门课,答案其实也很简单:简化了逻辑重用。

    只有不停的实践,提问才能学习,才能提升自己。

    相关文章

      网友评论

        本文标题:React Hooks 核心原理与实战 学习笔记 3 扩展篇

        本文链接:https://www.haomeiwen.com/subject/iffgtdtx.html