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 组件。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6789c264881faa801f70752d
