React Hooks 是 React 16.8.0 版本引入的新特性，它可以使函数式组件具有类组件的能力，增强了组件的复用性和可维护性。本文将详细讲解四个常用的 Hooks：useState、useEffect、useContext、useReducer，并提供实际的代码示例，以便读者深入理解。
什么是 React Hooks？
React Hooks 解决了类组件的局限性：无法轻松地实现复用、状态逻辑复杂难以维护。使用该特性之后，函数式组件不再只是一个简单的函数，而是可以利用 Hook 来实现一些高级的功能。Hooks 可以让我们在不改变组件结构的情况下，重用状态逻辑等组件特性。Hooks 提供了一种简单的方式来“钩住”组件中的功能，例如状态、生命周期、上下文等，并将其从组件的主体部分中独立出来。
useState
useState 用于在函数式组件中添加状态，它可以赋予组件某些状态，并触发组件视图的重新渲染。useState 的返回值是一个数组，包含两个元素：当前状态和改变状态的函数。
------ ------ - -------- - ---- --------
-------- ------------- -
----- ------- --------- - ------------
------ -
-----
------- ------- ----- --- ------------
------- ----------- -- -------------- - ------- ------------
------
--
-在上面的例子中，我们创建了一个名为 count 的状态，并使用了 useState 赋予其一个默认值。我们在组件视图中显示了 count 的值，并提供一个按钮，用户点击这个按钮时，count 的值加 1，从而更新组件的状态和视图。
useEffect
useEffect 用于在函数式组件中定义生命周期方法，例如：componentDidMount、componentDidUpdate、componentWillUnmount 等。useEffect 可以接受两个参数：函数和依赖项数组。每当依赖项数组中的状态值发生变化，函数都会被重新调用。在 useEffect 内部，可以执行副作用操作，例如订阅事件或请求数据。
------ ------ - --------- --------- - ---- --------
-------- ------------- -
----- ------ -------- - ---------------
------------ -- -
------------
-- ----
----- --------- - ----- -- -- -
----- -------- - ----- ----------------------------------------------
----- ---- - ----- ----------------
--------------
--
------ -
-----
--------- -- ---------------
-------- -- -------------
------
--
-在上面的例子中，我们使用 useEffect 去获取 GitHub 上 Octocat 用户的数据，并在组件视图中显示这些数据。useEffect 的第二个参数是一个空数组，表示只在组件挂载时调用一次 fetchUser()。
useContext
useContext 帮助我们在函数式组件之间共享状态，而不需要借助 props 属性传递。它可以让我们在不同层级、不同文件中使用相同的数据，并自动触发视图的更新。使用 useContext，需要先创建一个共享上下文。
------ ------ - ---------- - ---- --------
----- --------- - -------------------------------
-------- ------------- -
----- ------- - ----------------------
------ -
-----
------- ----- -- --- ------- --- --------------
------
--
-在上面的例子中，我们创建了一个名为 MyContext 的上下文，用来存储共享的值。在 MyComponent 组件内部，我们使用 useContext 来读取该值，并在组件视图中显示这个值。
useReducer
useReducer 可以让我们以更直观、可靠的方式管理组件中的状态。它可以用于管理多个相关状态，从而减少了组件状态管理的复杂性。useReducer 接受两个参数：改变状态的函数和初始状态。改变状态的函数接收当前状态和更新动作，返回新的状态。
------ ------ - ---------- - ---- --------
----- ------------ - - ------ - --
-------- -------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
----- --- --------
-
-
-------- ------------- -
----- ------- --------- - ------------------- --------------
------ -
-----
------- ------- ----- --- ------------------
------- ----------- -- ---------- ----- ----------- ------- ------------
------- ----------- -- ---------- ----- ----------- --------- ------------
------
--
-在上面的例子中，我们使用 useReducer 来管理计数器的状态，我们定义了 reducer 函数，接受当前状态和更新动作，并返回新的状态。在组件中，我们使用 useReducer 来将初始状态和 reducer 函数传入，并返回一个状态对象和一个 dispatch 函数。dispatch 函数用来更新状态，调用时需要传入对应的 action.type。用户点击加一和减一的按钮时，我们通过 dispatch 发送相应的 action，从而更新状态和组件视图。
结论
本文介绍了 React Hooks 的四个常用 Hook：useState、useEffect、useContext、useReducer。我们深入了解了这些 Hook 的用途和特点，并提供了相关的代码示例，帮助读者更好地学习和使用 React Hooks。通过使用 React Hooks，我们可以更加灵活和高效地开发组件，提升代码质量和效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67113849ad1e889fe2fe0e1f