React Native 中如何使用 useEffect Hook？

推荐答案

// www.javascriptcn.com code example
import React, { useEffect, useState } from 'react';
import { Text, View } from 'react-native';

const ExampleComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 模拟异步数据获取
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();

    // 清理函数
    return () => {
      // 在这里执行清理操作，例如取消网络请求或清除定时器
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行

  return (
    <View>
      <Text>{data ? data.message : 'Loading...'}</Text>
    </View>
  );
};

export default ExampleComponent;

本题详细解读

1. useEffect 的基本用法

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

2. useEffect 的依赖数组

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

3. 清理函数

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

4. 示例代码解析

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

5. 注意事项

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