React Hook 是 React 16.8 引入的新特性。它让我们在函数组件中使用状态和其他 React 特性，从而使代码更具可读性、可重用性和灵活性。本文将介绍 TypeScript 中两个常用的 Hook：useState 和 useContext，并提供示例代码。
useState
useState 是最常用的 Hook 之一。它允许我们在函数组件中使用状态，而无需将状态提升到类组件或使用 Redux。useState 接受一个初始值并返回一个包含当前状态和更新该状态的函数的数组。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
--------- ----- -
----- -------
---- -------
-
------ ----- -------------- -------- - -- -- -
-- ---- ---- - ----- ----- -------
----- ------ -------- - ----------------- ----- --- ---- - ---
----- ---------------- - ------- ------------------------------------ -- -
-- -- ---- ---- ---- --
--------- -------- ----- ------------------ ---
--
----- --------------- - ------- ------------------------------------ -- -
-- -- ---- ---- --- --
--------- -------- ---- -------------------------- ---
--
------ -
-----
------ ----------- ----------------- --------------------------- --
------ ------------- ---------------- -------------------------- --
------
--
--在上面的示例中，我们创建了一个名为 user 的 state 和更新方法 setUser，并将其初始值设置为空字符串和 0。两个输入框的值被绑定到 user 对象的属性上，每当它们发生变化时，我们使用 setUser 更新相应的状态。
useContext
useContext 允许我们在 React 应用程序中共享数据而无需通过 props 层层传递。具体来说，它使得访问跨组件状态变得简单，例如主题、用户信息等等。useContext 函数接受一个 context 对象并返回与该 context 相关联的当前值。
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
--------- ------ -
---------------- -------
------ -------
-
-- -- ------- --
------ ----- ------------ - -----------------------------
---------------- -------
------ ------
---
------ ----- ------------- -------- - -- -- -
-- - ------- -------
----- ----- - -------------------------
------ -
------- -------- ---------------- ---------------------- ------ ----------- ---
----- --
---------
--
--在上面的示例中，我们创建了一个名为 ThemeContext 的 Context 对象，并定义了一个包含背景颜色和文本颜色的主题。我们还创建了一个名为 ThemedButton 的函数组件，其中从 Context 中获取当前主题，并将其应用于按钮样式。
结论
总之，useState 和 useContext 是 React Hook 中最有用的特性之一，可以大大简化代码并提高开发效率。本文提供了关于如何使用它们的简单示例，但您应该期待在实际应用程序中研究更有深度的功能和示例。
希望这篇文章能够对你在 TypeScript 中使用 React Hooks 有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6729dcc12e7021665e25e37e