React Hook: useContext 函数

小公鸡卡哇伊呀~

已于 2023-09-26 21:34:08 修改

阅读量572

点赞数

CC 4.0 BY-SA版权

文章标签： react.js

于 2021-11-19 18:00:44 首次发布

本文链接：https://blog.csdn.net/ftell/article/details/121425487

本文介绍如何使用 React 的 Context API 来简化组件间的状态管理。通过创建自定义 Context 组件，开发者可以在组件树中轻松共享数据，避免繁琐的 props 传递。文章详细展示了 NoteApp 应用的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

使用 Context, 就不需要在组件树上一级一级地向下手动传递 props。而是变成组件、组件的子组件或者子组件的子组件，全部都可以共享数据。

典型的用法举例：

自定义Context组件：

// notes-Context.js
import React from "react";
// createContext() 典型的用法都不带参数
const NotesContext = React.createContext(); // 
export { NotesContext as default };

在最上一级组件根据需要设定要共享的内容，这里 value={{notes, dispatch}}，就相当于一个用于数据共享的 data store, 各种组件都可以访问这里的数据.

import React, { useEffect, useReducer } from "react";
import notesReducer from "../reducers/notes";
import AddNoteForm from "./AddNoteForm";
import NoteList from "./NoteList";
import NotesContext from "../context/notes-Context";

const NoteApp = () => {
  const [notes, dispatch] = useReducer(notesReducer, []);
  useEffect(() => {
    const notes = JSON.parse(localStorage.getItem("notes"));
    if (notes) {
      dispatch({ type: "POPULATE_NOTES", notes });
    }
  }, []);

  useEffect(() => {
    localStorage.setItem("notes", JSON.stringify(notes));
  }, [notes]);

  return (
    <NotesContext.Provider value={{notes, dispatch}}>
      <h1>Notes</h1>
      <NoteList />
      <AddNoteForm />
    </NotesContext.Provider>
  );
};
export { NoteApp as default };

省略 props 的逐级传递，而是直接根据需要，提取共享的数据中，当前组件所需要的内容。需要就提取，不需要就不提取：

// NoteList.js
import React, { useContext } from "react";
import Note from "./Note";
import NotesContext from "../context/notes-Context";

const NoteList = () => {
  // 只提取了自己需要的 notes，dispatch 没用到，就没有提取。
  const { notes } = useContext(NotesContext);
  return notes.map((note) => (
    <Note key={note.title} note={note} />
  ));
};
export { NoteList as default };