React Hooks 是 React 16.8 新增的特性，它可以让我们在不使用 class 的情况下使用 state 和其他 React 特性。React Hooks 的出现，使得我们可以更加简洁、优雅地编写 React 组件。在本文中，我们将深入学习 React Hooks，并且探讨如何在 React-Redux 中使用它。
什么是 React Hooks？
React Hooks 是一种函数，它可以让我们在函数组件中使用 React 特性。在 React Hooks 出现之前，我们必须使用 class 组件才能使用 state 和其他 React 特性。React Hooks 的出现，可以使我们更加方便地编写函数组件，而不必使用 class 组件。
React Hooks 包括以下几种：
- useState
- useEffect
- useContext
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
其中，useState、useEffect、useContext、useReducer 是最常用的几种。
useState
useState 是 React Hooks 中最常用的一种。它可以让我们在函数组件中使用 state。useState 接收一个初始值参数，返回一个数组，数组的第一个元素是当前 state 的值，第二个元素是一个函数，可以更新 state 的值。代码如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ------------- -
-------------- - ---
-
------ -
-----
--------- -----------
------- --------------------------- -----------
------
--
-
------ ------- --------在上面的例子中，我们使用 useState 定义了一个 count 的 state 变量，初始值为 0。handleClick 函数用来更新 count 的值。当我们点击按钮时，会触发 handleClick 函数，从而更新 count 的值。
useEffect
useEffect 可以让我们在函数组件中使用生命周期函数。useEffect 接收一个函数作为参数，这个函数会在组件渲染时执行。我们可以在这个函数中执行一些副作用操作，比如订阅事件、修改 DOM 等。代码如下：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------------ -- -
-------------- - ---- ------- -------- -------
---
-------- ------------- -
-------------- - ---
-
------ -
-----
--------- -----------
------- --------------------------- -----------
------
--
-
------ ------- --------在上面的例子中，我们使用 useEffect 修改了页面的标题，当 count 的值发生变化时，会重新执行 useEffect 函数，从而更新页面的标题。
useContext
useContext 可以让我们在函数组件中使用 React Context。React Context 可以让我们在组件之间共享数据，而不必使用 props。useContext 接收一个 Context 对象作为参数，返回该 Context 对象的当前值。代码如下：
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
----- ------------ - -----------------------------
-------- -------- -
----- ----- - -------------------------
------ -
------- -------- ---------------- ----- --- ------- - ------ - ------- ------ ----- --- ------- - ------ - ------ ---
------ --- ------- - ------- - -------
---------
--
-
------ ------- -------在上面的例子中，我们使用 useContext 获取了 ThemeContext 的当前值，并根据该值来渲染按钮的样式。
useReducer
useReducer 可以让我们在函数组件中使用 Redux 的 reducer。useReducer 接收一个 reducer 函数和一个初始值作为参数，返回一个数组，数组的第一个元素是当前 state 的值，第二个元素是一个 dispatch 函数，可以触发 reducer 函数的执行。代码如下：
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
-------- -------------- ------- -
------ ------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
--------
----- --- --------
-
-
-------- --------- -
----- ------- --------- - ------------------- ---
------ -
-----
--------- -----------
------- ----------- -- ---------- ----- ----------- --------------
------- ----------- -- ---------- ----- ----------- --------------
------
--
-
------ ------- --------在上面的例子中，我们定义了一个 reducer 函数，它接收一个 state 和一个 action，根据 action 的类型来更新 state 的值。然后，我们使用 useReducer 定义了一个 count 的 state 变量，并传入了 reducer 函数和初始值 0。接着，在按钮的 onClick 事件中，我们使用 dispatch 函数触发了 reducer 函数的执行。
如何在 React-Redux 中使用 React Hooks？
在 React-Redux 中使用 React Hooks，非常简单。我们只需要在函数组件中使用 useSelector 和 useDispatch 即可。useSelector 可以让我们获取 Redux store 的 state，useDispatch 可以让我们触发 Redux store 的 dispatch 函数。代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
-------- --------- -
----- ----- - ----------------- -- -------------
----- -------- - --------------
-------- ------------- -
---------- ----- ----------- ---
-
------ -
-----
--------- -----------
------- --------------------------- -----------
------
--
-
------ ------- --------在上面的例子中，我们使用 useSelector 获取了 Redux store 中的 count 变量，并使用 useDispatch 获取了 dispatch 函数。然后，在按钮的 onClick 事件中，我们使用 dispatch 函数触发了一个 increment 的 action。
结语
React Hooks 是一个非常有用的特性，它可以让我们更加方便地编写函数组件。在 React-Redux 中使用 React Hooks，可以让我们更加简洁、优雅地编写 Redux 组件。希望本文对大家有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6789c264881faa801f70752d