随着 React Hooks 的出现，React 状态组件和生命周期函数等旧有写法逐渐被弃用。useState 和 useEffect 已成为日常开发中 React 开发者不可或缺的利器。本文将深入解析 useState 和 useEffect 的用法，探索在 React Hooks 中使用它们的技巧与优势。
useState
useState 是在函数组件内部声明 state 变量的 Hook。前者旧有的方式是通过在类组件的 state 中声明属性，而 useState 可以非常短小地实现类似的功能，同时在编写方面也具有更少的限制。
基本用法
使用 useState 首先需要从 React 中引入它：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
-- ------ ----- -------- -------
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-在上述代码中，useState 接收一个初始状态作为参数，例如上述例子中的 0。它返回一个数组，这个数组的第一个成员是当前状态，而第二个成员则是函数，允许您更新这个状态。
多个 state 变量
在函数中使用多个 state 变量，其语法与上述基本用法非常相似。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ----- ------- - -------------
----- ------ -------- - ----------------
------ -
-----
----- ---- -- ------ --- - -- ----- ----- --------
------- ----------- -- ---------- - ------------ ------------
------- ----------- -- -------------------- ---- -- -------------
------
--
-函数式更新
当你需要更新 state 值依赖于先前的值时，可以通过一种叫做“函数式更新”的方式来达到预期目的。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-------- ----------- -
------------------ -- --------- - ---
-
------ -
-----
------ ------- ------- ---------
------- --------------------
----- --
---------
------
--
-useEffect
useEffect 叫做生命周期的 hook，它允许你在函数组件中引入副作用。通俗理解，一旦 react 渲染组件完毕，useEffect 就会触发一次或者多次。如果我们不需要 React 在每次渲染后都执行副作用代码，则可以通过 useEffect 来提高性能。
基本用法
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
-- --- ----------------- - ------------------
------------ -- -
-------------- - ---- ------- -------- -------
---
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-在上述代码中，useEffect 接收一个函数作为其第一个参数。这个函数会在 React 每次渲染组件之后都会被调用。useEffect 函数的第一个参数会返回一个函数，在组件卸载时执行它，相当于 componentWillUnmount。
异步操作
当我们需要触发异步/延迟操作时，则需要在 useEffect 中使用第二个参数，指定 useEffect 只在该参数数组中的 state 发生改变时才触发，否则 useEffect 不再执行。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------------ -- -
----- ------- - ------------- -- -
-------------- - ---- ------- -------- -------
-- ------
------ -- -- ----------------------
-- ---------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-总结
以上就是 useState 和 useEffect 的详解。在实现状态管理或者副作用时，两者都非常有用，并且在函数组件中非常方便使用。需要注意的是，我们需要处理优化 useEffect 的执行次数，避免将副作用检测及更新思维从类组件换到函数组件，同时避免在 Hooks 中出现有状态的副作用组件。
在真实开发中，可以通过自己尝试使用和理解，并拓展我们对于 React Hooks 的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648abce648841e98948dbd4f