从头学React之《useEffect 完整指南》读后感

2024-02-20 19:42:30

概览

当使用React开发应用，特别是大型复杂的应用程序时，理解如何有效利用useEffect至关重要。这个生命周期钩子使得管理副作用变得简单直接，如数据获取、订阅或手动更改DOM等操作。

使用场景介绍

数据获取

在许多情况下，页面加载完成后需要从API获取最新数据。此时可以使用useEffect来实现这一功能。

示例代码：

import React, { useState, useEffect } from 'react';

function FetchData() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json))
      .catch(error => console.error('Error:', error));
  }, []); // 空依赖数组表示只在组件挂载和卸载时运行

  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  );
}

避免内存泄漏

处理副作用，如订阅服务或定时器等事件源时，确保在组件卸载前清理它们。这能避免潜在的内存泄漏问题。

示例代码：

import React, { useState, useEffect } from 'react';

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);

    // 清理函数
    return () => clearInterval(interval); // 组件卸载时调用
  }, []); // 空依赖数组确保只运行一次

  return <h1>{time}</h1>;
}

常见问题与解决方案

不当的依赖项使用

在useEffect中不正确地指定依赖项可能会导致无限循环或数据丢失。

示例代码：

function IncorrectUsageExample() {
  const [value, setValue] = useState('');
  
  useEffect(() => {
    console.log('Component updated with value:', value);
    // 错误的依赖数组设置，可能导致不必要的重新渲染。
  }, [value]); 

  return (
    <input 
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

function CorrectUsageExample() {
  const [value, setValue] = useState('');
  
  useEffect(() => {
    console.log('Component updated with value:', value);
    // 正确的依赖数组设置
  }, []); 

  return (
    <input 
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

进阶技巧

使用自定义钩子复用逻辑

通过创建自定义钩子，可以将常用逻辑封装起来，便于在多个组件间重复使用。

示例代码：

// hooks/useFetch.js
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(json => {
        setData(json);
        setLoading(false);
      })
      .catch(error => console.error('Error:', error));
  }, [url]);

  return { data, loading };
}

// 使用自定义钩子的组件
import React from 'react';
import useFetch from './hooks/useFetch';

function DataDisplay() {
  const { data, loading } = useFetch('https://api.example.com/data');

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  );
}