React 状态管理：从基础到 Context API 实战

一、引言

大家好！在这一集，我们将深入探讨 React 状态管理 这一重要话题。如果你还不熟悉状态管理，学习这些内容将大大提升你的 React 开发技能，使你能够构建更加复杂和可维护的应用程序。本教程将通过 Context API，帮助你在 React 应用中管理全局状态，进一步提升你的开发水平。

二、开发环境搭建

为了顺利跟随教程操作，确保你的开发环境已设置好。我们将使用 VS Code 和 Create React App 来创建 React 应用。运行以下命令即可创建新的 React 项目：

npx create-react-app state-management

接着，我们需要对项目进行一些清理，删除不必要的文件（如 SVG 文件、测试文件等），并保留一个空的 div 元素：

import './App.css';

function App() {
  return (
    < div className="app" > 
      {/* 组件将在这里渲染 */}
    < /div > 
  );
}

export default App;

三、创建电影列表组件

我们将创建一个 电影列表组件 来展示电影数据。首先，在 src 目录下创建一个 MovieList.js 文件，并编写以下代码：

import React from 'react';

export default function MovieList() {
  const [movies, setMovies] = React.useState([
    { id: 1, name: 'Harry Potter', price: '$10' },
    { id: 2, name: 'Game of Thrones', price: '$10' },
    { id: 3, name: 'Inception', price: '$10' }
  ]);

  return (
    < div > 
      {movies.map(movie = >  (
        < div key={movie.id} > 
           < h3 > {movie.name} < /h3 > 
           < p > {movie.price} < /p > 
         < /div > 
      ))}
     < /div > 
  );
}

然后在 App.js 中导入并使用这个组件：

import MovieList from './MovieList';

function App() {
  return (
     < div className="app" > 
       < MovieList / > 
     < /div > 
  );
}

export default App;

四、创建导航组件

接下来，我们将创建一个导航组件 Nav.js，用于显示应用的基本信息，包括电影数量：

import React from 'react';

export default function Nav({ movieCount }) {
  return (
     < div > 
       < h2 > Dev Ed < /h2 > 
       < p > Movie List: {movieCount} < /p > 
     < /div > 
  );
}

在 App.js 中使用这个导航组件：

import Nav from './Nav';

function App() {
  const [movies, setMovies] = React.useState([
    { id: 1, name: 'Harry Potter', price: '$10' },
    { id: 2, name: 'Game of Thrones', price: '$10' },
    { id: 3, name: 'Inception', price: '$10' }
  ]);

  return (
     < div className="app" > 
       < Nav movieCount={movies.length} / > 
       < MovieList movies={movies} / > 
     < /div > 
  );
}

export default App;

五、状态提升

随着应用的复杂度增加，组件内的状态管理可能会变得不够高效。我们可以采用 状态提升（State Lifting） 的方法，将状态从子组件提升到父组件，然后通过 props 传递给子组件。修改后的代码如下：

在 App.js 中：

function App() {
  const [movies, setMovies] = React.useState([
    { id: 1, name: 'Harry Potter', price: '$10' },
    { id: 2, name: 'Game of Thrones', price: '$10' },
    { id: 3, name: 'Inception', price: '$10' }
  ]);

  return (
     < div className="app" > 
       < Nav movieCount={movies.length} / > 
       < MovieList movies={movies} / > 
     < /div > 
  );
}

export default App;

在 MovieList.js 中：

import React from 'react';

export default function MovieList({ movies }) {
  return (
     < div > 
      {movies.map(movie = >  (
         < div key={movie.id} > 
           < h3 > {movie.name} < /h3 > 
           < p > {movie.price} < /p > 
         < /div > 
      ))}
     < /div > 
  );
}

六、Context API 实战

当组件树变得更深，通过 props 传递状态 的方法可能会变得繁琐。此时，我们可以使用 React Context API 来管理全局状态，使组件之间共享状态更加简洁高效。

1. 创建 Context

在 src 目录下创建一个新的文件 MovieContext.js，并输入以下代码：

import React from 'react';

const MovieContext = React.createContext();

export const MovieProvider = ({ children }) = >  {
  const [movies, setMovies] = React.useState([
    { id: 1, name: 'Harry Potter', price: '$10' },
    { id: 2, name: 'Game of Thrones', price: '$10' },
    { id: 3, name: 'Inception', price: '$10' }
  ]);

  return (
     < MovieContext.Provider value={{ movies, setMovies }} > 
      {children}
     < /MovieContext.Provider > 
  );
};

export default MovieContext;

2. 使用 Context

在 App.js 中，使用 MovieProvider 包裹整个应用：

import { MovieProvider } from './MovieContext';

function App() {
  return (
     < MovieProvider > 
       < div className="app" > 
         < Nav / > 
         < MovieList / > 
         < AddMovie / > 
       < /div > 
     < /MovieProvider > 
  );
}

export default App;

在需要使用状态的组件中（如 MovieList.js、Nav.js、AddMovie.js），使用 useContext 钩子来访问 Context 中的状态：

import React, { useContext } from 'react';
import MovieContext from './MovieContext';

export default function MovieList() {
  const { movies } = useContext(MovieContext);

  return (
     < div > 
      {movies.map(movie = >  (
         < div key={movie.id} > 
           < h3 > {movie.name} < /h3 > 
           < p > {movie.price} < /p > 
         < /div > 
      ))}
     < /div > 
  );
}

七、添加电影组件

最后，我们创建一个 AddMovie.js 组件，用于添加新的电影到电影列表中：

import React, { useState, useContext } from 'react';
import MovieContext from './MovieContext';

export default function AddMovie() {
  const [name, setName] = useState('');
  const [price, setPrice] = useState('');
  const { movies, setMovies } = useContext(MovieContext);

  const handleSubmit = (e) = >  {
    e.preventDefault();
    setMovies(prevMovies = >  [
      ...prevMovies,
      { id: prevMovies.length + 1, name, price }
    ]);
    setName('');
    setPrice('');
  };

  return (
     < form onSubmit={handleSubmit} > 
       < input
        type="text"
        value={name}
        onChange={(e) = >  setName(e.target.value)}
        placeholder="Movie name"
      / > 
       < input
        type="text"
        value={price}
        onChange={(e) = >  setPrice(e.target.value)}
        placeholder="Price"
      / > 
       < button type="submit" > Add Movie < /button > 
     < /form > 
  );
}

八、总结

通过本文的学习，你掌握了 React 状态管理 的基础知识，并学会了如何使用 React Context API 来进行全局状态管理。这种方法简化了跨多个组件共享状态的过程，非常适合中等复杂度的应用。虽然 Context API 在状态更新时可能会触发组件的重新渲染，但它的简单性和易用性使其成为许多开发者的首选方案。

原文引自YouTube视频：https://www.youtube.com/watch?v=35lXWvCuM8o