Merge pull request #28 from GuoXiCheng/dev-c

add context md & update reference md

src/.vitepress/config.mts

@@ -106,6 +106,15 @@ export default defineConfig(
                     link: '/frontend/react/ref/ref-dom'
                   }
                 ]
+              }, {
+                text: 'context',
+                link: '/frontend/react/context/index',
+                items: [
+                  {
+                    text: 'createContext',
+                    link: '/frontend/react/context/create-context'
+                  }
+                ]
               }
             ]
           }

src/frontend/react/context/create-context.md

@@ -0,0 +1,49 @@
+# createContext
+
+## 什么是 Context
+Context 是 React 中一种在组件树中共享值的方式，而无需显式地通过组件树的逐层传递 props 来传递数据。
+
+## 基本用法
+- 首先通过`createContext`方法创建一个Context对象
+- 然后通过`Context.Provider`组件提供一个共享的值
+- 最后通过`Context.Consumer`组件消费这个共享的值
+
+:::code-group
+```jsx [store/demo-context.js]
+import { createContext } from 'react';
+
+export const DemoContext = createContext({
+    item: [],
+});
+```
+```jsx [App.jsx]
+import { DemoContext } from './store/demo-context.js';
+
+function DemoA() {
+    return (
+        <>
+            <DemoB />
+        </>
+    );
+}
+
+function DemoB() {
+    return (
+        <DemoContext.Consumer>
+            {(value) => value.item.map((it) => <p key={it}>{it}</p>)}
+        </DemoContext.Consumer>
+    );
+}
+
+function App() {
+    const defaultItems = [1, 2, 3, 4, 5];
+    return (
+        <DemoContext.Provider value={{ item: defaultItems }}>
+            <DemoA />
+        </DemoContext.Provider>
+    );
+}
+
+export default App;
+```
+:::

src/frontend/react/context/index.md

@@ -0,0 +1,83 @@
+# context
+
+## Prop Drilling
+
+Prop Drilling（属性钻取）是指在多层数据传递中，顶层组件拥有的一些数据需要传递给深层的子组件，数据需要通过组件树的每一层传递，即使这些中间层不需要这些数据。
+
+## 解决方案
+
+### 直接传递props
+
+最直接的方法就是通过多个组件直接传递props，这样也许会增加代码维护的工作量，但是这种方法是最直接的，并且数据流清晰。
+
+### 组件组合
+如果有多个中间层不直接使用数据而只是传递，这通常意味着没有对组件进行抽象。
+
+对于不直接使用数据的中间层组件，可以将JSX作为children传递，这样也可以减少定义数据的组件和使用数据的组件之间的层级。
+
+::: code-group
+```jsx [直接传递 props]
+function Layout({ posts }) {
+    return (
+        <div className="layout">
+            <Posts posts={posts}></Posts>
+        </div>
+    );
+}
+
+function Posts({ posts }) {
+    return (
+        <ul>
+            {posts.map((post) => (
+                <li key={post.id}>{post.title}</li>
+            ))}
+        </ul>
+    );
+}
+
+function App() {
+    const posts = [
+        { id: 1, title: 'React' },
+        { id: 2, title: 'Vue' },
+    ];
+
+    return <Layout posts={posts}></Layout>;
+}
+
+export default App;
+```
+```jsx [组件组合]
+function Layout({ children }) {
+    return <div className="layout">{children}</div>;
+}
+
+function Posts({ posts }) {
+    return (
+        <ul>
+            {posts.map((post) => (
+                <li key={post.id}>{post.title}</li>
+            ))}
+        </ul>
+    );
+}
+
+function App() {
+    const posts = [
+        { id: 1, title: 'React' },
+        { id: 2, title: 'Vue' },
+    ];
+
+    return (
+        <Layout>
+            <Posts posts={posts} />
+        </Layout>
+    );
+}
+
+export default App;
+```
+:::
+### Context
+如果前两种方案都不适用，可以考虑使用React的Context API。
+
+Context 可以在组件树中不需要层层传递 props 的情况下，将数据传递给所需组件。

src/index.md

@@ -51,6 +51,8 @@ import MarkMap from './MarkMap.vue';
       - [ref 引用值](frontend/react/ref/ref-value)
       - [ref 操作 DOM](frontend/react/ref/ref-dom)
     - [createPortal](frontend/react/create-portal)
+    - [Context](frontend/react/context/index)
+      - [createContext](frontend/react/context/create-context)
 - 后端
   - [NodeJS](backend/nodejs/index)
     - [EventEmitter](backend/nodejs/event-emitter)

src/reference.md

@@ -2,4 +2,5 @@
 - JavaScript高级程序设计（第4版）
 - [Node.js Documentation](https://nodejs.org/docs/latest/api)
 - [v8.dev](https://v8.dev)
-- [How to code your own event emitter in Node.js: a step-by-step guide](https://www.freecodecamp.org/news/how-to-code-your-own-event-emitter-in-node-js-a-step-by-step-guide-e13b7e7908e1)
+- [How to code your own event emitter in Node.js: a step-by-step guide](https://www.freecodecamp.org/news/how-to-code-your-own-event-emitter-in-node-js-a-step-by-step-guide-e13b7e7908e1)
+- [React 中文文档](https://react.docschina.org/)