React Native 中如何使用 useEffect Hook？

推荐答案

-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
------ - ----- ---- - ---- ---------------

----- ---------------- - -- -- -
  ----- ------ -------- - ---------------

  ------------ -- -
    -- --------
    ----- --------- - ----- -- -- -
      ----- -------- - ----- --------------------------------------
      ----- ------ - ----- ----------------
      ----------------
    --

    ------------

    -- ----
    ------ -- -- -
      -- ------------------------
    --
  -- ---- -- -----------------

  ------ -
    ------
      ----------- - ------------ - --------------------
    -------
  --
--

------ ------- -----------------

本题详细解读

1. useEffect 的基本用法

useEffect 是 React 提供的一个 Hook，用于在函数组件中执行副作用操作。副作用操作包括数据获取、订阅、手动更改 DOM 等。

2. useEffect 的依赖数组

useEffect 的第二个参数是一个依赖数组，用于指定在哪些状态或属性发生变化时重新执行副作用。如果传递一个空数组 []，则副作用只会在组件挂载和卸载时执行一次。

3. 清理函数

useEffect 可以返回一个清理函数，用于在组件卸载或重新渲染前执行清理操作。例如，取消网络请求、清除定时器等。

4. 示例代码解析

• useState：用于管理组件内部的状态。
• useEffect：在组件挂载时执行数据获取操作，并在组件卸载时执行清理操作。
• fetchData：模拟异步数据获取，使用 fetch API 从远程服务器获取数据并更新状态。
• 依赖数组 []：确保 useEffect 只在组件挂载和卸载时执行。

5. 注意事项

• 如果依赖数组不为空，useEffect 会在依赖项发生变化时重新执行。
• 避免在 useEffect 中直接修改状态，这可能导致无限循环。
• 清理函数是可选的，但在需要时务必使用，以避免内存泄漏。