React Hooks 是 React 16.8 新增的特性，它可以让你在不编写类组件的情况下，复用 State 和其他 React 特性。使用 Hooks 之后，你可以在函数式组件内部使用 React 的 state 和生命周期等特性，使得代码更加简单和易于理解。本文将为你详细介绍 React Hooks 的基本概念，如何使用 Hooks 来编写函数式组件，并提供一些示例代码，让你建立起完整的 Hooks 技能体系。
Hooks 的基本概念
Hooks 是一些特殊的函数，给你的函数式组件添加了一些响应式功能。React Hooks 包含两类函数：State Hooks 和 Effect Hooks。
- State Hooks：useState、useReducer
- Effect Hooks：useEffect、useLayoutEffect、useCallback、useMemo、useRef 和 useContext
State Hooks
State Hooks 使得你能够在函数式组件中使用 state，及时更新你的 UI 。useState 是 State Hooks 中最常用的一个，它接受一个初始状态并返回一个包含当前状态及更新状态的函数。
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- -------- --------- - ----- ------- --------- - ------------ ------ - ----- --------- ----------- ------- ----------- -- -------------- - ---------------- ------- ----------- -- -------------- - ------------------ ------ - -展开代码
在这个例子中，每次添加或减少都会更新 count 的状态，然后重新渲染计数器组件。
Effect Hooks
Effect Hooks 是 React 异步渲染的核心，通过它，你可以在组件挂载或卸载时执行一些副作用操作，例如发送异步请求或更新浏览器标签。useEffect 是最常用的 Effect Hooks 函数，它允许你在每次渲染时执行一些操作。
-- -------------------- ---- ------- ------ ------ - --------- --------- - ---- -------- -------- ------- - ----- ------ -------- - ------------ ------------ -- - ----- ----- - -------------- -- ------------ - --- ------ ------ -- -- --------------------- -- -------- ------ --------- ------- ------------ -展开代码
在这个例子中，我们使用 useEffect 创建一个 Timer 组件。useEffect 会在每次组件渲染时执行，同时又会检测 time 是否发生变化。定时器会在渲染完成后启动，然后每秒更新一次 time 状态。在组件卸载时，我们使用 return 语句清除定时器，以免发生内存泄漏。
如何使用 Hooks
Hooks 函数可以使用在函数式组件中、自定义 Hooks 中等地方。使用它们的方式与使用其他 React 特性的方式相同。
setState
在函数式组件中使用 state，我们使用 useState 来替代 class 组件中的 setState。
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- -------- --------- - ----- ------- --------- - ------------ ------ - ----- --------- ----------- ------- ----------- -- -------------- - ---------------- ------- ----------- -- -------------- - ------------------ ------ - -展开代码
useEffect
useEffect 允许我们执行副作用操作。这些操作包括发送异步请求、订阅状态更新、监听浏览器事件、操作全局变量等等。我们可以在 useEffect 中执行这些操作，并返回一个运行副作用代码的函数。
-- -------------------- ---- ------- ------ ------ - --------- --------- - ---- -------- -------- ------- - ----- ------- --------- - --------------- ----- ------- ------------ -- - -------------- - ------ --- ------ ----------------- -展开代码
在这个例子中，每次组件渲染时，我们使用 useEffect 将 title 设置为 React Hooks Demo。这个操作只会在组件挂载时执行一次，之后组件重新渲染时， useEffect 就不会再执行了。如果第二个参数传递一个空数组，相当于告诉 React 只在挂载和卸载时执行。当 useEffect 依赖的值发生改变的时候， useEffect 也会再次执行，在此可以在第二个参数依赖中传递 useEffect 依赖的值。
useReducer
当我们需要修改的状态比较复杂时，我们就需要使用 useReducer 来管理状态。useReducer 是另一个 state Hooks 函数，它使用了 Redux 的思想，并将 reducer 和 state 作为两个不同的实体来处理。
-- -------------------- ---- ------- ------ ------ - ---------- - ---- -------- -------- -------------- ------- - ------ ------------- - ---- ------------ ------ - ------ ----------- - - -- ---- ------------ ------ - ------ ----------- - - -- -------- ----- --- -------- - - -------- --------- - ----- ------- --------- - ------------------- - ------ - --- ------ - ----- --------- ----------------- ------- ----------- -- ---------- ----- ----------- ---------------- ------- ----------- -- ---------- ----- ----------- ------------------ ------ - -展开代码
在这个例子中，我们使用 useReducer 来管理一个 count 状态。我们定义了一个 reducer 函数来处理各种 state 变化情况。使用 useReducer 时，你必须传递一个 reducer 函数和初始 state。
小结
在本文中，我们学习了 React Hooks 的基础概念，包括 state 和 effect 等 Hooks 函数，以及如何在函数式组件中使用它们。我们也讨论了如何使用 Hooks 来管理组件的状态和执行副作用操作。通过阅读示例代码，你已经掌握了基础的 React Hooks 技能，现在就开始将 Hooks 应用到你的下一个React项目中吧。
如果你想深入学习 React Hooks，我建议你去官网查看更多相关信息以及扩展阅读资料。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bbeb7a306f20b3a6bc72a2
