React 初体验 2：深入核心概念与实践

React 组件化开发

React 的核心思想是组件化。每个组件是一个独立的模块，包含自己的状态（state）和属性（props）。组件可以是函数式或类式，现代 React 推荐使用函数式组件结合 Hooks。

函数式组件示例：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件示例：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Hooks 的使用

Hooks 是 React 16.8 引入的重大特性，允许在函数组件中使用状态和其他 React 特性。常用 Hooks 包括 useState 和 useEffect。

状态管理示例：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

副作用处理示例：

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空数组表示仅在组件挂载时执行
}

虚拟 DOM 与性能优化

React 使用虚拟 DOM 来高效更新界面。当组件状态变化时，React 会创建一个新的虚拟 DOM 树，与旧的进行比较（diffing），然后仅更新实际变化的部分。

优化技巧：

• 使用 React.memo 缓存函数组件
• 避免在渲染方法中进行昂贵计算
• 合理使用 useCallback 和 useMemo

状态管理进阶

对于复杂应用，可能需要使用状态管理库如 Redux 或 Context API。Context API 是 React 内置的解决方案，适合中小型应用。

Context 示例：

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>I am styled by theme context!</button>;
}

React Router 导航

单页应用(SPA)通常使用 React Router 管理页面导航。最新版本(v6)提供了更简洁的 API。

路由配置示例：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

测试 React 应用

React 应用可以结合 Jest 和 Testing Library 进行测试。测试应关注组件行为而非实现细节。

测试示例：

import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import Greeting from './Greeting';

test('renders greeting message', () => {
  render(<Greeting name="World" />);
  expect(screen.getByText(/hello, world/i)).toBeInTheDocument();
});

构建与部署

现代 React 项目通常使用 Create React App 或 Vite 作为构建工具。部署可以选择静态托管服务如 Vercel 或 Netlify。

构建命令：

npm run build

常见问题与解决方案

• 状态更新不同步：确保使用函数式更新当新状态依赖旧状态
• 无限渲染循环：检查 useEffect 依赖数组
• 性能问题：使用 React DevTools 分析组件更新

React 生态丰富且不断进化，保持学习和实践是掌握 React 的最佳途径。