简介
现在的前端页面开发越来越复杂，需要管理的状态、生命周期函数和副作用也越来越多，在 React 中，需要用到的大量的逻辑抽象，比如高阶组件、render props 和 hooks，其中 hooks 能够让 React 组件函数变得更加强大和可复用。而 m-hook 就是一个可以帮助我们更好地复用 hooks 逻辑的 npm 包。
m-hook 是库 @brickify/m 的附属功能，提供了一些 hooks 的实现和使用方法。然而 m-hook 并不是一个功能强大的库，而是一些有用的 hooks。在使用过程中，也能让我们更好地理解自定义 hooks 的实现。
安装
可以通过 npm 在你的项目中安装 m-hook：
--- ------- ----------------
或者 yarn：
---- --- ----------------
基础
在使用 m-hook 的时候，需要先导入一个文档中提供的 hook，比如 useLocalStorage。useLocalStorage 可以让我们在本地存储中存储一个值，并且在挂载组件之后实例化它。
------ - --------------- - ---- -------------------
-------- ----------- -
----- ------- --------- - ------------------------------ -----------------
-- ---------
------------ -- -
----------------------------------- -------
-- ---------
------ -
-----
------ ------------- ----------- -- ------------------------- --
------
--
-自定义 hooks
自定义 hooks 可以让我们在组件之间复用逻辑状态逻辑。我们可以使用 m-hook 来实现这个自定义的 hook：
------ - --------- --------- - ---- --------
------ -------- --------------------- -
----- ------------ -------------- - ----------
------- -------------------
------ ------------------
---
------------ -- -
----- ------------ - -- -- -
---------------
------- -------------------
------ ------------------
---
--
--------------------------------- --------------
------ -- -- -
------------------------------------ --------------
--
-- ----
------ -----------
-现在我们可以在任何需要访问窗口尺寸的组件中使用这个 hooks：
------ - ------------------- - ---- ------------------------
-------- ----------- -
----- - ------- ----- - - ----------------------
------ -
-----
---------- --------------
--------- -------------
------
--
-结论
这些基础的 hooks 和自定义 hooks 使得我们可以在 React 应用中快速编写复杂的功能和逻辑。m-hook 为我们构建自己的 hooks 提供了灵活的 API，并使得我们的代码易于重用和维护。我们相信，使用 m-hook，可以帮助大家写出更好维护、更加可读的代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005696a81e8991b448e4d38