安全地使用 React Hooks 和 TypeScript

React Hooks 和 TypeScript 是目前前端领域最热门的技术之一。React Hooks 带来了全新的组件状态管理方案，而 TypeScript 则为前端代码的类型安全提供了便捷的解决方案。但是在使用 React Hooks 和 TypeScript 过程中，亦存在一些潜在的问题，例如使用 Hooks 的正确性及类型相关的问题。本文将会详细介绍如何安全地使用 React Hooks 和 TypeScript。

React Hooks 的正确使用

Hooks 是 React 16.8 引入的新特性，它允许在不编写 class 的情况下使用 state 以及其他的 React 特性。Hooks 可以让 React 中的代码更简洁、可复用且易于组合。

useState 和 useReducer

useState 和 useReducer 是 React Hooks 中最常用的两个 Hooks。使用这两个 Hooks 时，需要保证以下几点：

  • 以一个函数式组件为基础，Hook 只能在顶级组件中进行调用；
  • 不能在循环体或条件语句等有很多分支的地方调用 Hook；
  • useState 和 useReducer 的初始状态必须与组件渲染一致；
  • 无法在 class 组件或普通函数中调用 useState 和 useReducer。

下面是一个使用 useState 的示例代码：

------ ------ - -------- - ---- --------

--------- ----- -
  ------ -------
-

----- -------------- --------------- - -- ----- -- -- -
  ----- ------- --------- - --------------------

  ------ -
    -----
      ----------------
      ---
        ------ -------
        ------- ----------- -- -------------- - --------------
      ----
    ------
  --
--

需要注意的是，上述示例代码中定义的 useState 泛型参数指定了 count 的类型为 number。这种方式可以确保使用 count 时类型的正确性。

useEffect 和 useLayoutEffect

useEffect 和 useLayoutEffect 主要用于在组件中执行副作用操作。这两个 Hooks 的主要区别是，useLayoutEffect 会在 DOM 更新之前同步执行，而 useEffect 则是在 DOM 更新之后异步执行。

使用 useEffect 和 useLayoutEffect 时，需要确保以下几点：

  • 副作用操作必须是纯函数，即完全根据输入返回输出，不产生任何副作用；
  • 副作用操作必须保证可重入性，即多次调用结果与单次调用结果相同；
  • 副作用操作必须保证无副作用，即与组件本身无关的操作应该避免在这里执行。

下面是一个使用 useEffect 和 useRef 的示例代码：

------ ------ - ---------- ------ - ---- --------

--------- ----- -
  ---- -------
-

----- ------------ --------------- - -- --- -- -- -
  ----- -------- - -------------------------------

  ------------ -- -
    ----- ----- - -----------------
    -- ------- -
      --------- - ----
      ------------------------------ -- -- -
        ------------------ ------ ----------
        -- -- ---------
      ---
      ------ -- -- ----------------------------------
    -
  -- -------

  ------ ---- -------------- ---
--

useCallback 和 useMemo

useCallback 和 useMemo 用于性能优化，主要避免一些无意义的渲染。useCallback 和 useMemo 的参数都是一个函数和一个依赖项数组，依赖项数组会影响到返回值的更新。

下面是一个使用 useCallback 和 memo 的示例代码：

------ ------ - --------- ------------ ---- - ---- --------

--------- ----- -
  ------ -------
  -------- ------ ------ -- -----
-

----- --------- --------------- - ------- ------ ------- -- -- -
  ----- ------ ------------- - --------------------

  ----- --------- - -------------- -- -
    ----------------------------------------------
      ----------- -- -----------
      ------------ -- -
        -------------------
        --------------
      ---
  -- ------- ----------

  ------ -
    -----
      ------------------
      ------- ------------------------- -------------
      ----
        ---------------- -- -
          --- ------------------------------
        ---
      -----
    ------
  --
---

可以看到，上述代码使用 useCallback 来避免 fetchData 的重新声明与计算，以便在依赖项数组未变化时跳过 useEffect 和子组件的重新渲染。

useImperativeHandle 和 forwardRef

useImperativeHandle 和 forwardRef 通常用于组件间的通讯。其中 useImperativeHandle 可以为函数式组件提供一个可选的 ref 参数，使得父组件能够像操作 class 组件一样操作函数式组件；而 forwardRef 则可以让父组件直接访问子组件中的 DOM 节点或组件实例。

下面是一个使用 useImperativeHandle 和 forwardRef 的示例代码：

------ ------ - -------------------- ---------- - ---- --------

--------- ----- -
  ------ -------
  -------------- ------- ------- -- -----
-

------ --------- -------- -
  --------- -- -- -------
  --------- ------- ------- -- -----
-

----- ------ --------------- - -----------
  -- ------ ------------- -- ---- -- -
    ----- ------------ -------------- - ------------------------

    ------------------------ -- -- --
      --------- -- -- -----------
      --------- ------- -- ---------------------
    ----

    ------ -
      ------
        -----------
        ------------------
        ------------- -- -
          ------------------------------
          ------------------------------
        --
      --
    --
  -
--

----- ---- -------- - -- -- -
  ----- -------- - -----------------------

  ----- ----------- - -- -- -
    -- ------------------ -
      ----- ----- - ----------------------------
      ------------------ ----- -- -----------
      ------------------------------
    -
  --

  ------ -
    -----
      ------
        --------
        ---------------------- -- -
          ------------------ ----- ------- -- -----------
        --
        --------------
      --
      ------- ------------------------- --------------
    ------
  --
--

需要注意的是，上述代码中的 Input 组件必须使用 forwardRef 包装，以便接收父组件传递而来的 ref 参数。

TypeScript 与 React Hooks 的结合

在 TypeScript 中使用 React Hooks 的过程中，需要解决以下两个问题：

  • 如何在类型定义中指定 Hook 的泛型参数；
  • 如何避免 TS 中针对 undefined 变量的运行时错误。

指定 Hook 泛型参数

有时需要在一个组件中同时使用多个 useState 或 useReducer，这时需要指定对应的泛型参数数组。需要注意的是，这些泛型参数数组顺序应该与 useState 或 useReducer 的调用顺序相同。如果使用泛型变量，则需要先在组件定义之前把相应的类型定义在整个文件中。

下面是一个使用泛型变量的示例代码：

------ ------ - -------- - ---- --------

--------- -------- -
  --- -------
  ------ -------
  ---------- --------
-

--------- ----- --

---- -------- - ------------ --------------------------------------------------

----- ----- --------------- - -- -- -
  ----- ---------- ------------- -------- - ----------------------- -----

  ----- ----------------- - ------- ------- -- -
    ------------------- -- -
      ---------
      -
        --- ------------ - --
        ------
        ---------- ------
      --
    ---
  --

  ------ -
    -----
      ------------ --------------------------------- --
      ------------- -------------------- --
    ------
  --
--

需要注意的是，上述代码中的用法并不是最好的实现方式，只是为示例而设。实际使用中，应该考虑将状态管理移到专门的 hook 中，以便更好地复用。

避免运行时错误

在开发 React 应用时，一个常见的问题是，TS 无法完全准确地推导出变量类型。下面是一个常见的示例：

------ ------ - -------- - ---- --------

-------- -------------- ------------------ -
  ----- -------------- ---------------- - ----------------

  ------ -
    ------- ----------- -- --------------------------------
      ------------- - ------ - ------- -----
    ---------
  --
-

上述代码中，由于我们没有明确告诉 TS setIsAlertShown 变量的类型，它无法推断出变量是否为 undefined 或如何初始化变量。因此，当使用该变量时，编译器会抛出一个 undefined 错误。

要解决这个问题，我们可以使用可选链(?)来访问变量。同时，我们可以使用 non-null assert(!)操作符告诉 TS 变量不会为 undefined。

-------- -------------- ------------------ -
  ----- -------------- ---------------- - -------------------------

  ------ -
    ------- ----------- -- --------------------------------
      ------------- - ------ - ------- -----
    ---------
  --
-

在上面的示例中，使用了 useState(false) 来告诉 TS 变量的类型为 boolean，并且它有一个初始值为 false。这个明确的类型声明允许 TS 在使用变量时正确地推断其类型，并避免运行时错误。

总结

React Hooks 和 TypeScript 可以搭配使用，提高前端代码的可维护性和健壮性。在使用过程中，需要注意 Hooks 的正确性和类型定义上的问题。我们需要遵循 Hooks 的使用规范以及在使用 Hooks 时正确指定泛型参数和类型定义，以避免出现运行时错误。除此之外，我们可以使用各种技巧和工具，如可选链和 non-null assert 操作符来提高代码的可靠性和类型安全性。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c5d97b95c405902ee39058

阅读全文

猜你喜欢

  • Webpack + babel + es6 常见问题及解决方案

    Webpack + Babel + ES6 常见问题及解决方案 随着前端技术的快速发展，越来越多的新技术被引入到前端开发中。其中，Webpack + Babel + ES6 已成为前端开发中的热门技术...

    1 年前
  • 从 lazy load 到 react 不渲染 dom 块：ES11 中优化算法的应用

    在现代的前端开发中，页面加载速度对用户体验至关重要。因此，为了加快页面加载速度，我们需要注意一些优化算法。本文将介绍一些在 ES11 中优化算法的应用，包括从 lazy load 到 react 不渲...

    1 年前
  • 如何在 PWA 中使用 Web Push Notification?

    Web Push Notification 是一种基于浏览器的消息推送系统，它可以让网站的用户在浏览器关闭的情况下，也能够接收到站内提醒。这对于 PWA 应用来说，是一种非常实用的功能，能够提高用户的...

    1 年前
  • Serverless 框架使用小结

    在当今的互联网时代，前端技术的快速发展和 Serverless 架构的出现，使得前端开发者不再局限于传统的代码编写和服务器部署。Serverless架构已经成为一种热门趋势，它赋予开发者更高效的代码编...

    1 年前
  • ECMAScript 2019 (ES10)：解决 JavaScript 中 HTML 转义的问题

    在编写前端代码的时候，我们经常需要对用户输入的内容进行转义，以防止 XSS 攻击等安全问题。在 JavaScript 中，我们通常使用 escape() 或者 encodeURI() 进行 URL 转...

    1 年前
  • Redis 性能优化方案分享

    简介 Redis 是一种高性能的缓存和键值存储数据库，常用于存储常用的数据结构和提供高可用性的缓存。在实际的项目中，如果使用不当会导致 Redis 性能不佳甚至宕机，因此了解 Redis 的性能优化方...

    1 年前
  • Fastify 中的静态文件夹解决方案

    在 Web 开发中，静态文件夹是我们经常用到的一种资源，如 HTML、CSS、JavaScript、图片等。 Fastify 是一个快速高效的 Node.js Web 框架，它提供了现成的解决方案来处...

    1 年前
  • 在 Sequelize 中如何实现数据校验和错误处理

    Sequelize 是 Node.js 中一款基于 Promise 的 ORM 框架，它提供了方便的数据库操作接口，支持多种数据库类型。但在实际应用中，由于数据的业务逻辑复杂，数据的合法性校验和错误处...

    1 年前
  • 手写 Promise.all 的实现方式

    简介 Promise.all 是 Promise 对象的一个方法，用来将多个 Promise 实例包装成一个新的 Promise 实例。它接收一个数组作为参数，数组中的每个元素都是一个 Promise...

    1 年前
  • 使用 Next.js、Firebase 和 Algolia 打造实时搜索引擎

    介绍 随着互联网的不断发展和数据量的不断增加，搜索引擎已经成为了我们生活中不可或缺的一部分。但是常规的搜索引擎搜索速度、效率和准确率都存在一些问题，同时实时搜索引擎也越来越受到开发者的关注和喜爱。

    1 年前
  • 在 Vue.js 中使用 Custom Elements 的最佳实践

    在前端开发中，使用 Custom Elements 可以将 HTML 标签封装成自定义组件，提高代码的复用性和可维护性。Vue.js 不仅内置了组件系统，还可以很好地支持 Custom Element...

    1 年前
  • Mongoose 中使用 FindByIdAndUpdate 的注意事项

    Mongoose 是一款优秀的 Node.js ORM，广泛应用于 Web 应用程序的数据库操作中。其中的 FindByIdAndUpdate 是 Mongoose 提供的一个非常常用的函数之一。

    1 年前
  • 如何在 Enzyme 测试中测试 React 组件中的图片

    随着 React 越来越受欢迎，前端测试变得越来越重要。在测试 React 组件时，一种常见的需求就是测试组件中包含的图片是否正确显示。 本文将详细介绍如何在 Enzyme 测试中测试 React 组...

    1 年前
  • 解决多列 Flexbox 布局中的盒子宽度不均等问题

    在使用 Flexbox 布局时，如果出现多列布局的情况，常常会遇到盒子宽度不均等的问题。这不仅影响布局的美观度，还会对用户体验造成不良影响。本文将介绍如何解决多列 Flexbox 布局中的盒子宽度不均...

    1 年前
  • 如何在 Deno 应用中使用 JSON Web Token 进行用户认证和授权？

    在前端开发中，用户认证和授权是一个必不可少的部分。JSON Web Token (JWT) 是一种常用的身份验证机制，它使用 JSON 格式并且可以被加密，用于在用户和服务器之间传递信息。

    1 年前
  • 使用 LESS 完成响应式网站开发

    在前端开发中，许多开发者会使用 CSS 来控制网页的样式。但是，CSS 的语法和功能有着一定的限制，导致在开发过程中可能会遇到一些挑战。而 LESS，作为一种 CSS 预处理器，能够让开发者更加高效地...

    1 年前
  • Angular 中如何集成第三方 JS 库

    随着前端开发的不断发展，现在许多的第三方 JS 库都可以提供我们开发所需的功能和效果，如何在 Angular 应用中集成这些库，是每个 Angular 开发者必须要学会的一项技能。

    1 年前
  • 使用 ES6 模块化解决 JavaScript 全局变量与方法的污染问题

    随着前端应用的复杂性越来越高，JavaScript 代码也越来越庞大，越来越难以维护。同时，传统的 JavaScript 开发方式往往会使用全局变量和方法来实现数据共享和代码复用，这种做法容易导致变量...

    1 年前
  • GraphQL 中的代码生成与类型检查

    GraphQL 是一种面向 API 的查询语言，它提供了强类型、可预测、客户端驱动的数据查询方式。在前端开发中，使用 GraphQL 可以解决很多与后端数据交互相关的繁琐问题，例如数据规范化、查询复杂...

    1 年前
  • Hapi.js 与 PostgreSQL 的集成技术教程

    前言 在现代互联网应用中，前端和后端都必不可少。而前端工程师也要掌握一定的后端技能，才能更好地协同开发。本文将介绍如何使用 Hapi.js 和 PostgreSQL 创建一个集合的 Web 应用。

    1 年前

相关推荐

    暂无文章