npx create-react-app state-management

接著，我們需要對項目進行一些清理，刪除不必要的文件（如 SVG 文件、測試文件等），并保留一個空的 div 元素：

import './App.css';

function App() {
  return (
    < div className="app" > 
      {/* 組件將在這里渲染 */}
    < /div > 
  );
}

export default App;

三、創(chuàng)建電影列表組件

我們將創(chuàng)建一個 電影列表組件 來展示電影數(shù)據(jù)。首先，在 src 目錄下創(chuàng)建一個 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;

四、創(chuàng)建導航組件

接下來，我們將創(chuàng)建一個導航組件 Nav.js，用于顯示應用的基本信息，包括電影數(shù)量：

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;

五、狀態(tài)提升

隨著應用的復雜度增加，組件內(nèi)的狀態(tài)管理可能會變得不夠高效。我們可以采用 狀態(tài)提升（State Lifting） 的方法，將狀態(tài)從子組件提升到父組件，然后通過 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 實戰(zhàn)

當組件樹變得更深，通過 props 傳遞狀態(tài) 的方法可能會變得繁瑣。此時，我們可以使用 React Context API 來管理全局狀態(tài)，使組件之間共享狀態(tài)更加簡潔高效。

1. 創(chuàng)建 Context

在 src 目錄下創(chuàng)建一個新的文件 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;

在需要使用狀態(tài)的組件中（如 MovieList.js、Nav.js、AddMovie.js），使用 useContext 鉤子來訪問 Context 中的狀態(tài)：

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 > 
  );
}

七、添加電影組件

最后，我們創(chuàng)建一個 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 狀態(tài)管理 的基礎知識，并學會了如何使用 React Context API 來進行全局狀態(tài)管理。這種方法簡化了跨多個組件共享狀態(tài)的過程，非常適合中等復雜度的應用。雖然 Context API 在狀態(tài)更新時可能會觸發(fā)組件的重新渲染，但它的簡單性和易用性使其成為許多開發(fā)者的首選方案。

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

#你可能也喜歡這些API文章!

DeepSeek R1 × 飛書多維表格賦能教育領域

使用NestJS和Prisma構建REST API：身份驗證

一步步教你進行 Python REST API 身份驗證

微信API接口調(diào)用憑證+Access token泄露

REST API 基礎：定義、示例及使用方法

HTTP API vs WebSocket API：選擇哪個來實現(xiàn)實時通信？

深入了解 Gateway API 的推理擴展