React 学习指南 - 第三天

1. React 状态管理

随着应用程序的增长，多个组件可能需要共享状态。React 提供了多种方式来处理跨组件的状态管理。

1.1 使用 Context API

Context 是 React 提供的一个功能，它允许你通过组件树传递数据，而不需要手动通过每一层组件的 props。

例如，创建一个全局的 ThemeContext 来存储当前主题：

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

// 创建 Context
const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

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

function ThemedComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>The current theme is {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

function App() {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;

在这个例子中：

• ThemeContext 用来共享主题状态。

• ThemeProvider 组件将状态提供给子组件。

• useContext(ThemeContext) 用来消费这个状态。

1.2 使用 Redux 进行更复杂的状态管理

如果应用变得非常复杂，或者需要跨越很多组件传递数据，Redux 是一种流行的状态管理解决方案。

React 和 Redux 通常结合使用，React-Redux 库让你可以方便地将 Redux store 连接到 React 组件。

npm install redux react-redux

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

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

// 创建 Redux store
const store = createStore(themeReducer);

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

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

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>The current theme is {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

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

export default App;

这里，使用 Redux 来管理主题状态：

• createStore 创建一个 Redux store，themeReducer 负责处理主题状态的变化。

• useDispatch 和 useSelector 是 React-Redux 提供的钩子，用来在组件中访问 Redux store 和发送 actions。

2. React Router

当你构建一个多页面应用时，React Router 是一个常用的库，用于在 React 中实现路由。

安装：

npm install react-router-dom

基本用法：

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

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

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

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

• BrowserRouter 是路由的容器。

• Route 定义了哪些路径对应哪些组件。

• Link 用来创建导航链接。

React Router 允许你在单页面应用中模拟多页面跳转，保持页面的状态和性能。

3. React 性能优化

React 提供了几种方法来优化组件的性能，减少不必要的渲染。

3.1 React.memo

React.memo 是一个高阶组件，可以缓存组件的输出，只有当组件的 props 发生变化时，才会重新渲染。

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendering', name);
  return <p>Hello, {name}</p>;
});

function App() {
  return <MyComponent name="John" />;
}

3.2 useMemo 和 useCallback

useMemo 和 useCallback 可以避免不必要的计算和函数重新创建。

• useMemo 缓存计算结果，直到依赖项发生变化。

• useCallback 缓存函数引用，避免每次渲染都重新创建函数。

import React, { useState, useMemo, useCallback } from 'react';

function ExpensiveComponent({ count }) {
  const expensiveCalculation = useMemo(() => {
    console.log('Calculating...');
    return count * 2;
  }, [count]);

  return <p>Calculated value: {expensiveCalculation}</p>;
}

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

  const handleClick = useCallback(() => setCount(count + 1), [count]);

  return (
    <div>
      <button onClick={handleClick}>Increase Count</button>
      <ExpensiveComponent count={count} />
    </div>
  );
}

• useMemo 用来优化一些复杂的计算。

• useCallback 用来缓存 handleClick 函数，避免在每次渲染时都创建新函数。

4. 小结

• 状态管理：你可以使用 Context API 或 Redux 来管理跨组件共享的状态。Context API 适用于简单的共享状态，而 Redux 适用于复杂的应用。

• React Router：通过 React Router，你可以构建多页面的单页面应用。

• 性能优化：使用 React.memo、useMemo 和 useCallback 来减少不必要的渲染和计算，提高应用的性能。

今天你深入了解了 React 状态管理的两种常见方式、React Router 用法和性能优化技巧。随着你的应用越来越复杂，理解这些工具和方法将帮助你构建更高效、更易维护的应用。