React Hooks是React 16.8.0版本以后的功能，它可以使得函数组件里面使用state和其他React特性，有效地解决了“类组件”与“函数组件”之间的“分层讨论”。本文将分别介绍useContext和useReducer两个常用的React Hooks。
useContext
在React中，传统的组件通信方式是通过组件树自上而下地传递props属性，而通过useContext我们可以更简单的实现跨层级组件通信。通过useContext，我们可以在需要的地方直接从根组件上使用context。
假设我们有一个TodoList组件，需要获取当前用户的信息，则传统的写法是通过props属性从顶部往下传递，则代码如下：
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ ----- ----------- - ------------------------ -- ------
-- --------
------ ----- ---- --------
------ - ----------- - ---- -----------------
------ ------- -------- ------- -
----- ---- - ------------------------ -- -------------
------ -
-----
-------- ---------
-------- ---------------
--------- ----------------
------
--
-
-- ------
------ ----- ---- --------
------ ----- ---- ---------------------
------ - ----------- - ---- -------------------
------ ------- -------- ----- -
----- ---- - - ----- ----- ----- ------ ---------------------- --
------ -
--------------------- -------------
---- ----------------------
--------- ----- ------------
------ --
------
-----------------------
--
-上面的代码中，我们在App.js文件中定义一个UserContext上下文对象，并将其传递给Tweet组件通过useContext从中获取用户信息，由于App组件直接包含Tweet组件，这些数据会“水平”地在组件树上传递，这样就能“跨层级”地访问数据。
为避免一些潜在的问题，app.js文件需要使用Provide组件包裹子组件。
// Provide 组件
<UserContext.Provider value={user}>
{props.children}
</UserContext.Provider>通过上下文，不仅仅可以避免props层层传递的问题，还能够集中管理应用程序的状态。
完整示例代码如下：
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ ----- ----------- - ------------------------
------ ------- -------- ---------- -
----- ---- - ------------------------ -- -------------
------ -
-----
-------- ---------
-------- ---------------
--------- ----------------
------
--
-
-- ------
------ ----- ---- --------
------ --------- - ----------- - ---- -------------
-------- ----- -
----- ---- - - ----- ----- ----- ------ ---------------------- --
------ -
--------------------- -------------
---- ----------------
-------------- ------------
--------- --
------
-----------------------
--
-
------ ------- ----
useReducer
使用useReducer可以更好地管理复杂的状态。通过使用这个Hook，我们可以将整个state对象推送到一些action函数中，然后将新的对象返回并重新渲染组件，这样可以使组件更加简洁、灵活和易于维护。
useReducer可以根据之前state来生成新的state，这样可以更好地控制组件的变化，从而提高代码的、更细粒度的控制性。
下面是使用useReducer的示例代码：
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
----- ------------ - --
-------- ------------------- ------- -
------ ------------- -
---- ------
------ ----- - --
---- --------
------ ----- - --
---- --------
------ -------------
--------
------ ------
-
-
-------- ------- -
----- ------- --------- - ------------------------ --------------
------ -
-----
----------------------
------- ----------- -- ---------- ----- ----- ---------------
------- ----------- -- ---------- ----- ------- ---------------
------- ----------- -- ---------- ----- ------- ---------------
------
--
-
------ ------- ------上述代码定义了一个计数器的组件Count，并用useReducer来管理状态。使用useReducer的好处是可以将组件的状态与组件的行为（动作）解耦从而使得代码更加清晰，易于维护。
由于这个独立的状态可以被其他组件共享，且不会对外通信，因此它不会像使用上下文问题一样存在隐私问题。
完整示例代码如下：
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
----- ------------ - --
-------- ------------------- ------- -
------ ------------- -
---- ------
------ ----- - --
---- --------
------ ----- - --
---- --------
------ -------------
--------
------ ------
-
-
-------- ------- -
----- ------- --------- - ------------------------ --------------
------ -
-----
--------- -----------
------- ----------- -- ---------- ----- ------- ------------------
------- ----------- -- ---------- ----- ----- ----------------
------- ----------- -- ---------- ----- ------- ------------------
------
--
-
------ ------- ------总结
通过使用React Hooks中的useContext及useReducer，我们能够简单、灵活地处理跨组件通信和复杂的状态管理。相对于Class组件，React Hooks更容易理解和维护。
这些技术都是有深度、有学习和指导意义的。通过学习这些技术，我们能够更好地写出更优雅的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d9d0948841e9894bf472a