Merge pull request #43 from GuoXiCheng/dev-c

update context md

src/.vitepress/sidebar.yaml

@@ -40,14 +40,6 @@
         link: /frontend/react/strict-mode
       - text: createPortal
         link: /frontend/react/create-portal
-      - text: Context
-        link: /frontend/react/context/index
-        collapsed: true
-        items:
-          - text: createContext
-            link: /frontend/react/context/create-context
-          - text: Reducer and Context
-            link: /frontend/react/context/reducer-and-context
       - text: memo
         link: /frontend/react/memo
       - text: 处理表单
@@ -90,6 +82,10 @@
                 link: /frontend/react/core-concepts/state-management/props
               - text: 状态提升
                 link: /frontend/react/core-concepts/state-management/lifting-state-up
+              - text: Context
+                link: /frontend/react/core-concepts/state-management/context
+              - text: Reducer 和 Context
+                link: /frontend/react/core-concepts/state-management/reducer-and-context
       - text: Hook API
         items:
           - text: useRef

src/frontend/react/core-concepts/state-management/context.md

@@ -0,0 +1,29 @@
+# Context
+
+::: details 在使用 Context 之前可以考虑的替代方案
+
+::: code-group
+
+<<< @/../projects/react-sandbox/src/pages/state-demo/ContextReplaceWithProps.tsx [方案一：从传递 Props 开始]
+
+<<< @/../projects/react-sandbox/src/pages/state-demo/ContextReplaceWithChildren.tsx [方案二：抽象组件并 将 JSX 作为 children 传递 给它们]
+
+:::
+
+## 什么是 Context
+
+Context 是 React 中提供的可以在组件树中直接传递数据而无需逐层传递 Props 的功能。
+
+## 基本用法
+
+-   首先通过`createContext`方法**创建**一个 Context 对象
+-   然后通过`Context.Provider`组件**提供**一个共享的值
+-   最后通过`Context.Consumer`组件**消费**这个共享的值
+
+:::code-group
+<<< @/../projects/react-sandbox/src/pages/state-demo/ContextTheme.ts[创建]
+
+<<< @/../projects/react-sandbox/src/pages/state-demo/ContextBasicProvider.tsx[提供]
+
+<<< @/../projects/react-sandbox/src/pages/state-demo/ContextBasicConsumer.tsx[消费]
+:::

src/frontend/react/core-concepts/state-management/reducer-and-context.md

@@ -0,0 +1,26 @@
+# Reducer 和 Context
+
+## 使用 Reducer 和 Context 拓展你的应用
+
+Reducer 可以用来整合组件的状态更新逻辑。
+
+Context 可以用来将数据深入传递给其他组件。
+
+结合使用 Reducer 和 Context，可以共同管理一个复杂页面的状态。
+
+## 基本用法
+
+-   首先创建一个 Context 对象用于共享值。
+-   然后创建一个 Reducer 函数用于处理状态更新逻辑。
+-   接着创建一个 Provider 组件，将 Context 对象和 Reducer 函数传递给 Provider 组件。
+-   最后在需要使用共享值的组件中使用 `useContext()` 消费共享值。
+
+::: code-group
+<<< @/../projects/react-sandbox/src/pages/state-demo/CounterContext.ts [创建 Context 对象]
+
+<<< @/../projects/react-sandbox/src/pages/state-demo/CounterReducer.ts [创建 Reducer 函数]
+
+<<< @/../projects/react-sandbox/src/pages/state-demo/CounterProvider.tsx [创建 Provider 组件]
+
+<<< @/../projects/react-sandbox/src/pages/state-demo/CounterWithReducerContext.tsx [消费共享值]
+:::

src/index.md

@@ -29,9 +29,6 @@ import MarkMap from './MarkMap.vue';
       - [动态组件标识符](frontend/react/dynamic-component-identifier)
       - [React 严格模式](frontend/react/strict-mode)
       - [createPortal](frontend/react/create-portal)
-      - [Context](frontend/react/context/index)
-        - [createContext](frontend/react/context/create-context)
-        - [Reducer and Context](frontend/react/context/reducer-and-context)
       - [memo](frontend/react/memo)
       - 处理表单
         - [受控组件](frontend/react/form/controlled-component)
@@ -52,6 +49,8 @@ import MarkMap from './MarkMap.vue';
           - [state](frontend/react/core-concepts/state-management/state)
           - [props](frontend/react/core-concepts/state-management/props)
           - [状态提升](frontend/react/core-concepts/state-management/lifting-state-up)
+          - [Context](frontend/react/core-concepts/state-management/context)
+          - [Reducer 和 Context](frontend/react/core-concepts/state-management/reducer-and-context)
       - Hook API
         - [useRef](frontend/react/hook-api/use-ref)
         - [useImperativeHandle](frontend/react/hook-api/use-imperative-handle)