React技能从入门到精通：构建可维护前端应用的核心模式

2次阅读

共计 2858 个字符，预计需要花费 8 分钟才能阅读完成。

刚开始接触 React 开发时，很容易陷入以下几个典型问题：

组件过度嵌套：把太多逻辑堆砌在单个组件中，导致组件树过深难以维护
Props drilling：通过多层组件传递 props，中间组件被迫接收不关心的数据
副作用管理混乱：在 useEffect 中混杂数据获取、事件监听等逻辑，难以追踪执行顺序

这些问题往往导致代码可读性差、性能下降和 bug 难以定位。下面我们就来系统解决这些痛点。

Class 组件适用场景：
需要精确控制生命周期方法时
遗留代码库维护
需要继承的场景（但 React 推荐组合优于继承）
函数组件 +Hook 优势：
更简洁的代码结构
逻辑复用更灵活（自定义 Hook）
React 团队主推的未来方向

方案	适用场景	复杂度	学习曲线
原生 useState	局部状态管理	低	低
Context API	中规模应用	中	中
Redux	大型复杂应用	高	高

// useFetch.ts - 数据请求 Hook
import {useState, useEffect} from 'react';

interface FetchResult<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
}

export function useFetch<T>(url: string): FetchResult<T> {const [result, setResult] = useState<FetchResult<T>>({
    data: null,
    loading: true,
    error: null
  });

  useEffect(() => {const fetchData = async () => {
      try {const response = await fetch(url);
        const json = await response.json();
        setResult({data: json, loading: false, error: null});
      } catch (err) {setResult({ data: null, loading: false, error: err as Error});
      }
    };

    fetchData();}, [url]); // 依赖项变化时重新请求

  return result;
}

// MemoizedComponent.tsx
import React, {memo} from 'react';

interface Props {
  value: number;
  onClick: () => void;}

const MemoizedComponent: React.FC<Props> = memo(({value, onClick}) => {console.log('Render only when props change');
  return (<button onClick={onClick}>
      Current value: {value}
    </button>
  );
});

export default MemoizedComponent;

// ErrorBoundary.tsx
import React, {Component, ErrorInfo, ReactNode} from 'react';

interface State {
  hasError: boolean;
  error?: Error;
}

class ErrorBoundary extends Component<{children: ReactNode}, State> {state: State = { hasError: false};

  static getDerivedStateFromError(error: Error): State {return { hasError: true, error};
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {console.error('Error caught:', error, errorInfo);
  }

  render() {if (this.state.hasError) {
      return (
        <div>
          <h2>Something went wrong</h2>
          <p>{this.state.error?.toString()}</p>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

始终列出所有依赖项
使用 useCallback 和useMemo防止不稳定依赖
复杂依赖项时考虑提取逻辑到自定义 Hook

useEffect(() => {const controller = new AbortController();

  fetch(url, { signal: controller.signal})
    .then(response => response.json())
    .then(data => setData(data));

  return () => {controller.abort(); // 组件卸载时取消请求
  };
}, [url]);

使用 useEffect 处理仅客户端逻辑
避免初始渲染时的浏览器 API 调用
使用动态导入处理非必要组件

// useFetch.test.ts
import {renderHook} from '@testing-library/react-hooks';
import {useFetch} from './useFetch';

describe('useFetch', () => {beforeEach(() => {global.fetch = jest.fn();
  });

  it('should handle loading state', async () => {(fetch as jest.Mock).mockImplementation(() =>
      Promise.resolve({json: () => Promise.resolve({}) })
    );

    const {result, waitForNextUpdate} = renderHook(() =>
      useFetch('https://api.example.com/data')
    );

    expect(result.current.loading).toBe(true);
    await waitForNextUpdate();
    expect(result.current.loading).toBe(false);
  });
});