React 学习指南 - 第七天

1. React Router 深入理解

今天我们将深入学习 React Router，它是 React 中最常用的路由库。React Router 允许你在单页应用中实现不同视图之间的导航。

1.1 React Router 基本用法

react-router-dom 提供了一些核心组件，如 BrowserRouter、Route、Link 和 Switch，来帮助你实现不同的路由功能。

• BrowserRouter：用于包装整个应用，提供路由功能。

• Route：定义一个路由，它会根据 URL 的变化渲染指定的组件。

• Link：用于导航到其他页面。

• Switch：渲染第一个匹配的路由，确保只有一个路由渲染。

import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

• BrowserRouter 用于包裹应用。

• Route 会根据 URL 的路径渲染对应的组件。

• Link 用于跳转到不同的路由。

• Switch 确保只有一个路由被渲染。

1.2 动态路由和参数传递

你可以通过路由参数动态渲染不同的内容。Route 支持通过 :param 的方式来定义参数。

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function UserProfile({ match }) {
  return <h2>User Profile for ID: {match.params.id}</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/user/123">User 123</Link>
          </li>
          <li>
            <Link to="/user/456">User 456</Link>
          </li>
        </ul>
      </nav>

      <Route path="/user/:id" component={UserProfile} />
    </Router>
  );
}

export default App;

• match.params.id 获取 URL 中的动态参数。

• 当用户点击不同的链接时，UserProfile 会根据不同的 id 渲染不同的内容。

1.3 嵌套路由

React Router 支持嵌套路由，这允许你在一个页面中渲染多个路由。

import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <ul>
        <li>
          <Link to="/dashboard/overview">Overview</Link>
        </li>
        <li>
          <Link to="/dashboard/settings">Settings</Link>
        </li>
      </ul>

      <Switch>
        <Route path="/dashboard/overview" component={Overview} />
        <Route path="/dashboard/settings" component={Settings} />
      </Switch>
    </div>
  );
}

function Overview() {
  return <h3>Overview Page</h3>;
}

function Settings() {
  return <h3>Settings Page</h3>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/dashboard">Go to Dashboard</Link>
      </nav>

      <Route path="/dashboard" component={Dashboard} />
    </Router>
  );
}

export default App;

• Dashboard 组件下定义了两个子路由：Overview 和 Settings。

• 嵌套路由使得不同的子页面能够在父组件中动态渲染。

2. React 状态管理：Context API vs Redux

React 中的状态管理可以选择多种方式，最常用的两种是 Context API 和 Redux。今天我们将比较这两者，并展示如何在应用中使用它们。

2.1 Context API

Context API 是 React 内置的状态管理机制，适用于应用中的简单全局状态共享。它通过 Provider 和 Consumer 组件让我们在应用的不同部分共享数据。

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

const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Child />
    </ThemeContext.Provider>
  );
}

function Child() {
  return (
    <ThemeContext.Consumer>
      {({ theme, setTheme }) => (
        <div>
          <p>Current Theme: {theme}</p>
          <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
            Toggle Theme
          </button>
        </div>
      )}
    </ThemeContext.Consumer>
  );
}

export default App;

• ThemeContext 用于提供和消费主题数据。

• ThemeContext.Provider 用于包裹需要共享数据的部分。

• ThemeContext.Consumer 用于在子组件中获取共享的状态。

2.2 Redux

Redux 是一个功能更强大的状态管理库，适用于大规模应用的复杂状态管理。Redux 的核心思想是将所有的应用状态存储在一个全局的 store 中，组件通过 dispatch 派发 actions 来更新状态。

import React from 'react';
import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';

// Action
const toggleTheme = () => ({ type: 'TOGGLE_THEME' });

// Reducer
const themeReducer = (state = 'light', action) => {
  switch (action.type) {
    case 'TOGGLE_THEME':
      return state === 'light' ? 'dark' : 'light';
    default:
      return state;
  }
};

// Store
const store = createStore(themeReducer);

function App() {
  return (
    <Provider store={store}>
      <Child />
    </Provider>
  );
}

function Child() {
  const theme = useSelector(state => state);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Current Theme: {theme}</p>
      <button onClick={() => dispatch(toggleTheme())}>Toggle Theme</button>
    </div>
  );
}

export default App;

• 在 Redux 中，应用的状态存储在一个单独的 store 中。

• 使用 useSelector 来获取当前状态，使用 useDispatch 来派发 actions 更新状态。

2.3 Context API vs Redux

• Context API：适合用于小型应用和需要跨组件传递少量状态的场景。它的实现简单，但性能上在频繁更新状态时可能有所不足。

• Redux：适用于大型应用，特别是当应用的状态变得复杂时。Redux 提供了更强大的功能，如中间件、持久化、调试等，但需要更多的学习和设置。

3. React 性能优化：React.memo 和 useMemo

在大型应用中，性能优化是至关重要的。React 提供了多个工具来帮助你优化渲染过程，避免不必要的重新渲染。

3.1 React.memo

React.memo 是一个高阶组件，它可以避免函数组件在 props 没有变化时重新渲染。

const MemoizedComponent = React.memo(function Component({ name }) {
  console.log('Rendering...');
  return <div>{name}</div>;
});

function App() {
  const [name, setName] = useState('Alice');

  return (
    <div>
      <MemoizedComponent name={name} />
      <button onClick={() => setName('Bob')}>Change Name</button>
    </div>
  );
}

• 只有当 name 改变时，MemoizedComponent 才会重新渲染。否则，React 会跳过渲染。

3.2 useMemo

useMemo 是一个 Hook，它可以用于缓存计算结果，避免不必要的计算。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 只有在 a 或 b 改变时，computeExpensiveValue 才会重新执行。

4. 小结

• React Router：今天你学会了如何使用 React Router 来实现页面间的导航，包括动态路由、嵌套路由等。

• 状态管理：你了解了 Context API 和 Redux 的差异，选择合适的状态管理工具根据应用规模和需求进行开发。

• 性能优化：通过使用 React.memo 和 useMemo，你可以避免不必要的重新渲染和计算，提升应用性能。

今天的学习帮助你深入理解了 React Router、状态管理和性能优化等核心概念，你可以在开发中灵活使用这些工具，构建更加高效和可维护的 React 应用。