From 39c3a9b162845b449877936b8e3024a798ac698a Mon Sep 17 00:00:00 2001
From: Jiarong <alienover.l.d@gmail.com>
Date: Wed, 3 Nov 2021 23:07:59 +0800
Subject: [PATCH 01/27] docs(cn): importing and exporting components

---
 .../importing-and-exporting-components.md     | 140 +++++++++---------
 1 file changed, 71 insertions(+), 69 deletions(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index c364354c5a..9ea0c4e210 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -1,26 +1,28 @@
 ---
-title: Importing and Exporting Components
+title: 组件的导入和导出
+translators:
+  - Alienover
 ---
 
 <Intro>
 
-The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places.
+组件的神奇之处在于它们的可重用性：你可以创建一个由其他组件构成的组件。但当你嵌套了越来越多的组件，这时则需要开始要将它们拆分成不同的文件。这样可以使得你更容易去找到这些文件，并且在其他更多的地方复用这些组件。
 
 </Intro>
 
 <YouWillLearn>
 
-* What a root component file is
-* How to import and export a component
-* When to use default and named imports and exports
-* How to import and export multiple components from one file
-* How to split components into multiple files
+* 何为根组件
+* 如何导入和导出一个组件
+* 何时使用默认和命名导入导出
+* 如何在一个文件里导入和导出多个组件
+* 如何将组件拆分成多个文件
 
 </YouWillLearn>
 
-## The root component file
+## 根组件文件 {#the-root-component-file}
 
-In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it:
+在 [你的第一个组件](/learn/your-first-component) 中，你创建了一个 `Profile` 组件，并且渲染在 `Gallery` 组件里。
 
 <Sandpack>
 
@@ -37,7 +39,7 @@ function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>了不起的科学家们</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -52,17 +54,17 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-These currently live in a **root component file,** named `App.js` in this example. In [Create React App](https://create-react-app.dev/), your app lives in `src/App.js`. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page.
+在这个例子中，这些组件目前都定义在一个名为 `App.js` 的 **根组件文件** 中，在 [Create React App](https://create-react-app.dev/) 中，你的应用定义在 `src/App.js`。但取决于你的配置，你的根组件可能会在其他文件里。如果你使用的框架是基于文件进行路由的，如 Next.js，那你每个页面的根组件都会不一样。
 
-## Exporting and importing a component
+## 导出和导入一个组件 {#exporting-and-importing-a-component}
 
-What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps:
+假如将来你想在首页加入一个关于科学书籍的列表？或者将所有的资料信息都放到其他地方？这时将 `Gallery` 和 `Profile` 组件移出根组件文件会更合理点。这会让这些组件更加模块化，并且可在其他文件里重复使用。你可以根据以下三个步骤去拆分你的组件：
 
-1. **Make** a new JS file to put the components in.
-2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports).
-3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports).
+1. **创建** 一个新的 JS 文件来放这个组件。
+2. **导出** 该文件里的函数组件（可以使用 [默认导出](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) 或 [命名导出](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports)）
+3. **导入** 到你将会用到该组件的文件里 (可以根据相应的导出方式使用 [默认导入](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) 或 [命名导入](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module)).
 
-Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`:
+这里 `Profile` 和 `Gallery` 均从 `App.js` 移到一个名为 `Gallery.js` 的文件了。现在你可以在 `App.js` 里，从 `Gallery.js` 导入 `Gallery` 组件:
 
 <Sandpack>
 
@@ -89,7 +91,7 @@ function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>了不起的科学家们</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -104,54 +106,54 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Notice how this example is broken down into two component files now:
+这个例子里需要注意的是，如何将组件拆分成两个文件：
 
 1. `Gallery.js`:
-     - Defines the `Profile` component which is only used within the same file and is not exported.
-     - Exports the `Gallery` component as a **default export**.
+     - 定义了 `Profile` 组件，它仅在同一个文件内使用，没有被导出。
+     - 用 **默认导出** 的方式，将 `Gallery` 组件导出
 2. `App.js`:
-     - Imports `Gallery` as a **default import** from `Gallery.js`.
-     - Exports the root `App` component as a **default export**.
+     - 用 **默认导入** 的方式，将 `Gallery` 组件从 `Gallery.js` 里导入。
+     - 用 **默认导出** 的方式，将根组件 `App` 导出。
 
 
 <Note>
 
-You may encounter files that leave off the `.js` file extension like so:
+你可能会遇到一些文件是没有 `.js` 文件后缀的，如下所示：
 
 ```js 
 import Gallery from './Gallery';
 ```
 
-Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work.
+不管是 `'Gallery.js'` 还是 `'.Gallery'`，在 React 里都能正常使用，只是前者更符合 [原生 ES 模块](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules)。
 
 </Note>
 
-<DeepDive title="Default vs Named Exports">
+<DeepDive title="默认导出 vs 命名导出">
 
-There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.**
+这是 JavaScript 里两个主要用来导出值的方法：默认导出和命名导出。到目前为止，我们的例子里仅仅是用到了默认导出。但你可以在一个文件里，使用其中一种或两种都使用。**一个文件里有且仅有一个 _默认_ 导出，但是可以有任意多个 _命名_ 导出。**
 
 ![Default and named exports](/images/docs/illustrations/i_import-export.svg)
 
-How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track:
+你组件的导出方式决定了你导入它的方式。当你用默认导入的方法去导入一个命名导出的组件，就会出现报错。你可以通过下面的表格来更好地理解：
 
-| Syntax           | Export statement                           | Import statement                          |
-| -----------      | -----------                                | -----------                               |
-| Default  | `export default function Button() {}` | `import Button from './button.js';`     |
-| Named    | `export function Button() {}`         | `import { Button } from './button.js';` |
+| 语法           | 导出语句                           | 导入语句                          |
+| -----------    | -----------                        | -----------                       |
+| 默认  | `export default function Button() {}` | `import Button from './button.js';`     |
+| 命名  | `export function Button() {}`         | `import { Button } from './button.js';` |
 
-When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports!
+当你用默认导入时，你可以在 `import` 语句后面起任何的名字。比如 `import Banana from './button.js'`，这样你还是能得到跟默认导出一样的内容。相反，对于命名导入，导入和导出的名字必须一致。这也是为什么叫 _命名_ 导入的原因！
 
-**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder.
+**通常文件里只有一个组件时，人们会使用默认导出，而当文件里有多个组件或值需要导出时，则使用命名导出。** 不管你使用哪种方式，请记得给你的组件和相应的文件起一个有意义的名字。我们不建议创建没有命名的组件，比如 `export default () => {}`，因为这样会使得调试变得更加困难。
 
 </DeepDive>
 
-## Exporting and importing multiple components from the same file
+## 从一个文件里导出和导入多个组件 {#exporting-and-importing-multiple-components-from-the-same-file}
 
-What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!**
+假如你只想展示一个 `Profile` 而不展示整个图集呢？你也可以导出 `Profile` 组件。但 `Gallery.js` 里已经有一个 *默认* 导出了，你不能定义 _两个_ 默认导出。你可以在一个新文件里用默认导出，或者将 `Profile` 用 *命名* 导出。**一个文件里，有且仅有一个默认导出，但可以有多个命名导出！**
 
-> To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. It's a matter of preference. Do what works best for you!
+> 为了减少在默认导出和命名导出之间的混淆，一些团队会选择只使用一种风格（默认或者命名），或者禁止在单个文件内混合使用。这因人而异，选择最适合你的即可！
 
-First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword):
+首先，用命名导出的方法从 `Gallery.js` **导出** `Profile` 组件（没有 `default` 关键字）：
 
 ```js
 export function Profile() {
@@ -159,13 +161,13 @@ export function Profile() {
 }
 ```
 
-Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces):
+然后，用命名导入的方法从 `Gallery.js` **导入** `Profile` 组件（用大括号）:
 
 ```js
 import { Profile } from './Gallery.js';
 ```
 
-Finally, **render** `<Profile />` from the `App` component:
+最后，在 `App` 组件里 **渲染** `<Profile />`：
 
 ```js
 export default function App() {
@@ -173,7 +175,7 @@ export default function App() {
 }
 ```
 
-Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `<Profile />` to `<Gallery />` and back in this example:
+现在，`Gallery.js` 里两个导出：一个是默认导出的 `Gallery`，和一个命名导出的 `Profile`。`App.js` 里都导入了这两个组件。尝试将 `<Profile />` 改成 `<Gallery />`，然后回到这个例子里：
 
 <Sandpack>
 
@@ -201,7 +203,7 @@ export function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>了不起的科学家们</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -216,24 +218,24 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-Now you're using a mix of default and named exports:
+现在你正在混合使用默认导出和命名导出：
 
 * `Gallery.js`:
-  - Exports the `Profile` component as a **named export called `Profile`**.
-  - Exports the `Gallery` component as a **default export**.
+  - 用 **命名导出** 的方式，将 `Profile` 组件导出，并取名为 `Profile`。
+  - 用 **默认导出** 的方式，将 `Gallery` 组件导出。
 * `App.js`:
-  - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`.
-  - Imports `Gallery` as a **default import** from `Gallery.js`.
-  - Exports the root `App` component as a **default export**.
+  - 用 **命名导入** 的方式，从 `Gallery.js` 导入 `Profile` 组件，并取名为 `Profile`。
+  - 用 **默认导入** 的方式，从 `Gallery.js` 导入 `Gallery` 组件。
+  - 用 **默认导出** 的方式，将根组件 `App` 导出。
 
 <Recap>
 
-On this page you learned:
+在这个页面里，你学到了：
 
-* What a root component file is
-* How to import and export a component
-* When and how to use default and named imports and exports
-* How to export multiple components from the same file
+* 何为根组件
+* 如何导入和导出一个组件
+* 何时和如何使用默认和命名导入导出
+* 如何在一个文件里导出多个组件
 
 </Recap>
 
@@ -241,22 +243,22 @@ On this page you learned:
 
 <Challenges>
 
-### Split the components further
+### 进一步拆分组件
 
-Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing.
+现在，`Gallery.js` 同时导出了 `Profile` 和 `Gallery`，这会让人感到有点混淆。
 
-Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `<Profile />` and `<Gallery />` one after another.
+尝试将 `Profile` 组件移动到一个新的文件 `Profile.js`，然后更新 `App` 组件，依次渲染 `<Profile />` 和 `<Gallery />` 。
 
-You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above:
+你也许会使用默认导出或者命名导出的方式来导出 `Profile` 组件，但请记住在 `App.js` 和 `Gallery.js` 里使用相应的导入语句！你可以参考下面的表格：
 
-| Syntax           | Export statement                           | Import statement                          |
-| -----------      | -----------                                | -----------                               |
-| Default  | `export default function Button() {}` | `import Button from './button.js';`     |
-| Named    | `export function Button() {}`         | `import { Button } from './button.js';` |
+| 语法           | 导出语句                           | 导入语句                          |
+| -----------    | -----------                        | -----------                       |
+| 默认  | `export default function Button() {}` | `import Button from './button.js';`     |
+| 命名  | `export function Button() {}`         | `import { Button } from './button.js';` |
 
 <Hint>
 
-Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too?
+不要忘记在调用它们的地方导入你的组件。`Gallery` 里不也调用了 `Profile` 吗？
 
 </Hint>
 
@@ -289,7 +291,7 @@ export function Profile() {
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>了不起的科学家们</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -307,11 +309,11 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-After you get it working with one kind of exports, make it work with the other kind.
+在你使用其中一种导出方式完成以上问题后，请尝试使用另一种导出方式实现。
 
 <Solution>
 
-This is the solution with named exports:
+这是用了命名导出的解决方案：
 
 <Sandpack>
 
@@ -335,7 +337,7 @@ import { Profile } from './Profile.js';
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>了不起的科学家们</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -361,7 +363,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-This is the solution with default exports:
+这是用了默认导出的解决方案：
 
 <Sandpack>
 
@@ -385,7 +387,7 @@ import Profile from './Profile.js';
 export default function Gallery() {
   return (
     <section>
-      <h1>Amazing scientists</h1>
+      <h1>了不起的科学家们</h1>
       <Profile />
       <Profile />
       <Profile />
@@ -413,4 +415,4 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Solution>
 
-</Challenges>
\ No newline at end of file
+</Challenges>

From 7e001c47fae7b18ddea6c02d6f2443e056f82afd Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 21 Nov 2021 22:57:17 +0800
Subject: [PATCH 02/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index dc107f7ff6..ae80939564 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -1,5 +1,5 @@
 ---
-title: 组件的导入和导出
+title: 组件的导入与导出
 translators:
   - Alienover
 ---

From 52eedae0544ef76d6483d77fbd3bf5e3e29bad36 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 21 Nov 2021 22:58:47 +0800
Subject: [PATCH 03/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index ae80939564..92ede363f7 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -6,7 +6,7 @@ translators:
 
 <Intro>
 
-组件的神奇之处在于它们的可重用性：你可以创建一个由其他组件构成的组件。但当你嵌套了越来越多的组件，这时则需要开始要将它们拆分成不同的文件。这样可以使得你更容易去找到这些文件，并且在其他更多的地方复用这些组件。
+组件的神奇之处在于它们的可重用性：你可以创建一个由其他组件构成的组件。但当你嵌套了越来越多的组件时，则需要将它们拆分成不同的文件。这样可以使得查找文件更加容易，并且能在更多地方复用这些组件。
 
 </Intro>
 

From b299f4823d8e27fa29be86d46dc7624d89b91bca Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 21 Nov 2021 22:58:59 +0800
Subject: [PATCH 04/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 92ede363f7..5c1bb084c7 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -15,7 +15,7 @@ translators:
 * 何为根组件
 * 如何导入和导出一个组件
 * 何时使用默认和命名导入导出
-* 如何在一个文件里导入和导出多个组件
+* 如何在一个文件中导入导出多个组件
 * 如何将组件拆分成多个文件
 
 </YouWillLearn>

From 0baf081be3099e57c3d67d9f273faedffcbd4ea5 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 28 Nov 2021 23:50:47 +0800
Subject: [PATCH 05/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 5c1bb084c7..40ddca3184 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -54,7 +54,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-在这个例子中，这些组件目前都定义在一个名为 `App.js` 的 **根组件文件** 中，在 [Create React App](https://create-react-app.dev/) 中，你的应用定义在 `src/App.js`。但取决于你的配置，你的根组件可能会在其他文件里。如果你使用的框架是基于文件进行路由的，如 Next.js，那你每个页面的根组件都会不一样。
+在此示例中，所有组件目前都定义在**根组件** `App.js` 文件中，在 [Create React App](https://create-react-app.dev/) 中，你的应用应在 `src/App.js` 文件中定义。具体还需根据项目配置决定，有些根组件可能会声明在其他文件中。如果你使用的框架基于文件进行路由，如 Next.js，那你每个页面的根组件都会不一样。
 
 ## 导出和导入一个组件 {/*exporting-and-importing-a-component*/}
 

From 63589aa0741f6d410642c3096b63ea6dfea68d4e Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 28 Nov 2021 23:52:14 +0800
Subject: [PATCH 06/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 40ddca3184..e45a81b972 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -58,7 +58,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 ## 导出和导入一个组件 {/*exporting-and-importing-a-component*/}
 
-假如将来你想在首页加入一个关于科学书籍的列表？或者将所有的资料信息都放到其他地方？这时将 `Gallery` 和 `Profile` 组件移出根组件文件会更合理点。这会让这些组件更加模块化，并且可在其他文件里重复使用。你可以根据以下三个步骤去拆分你的组件：
+如果将来需要在首页添加关于科学书籍的列表，亦或者需要将所有的资料信息移动到其他文件。这时将 `Gallery` 组件和 `Profile` 组件移出根组件文件会更加合理。这会使组件更加模块化，并且可在其他文件中复用。你可以根据以下三个步骤对组件进行拆分：
 
 1. **创建** 一个新的 JS 文件来放这个组件。
 2. **导出** 该文件里的函数组件（可以使用 [默认导出](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) 或 [命名导出](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports)）

From e249abd82ec7afc3c45866d7edf9ed0735443531 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 28 Nov 2021 23:52:28 +0800
Subject: [PATCH 07/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index e45a81b972..9fc0217183 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -60,7 +60,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 如果将来需要在首页添加关于科学书籍的列表，亦或者需要将所有的资料信息移动到其他文件。这时将 `Gallery` 组件和 `Profile` 组件移出根组件文件会更加合理。这会使组件更加模块化，并且可在其他文件中复用。你可以根据以下三个步骤对组件进行拆分：
 
-1. **创建** 一个新的 JS 文件来放这个组件。
+1. **创建** 一个新的 JS 文件来存放该组件。
 2. **导出** 该文件里的函数组件（可以使用 [默认导出](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) 或 [命名导出](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports)）
 3. **导入** 到你将会用到该组件的文件里 (可以根据相应的导出方式使用 [默认导入](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) 或 [命名导入](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module)).
 

From 94272f39f7c3e72ffd202c76c48ebdf20c279e05 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 28 Nov 2021 23:53:39 +0800
Subject: [PATCH 08/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 9fc0217183..914c330d10 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -61,7 +61,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 如果将来需要在首页添加关于科学书籍的列表，亦或者需要将所有的资料信息移动到其他文件。这时将 `Gallery` 组件和 `Profile` 组件移出根组件文件会更加合理。这会使组件更加模块化，并且可在其他文件中复用。你可以根据以下三个步骤对组件进行拆分：
 
 1. **创建** 一个新的 JS 文件来存放该组件。
-2. **导出** 该文件里的函数组件（可以使用 [默认导出](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) 或 [命名导出](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports)）
+2. **导出** 该文件中的函数组件（可以使用 [默认导出](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) 或 [具名导出](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports)）
 3. **导入** 到你将会用到该组件的文件里 (可以根据相应的导出方式使用 [默认导入](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) 或 [命名导入](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module)).
 
 这里 `Profile` 和 `Gallery` 均从 `App.js` 移到一个名为 `Gallery.js` 的文件了。现在你可以在 `App.js` 里，从 `Gallery.js` 导入 `Gallery` 组件:

From 71e43dbdaae356a9ed4b86e0396799864b2f1aba Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 28 Nov 2021 23:54:12 +0800
Subject: [PATCH 09/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 914c330d10..db4073a903 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -62,7 +62,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 1. **创建** 一个新的 JS 文件来存放该组件。
 2. **导出** 该文件中的函数组件（可以使用 [默认导出](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) 或 [具名导出](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports)）
-3. **导入** 到你将会用到该组件的文件里 (可以根据相应的导出方式使用 [默认导入](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) 或 [命名导入](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module)).
+3. 在需要使用该组件的文件中 **导入**（可以根据相应的导出方式使用 [默认导入](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) 或 [具名导入](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module)）。
 
 这里 `Profile` 和 `Gallery` 均从 `App.js` 移到一个名为 `Gallery.js` 的文件了。现在你可以在 `App.js` 里，从 `Gallery.js` 导入 `Gallery` 组件:
 

From 9246cd017b47898c75e5cc740052fbe78a9a3335 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 28 Nov 2021 23:54:41 +0800
Subject: [PATCH 10/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index db4073a903..2495b9eac8 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -64,7 +64,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 2. **导出** 该文件中的函数组件（可以使用 [默认导出](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) 或 [具名导出](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports)）
 3. 在需要使用该组件的文件中 **导入**（可以根据相应的导出方式使用 [默认导入](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) 或 [具名导入](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module)）。
 
-这里 `Profile` 和 `Gallery` 均从 `App.js` 移到一个名为 `Gallery.js` 的文件了。现在你可以在 `App.js` 里，从 `Gallery.js` 导入 `Gallery` 组件:
+这里将 `Profile` 组件和 `Gallery` 组件，从 `App.js` 文件中移动到了 `Gallery.js` 文件中。修改后，即可在 `App.js` 中导入 `Gallery.js` 中的 `Gallery` 组件:
 
 <Sandpack>
 

From 99ae857115078f4910787a8300095044ea98f7fb Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 28 Nov 2021 23:55:06 +0800
Subject: [PATCH 11/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 2495b9eac8..e754ce16d1 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -106,7 +106,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-这个例子里需要注意的是，如何将组件拆分成两个文件：
+该示例中需要注意的是，如何将组件拆分成两个文件：
 
 1. `Gallery.js`:
      - 定义了 `Profile` 组件，它仅在同一个文件内使用，没有被导出。

From 953cbe09adaa7d99b5e243506b22f92e6a52fb51 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 28 Nov 2021 23:55:30 +0800
Subject: [PATCH 12/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index e754ce16d1..30de9edd1c 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -109,7 +109,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 该示例中需要注意的是，如何将组件拆分成两个文件：
 
 1. `Gallery.js`:
-     - 定义了 `Profile` 组件，它仅在同一个文件内使用，没有被导出。
+     - 定义了 `Profile` 组件，该组件仅在该文件内使用，没有被导出。
      - 用 **默认导出** 的方式，将 `Gallery` 组件导出
 2. `App.js`:
      - 用 **默认导入** 的方式，将 `Gallery` 组件从 `Gallery.js` 里导入。

From 0396edf4a517e3907ab24c75c869e4ce9cdd5fe4 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 28 Nov 2021 23:55:47 +0800
Subject: [PATCH 13/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 30de9edd1c..f010fef9fd 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -110,7 +110,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 1. `Gallery.js`:
      - 定义了 `Profile` 组件，该组件仅在该文件内使用，没有被导出。
-     - 用 **默认导出** 的方式，将 `Gallery` 组件导出
+     - 使用 **默认导出** 的方式，将 `Gallery` 组件导出
 2. `App.js`:
      - 用 **默认导入** 的方式，将 `Gallery` 组件从 `Gallery.js` 里导入。
      - 用 **默认导出** 的方式，将根组件 `App` 导出。

From a34b264065b8b3f619071250360bf1f430324242 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 28 Nov 2021 23:56:15 +0800
Subject: [PATCH 14/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index f010fef9fd..46c04707fe 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -112,7 +112,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
      - 定义了 `Profile` 组件，该组件仅在该文件内使用，没有被导出。
      - 使用 **默认导出** 的方式，将 `Gallery` 组件导出
 2. `App.js`:
-     - 用 **默认导入** 的方式，将 `Gallery` 组件从 `Gallery.js` 里导入。
+     - 使用 **默认导入** 的方式，从 `Gallery.js` 中导入 `Gallery` 组件。
      - 用 **默认导出** 的方式，将根组件 `App` 导出。
 
 

From e6ceddf29122212b635e05fa6bd76715169d1997 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 28 Nov 2021 23:56:41 +0800
Subject: [PATCH 15/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 46c04707fe..8cc309ac74 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -113,7 +113,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
      - 使用 **默认导出** 的方式，将 `Gallery` 组件导出
 2. `App.js`:
      - 使用 **默认导入** 的方式，从 `Gallery.js` 中导入 `Gallery` 组件。
-     - 用 **默认导出** 的方式，将根组件 `App` 导出。
+     - 使用 **默认导出** 的方式，将根组件 `App` 导出。
 
 
 <Note>

From 9bc0df946727739eccd9d51bf29a00f170252744 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 28 Nov 2021 23:57:12 +0800
Subject: [PATCH 16/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 8cc309ac74..f6c91a1ca4 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -118,7 +118,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 <Note>
 
-你可能会遇到一些文件是没有 `.js` 文件后缀的，如下所示：
+引入过程中，你可能会遇到一些文件并未添加 `.js` 文件后缀，如下所示：
 
 ```js 
 import Gallery from './Gallery';

From daf1a1897d7241e61673b7f50a3a7dbf8abf949c Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 28 Nov 2021 23:57:44 +0800
Subject: [PATCH 17/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index f6c91a1ca4..7814ab4bca 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -124,7 +124,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 import Gallery from './Gallery';
 ```
 
-不管是 `'Gallery.js'` 还是 `'.Gallery'`，在 React 里都能正常使用，只是前者更符合 [原生 ES 模块](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules)。
+无论是 `'./Gallery.js'` 还是 `'./Gallery'`，在 React 里都能正常使用，只是前者更符合 [原生 ES 模块](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules)。
 
 </Note>
 

From 22e5ff637a2fb94cd65163dec3cbdd1280ca9d21 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Sun, 28 Nov 2021 23:58:20 +0800
Subject: [PATCH 18/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 7814ab4bca..e41d2f1d98 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -128,7 +128,7 @@ import Gallery from './Gallery';
 
 </Note>
 
-<DeepDive title="默认导出 vs 命名导出">
+<DeepDive title="默认导出 vs 具名导出">
 
 这是 JavaScript 里两个主要用来导出值的方法：默认导出和命名导出。到目前为止，我们的例子里仅仅是用到了默认导出。但你可以在一个文件里，使用其中一种或两种都使用。**一个文件里有且仅有一个 _默认_ 导出，但是可以有任意多个 _命名_ 导出。**
 

From be92dc9769019c99995a763a69f26d2f4fe1eeb9 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Mon, 29 Nov 2021 00:00:51 +0800
Subject: [PATCH 19/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index e41d2f1d98..fe7a5be953 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -130,7 +130,7 @@ import Gallery from './Gallery';
 
 <DeepDive title="默认导出 vs 具名导出">
 
-这是 JavaScript 里两个主要用来导出值的方法：默认导出和命名导出。到目前为止，我们的例子里仅仅是用到了默认导出。但你可以在一个文件里，使用其中一种或两种都使用。**一个文件里有且仅有一个 _默认_ 导出，但是可以有任意多个 _命名_ 导出。**
+这是 JavaScript 里两个主要用来导出值的方式：默认导出和具名导出。到目前为止，我们的示例中只用到了默认导出。但你可以在一个文件中，选择使用其中一种，或者两种都使用。**一个文件里有且仅有一个 _默认_ 导出，但是可以有任意多个 _具名_ 导出。**
 
 ![Default and named exports](/images/docs/illustrations/i_import-export.svg)
 

From 06648925467e574e4f2723d92e39888ef7f07a9d Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Mon, 29 Nov 2021 00:01:24 +0800
Subject: [PATCH 20/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index fe7a5be953..457c59dd6d 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -363,7 +363,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-这是用了默认导出的解决方案：
+默认导出的解决方案：
 
 <Sandpack>
 

From 4a9cde7c6ad98247e4c1ec43c7648fef2295bd68 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Mon, 29 Nov 2021 00:01:53 +0800
Subject: [PATCH 21/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 457c59dd6d..2a608373c5 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -134,7 +134,7 @@ import Gallery from './Gallery';
 
 ![Default and named exports](/images/docs/illustrations/i_import-export.svg)
 
-你组件的导出方式决定了你导入它的方式。当你用默认导入的方法去导入一个命名导出的组件，就会出现报错。你可以通过下面的表格来更好地理解：
+组件的导出方式决定了其导入方式。当你用默认导入的方式，导入具名导出的组件时，就会报错。如下表格可以帮你更好地理解它们：
 
 | 语法           | 导出语句                           | 导入语句                          |
 | -----------    | -----------                        | -----------                       |

From d4ef3818f39e9564a1fc6c55e5d33edeafebc7bc Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Mon, 29 Nov 2021 00:02:15 +0800
Subject: [PATCH 22/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 2a608373c5..85666d9ccd 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -139,7 +139,7 @@ import Gallery from './Gallery';
 | 语法           | 导出语句                           | 导入语句                          |
 | -----------    | -----------                        | -----------                       |
 | 默认  | `export default function Button() {}` | `import Button from './button.js';`     |
-| 命名  | `export function Button() {}`         | `import { Button } from './button.js';` |
+| 具名  | `export function Button() {}`         | `import { Button } from './button.js';` |
 
 当你用默认导入时，你可以在 `import` 语句后面起任何的名字。比如 `import Banana from './button.js'`，这样你还是能得到跟默认导出一样的内容。相反，对于命名导入，导入和导出的名字必须一致。这也是为什么叫 _命名_ 导入的原因！
 

From 997ba56fbf5e4b9fe73993ee19fcab018d77e434 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Mon, 29 Nov 2021 00:02:50 +0800
Subject: [PATCH 23/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 85666d9ccd..3d98e17738 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -141,7 +141,7 @@ import Gallery from './Gallery';
 | 默认  | `export default function Button() {}` | `import Button from './button.js';`     |
 | 具名  | `export function Button() {}`         | `import { Button } from './button.js';` |
 
-当你用默认导入时，你可以在 `import` 语句后面起任何的名字。比如 `import Banana from './button.js'`，这样你还是能得到跟默认导出一样的内容。相反，对于命名导入，导入和导出的名字必须一致。这也是为什么叫 _命名_ 导入的原因！
+当使用默认导入时，你可以在 `import` 语句后面进行任意命名。比如 `import Banana from './button.js'`，如此你能获得与默认导出一致的内容。相反，对于具名导入，导入和导出的名字必须一致。这也是为什么称其为 _具名_ 导入的原因！
 
 **通常文件里只有一个组件时，人们会使用默认导出，而当文件里有多个组件或值需要导出时，则使用命名导出。** 不管你使用哪种方式，请记得给你的组件和相应的文件起一个有意义的名字。我们不建议创建没有命名的组件，比如 `export default () => {}`，因为这样会使得调试变得更加困难。
 

From 39c5b0292a97d96ed0236f12d82f1a64b60f4087 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Mon, 29 Nov 2021 00:03:26 +0800
Subject: [PATCH 24/27] Update
 beta/src/pages/learn/importing-and-exporting-components.md

Co-authored-by: QiChang Li <github@liqichang.com>
---
 beta/src/pages/learn/importing-and-exporting-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 3d98e17738..2ccc44897c 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -143,7 +143,7 @@ import Gallery from './Gallery';
 
 当使用默认导入时，你可以在 `import` 语句后面进行任意命名。比如 `import Banana from './button.js'`，如此你能获得与默认导出一致的内容。相反，对于具名导入，导入和导出的名字必须一致。这也是为什么称其为 _具名_ 导入的原因！
 
-**通常文件里只有一个组件时，人们会使用默认导出，而当文件里有多个组件或值需要导出时，则使用命名导出。** 不管你使用哪种方式，请记得给你的组件和相应的文件起一个有意义的名字。我们不建议创建没有命名的组件，比如 `export default () => {}`，因为这样会使得调试变得更加困难。
+**通常，文件中仅包含一个组件时，人们会选择默认导出，而当文件中包含多个组件或某个值需要导出时，则会选择具名导出。**无论选择哪种方式，请记得给你的组件和相应的文件命名一个有意义的名字。我们不建议创建未命名的组件，比如 `export default () => {}`，因为这样会使得调试变得异常困难。
 
 </DeepDive>
 

From 0c37797a8cb445ff8b8b4879d736a448460c5b19 Mon Sep 17 00:00:00 2001
From: Jiarong Deng <alienover.l.d@gmail.com>
Date: Mon, 29 Nov 2021 00:07:14 +0800
Subject: [PATCH 25/27] Apply suggestions from code review

Co-authored-by: QiChang Li <github@liqichang.com>
---
 .../importing-and-exporting-components.md     | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 2ccc44897c..1fa8c8aee9 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -147,13 +147,13 @@ import Gallery from './Gallery';
 
 </DeepDive>
 
-## 从一个文件里导出和导入多个组件 {/*exporting-and-importing-multiple-components-from-the-same-file*/}
+## 从同一文件中导出和导入多个组件 {/*exporting-and-importing-multiple-components-from-the-same-file*/}
 
-假如你只想展示一个 `Profile` 而不展示整个图集呢？你也可以导出 `Profile` 组件。但 `Gallery.js` 里已经有一个 *默认* 导出了，你不能定义 _两个_ 默认导出。你可以在一个新文件里用默认导出，或者将 `Profile` 用 *命名* 导出。**一个文件里，有且仅有一个默认导出，但可以有多个命名导出！**
+如果你只想展示一个 `Profile` 组，而不展示整个图集。你也可以导出 `Profile` 组件。但 `Gallery.js` 中已包含 *默认* 导出，此时，你不能定义 _两个_ 默认导出。但你可以将其在新文件中进行默认导出，或者将 `Profile` 进行 *具名* 导出。**同一文件中，有且仅有一个默认导出，但可以有多个具名导出！**
 
-> 为了减少在默认导出和命名导出之间的混淆，一些团队会选择只使用一种风格（默认或者命名），或者禁止在单个文件内混合使用。这因人而异，选择最适合你的即可！
+> 为了减少在默认导出和具名导出之间的混淆，一些团队会选择只使用一种风格（默认或者具名），或者禁止在单个文件内混合使用。这因人而异，选择最适合你的即可！
 
-首先，用命名导出的方法从 `Gallery.js` **导出** `Profile` 组件（没有 `default` 关键字）：
+首先，用具名导出的方式，将 `Profile` 组件从 `Gallery.js` **导出**（不使用 `default` 关键字）：
 
 ```js
 export function Profile() {
@@ -161,7 +161,7 @@ export function Profile() {
 }
 ```
 
-然后，用命名导入的方法从 `Gallery.js` **导入** `Profile` 组件（用大括号）:
+接着，用具名导入的方式，从 `Gallery.js` 文件中 **导入** `Profile` 组件（用大括号）:
 
 ```js
 import { Profile } from './Gallery.js';
@@ -175,7 +175,7 @@ export default function App() {
 }
 ```
 
-现在，`Gallery.js` 里两个导出：一个是默认导出的 `Gallery`，和一个命名导出的 `Profile`。`App.js` 里都导入了这两个组件。尝试将 `<Profile />` 改成 `<Gallery />`，然后回到这个例子里：
+现在，`Gallery.js` 包含两个导出：一个是默认导出的 `Gallery`，另一个是具名导出的 `Profile`。`App.js` 中均导入了这两个组件。尝试将 `<Profile />` 改成 `<Gallery />`，回到示例中：
 
 <Sandpack>
 
@@ -218,19 +218,19 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-现在你正在混合使用默认导出和命名导出：
+示例中混合使用了默认导出和具名导出：
 
 * `Gallery.js`:
-  - 用 **命名导出** 的方式，将 `Profile` 组件导出，并取名为 `Profile`。
-  - 用 **默认导出** 的方式，将 `Gallery` 组件导出。
+  - 使用 **具名导出** 的方式，将 `Profile` 组件导出，并取名为 `Profile`。
+  - 使用 **默认导出** 的方式，将 `Gallery` 组件导出。
 * `App.js`:
-  - 用 **命名导入** 的方式，从 `Gallery.js` 导入 `Profile` 组件，并取名为 `Profile`。
-  - 用 **默认导入** 的方式，从 `Gallery.js` 导入 `Gallery` 组件。
-  - 用 **默认导出** 的方式，将根组件 `App` 导出。
+  - 使用 **命名导入** 的方式，从 `Gallery.js` 中导入 `Profile` 组件，并取名为 `Profile`。
+  - 使用 **默认导入** 的方式，从 `Gallery.js` 中导入 `Gallery` 组件。
+  - 使用 **默认导出** 的方式，将根组件 `App` 导出。
 
 <Recap>
 
-在这个页面里，你学到了：
+在本章节中，你学到了：
 
 * 何为根组件
 * 如何导入和导出一个组件
@@ -247,18 +247,18 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 现在，`Gallery.js` 同时导出了 `Profile` 和 `Gallery`，这会让人感到有点混淆。
 
-尝试将 `Profile` 组件移动到一个新的文件 `Profile.js`，然后更新 `App` 组件，依次渲染 `<Profile />` 和 `<Gallery />` 。
+尝试将 `Profile` 组件移动到 `Profile.js` 文件中，然后更新 `App` 组件，依次渲染 `<Profile />` 和 `<Gallery />` 。
 
-你也许会使用默认导出或者命名导出的方式来导出 `Profile` 组件，但请记住在 `App.js` 和 `Gallery.js` 里使用相应的导入语句！你可以参考下面的表格：
+你也许会使用默认导出或者具名导出的方式，来导出 `Profile` 组件，但请保证在 `App.js` 和 `Gallery.js` 里使用相应的导入语句！具体可以参考下面的表格：
 
 | 语法           | 导出语句                           | 导入语句                          |
 | -----------    | -----------                        | -----------                       |
 | 默认  | `export default function Button() {}` | `import Button from './button.js';`     |
-| 命名  | `export function Button() {}`         | `import { Button } from './button.js';` |
+| 具名  | `export function Button() {}`         | `import { Button } from './button.js';` |
 
 <Hint>
 
-不要忘记在调用它们的地方导入你的组件。`Gallery` 里不也调用了 `Profile` 吗？
+不要忘记在调用它们的地方导入你的组件。因为 `Gallery` 中也调用了 `Profile` 组件。
 
 </Hint>
 
@@ -309,11 +309,11 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 </Sandpack>
 
-在你使用其中一种导出方式完成以上问题后，请尝试使用另一种导出方式实现。
+当你使用其中一种导出方式完成以上任务后，请尝试使用另一种导出方式实现。
 
 <Solution>
 
-这是用了命名导出的解决方案：
+具名导出的解决方案：
 
 <Sandpack>
 

From 244d862e8828f6fa97ab29a0b82b0634a5538a21 Mon Sep 17 00:00:00 2001
From: Jiarong <alienover.l.d@gmail.com>
Date: Mon, 29 Nov 2021 00:14:05 +0800
Subject: [PATCH 26/27] fix: rename the translation for named importings and
 exportings

---
 beta/src/pages/learn/importing-and-exporting-components.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index 1fa8c8aee9..e620f008d8 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -14,7 +14,7 @@ translators:
 
 * 何为根组件
 * 如何导入和导出一个组件
-* 何时使用默认和命名导入导出
+* 何时使用默认和具名导入导出
 * 如何在一个文件中导入导出多个组件
 * 如何将组件拆分成多个文件
 
@@ -224,7 +224,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
   - 使用 **具名导出** 的方式，将 `Profile` 组件导出，并取名为 `Profile`。
   - 使用 **默认导出** 的方式，将 `Gallery` 组件导出。
 * `App.js`:
-  - 使用 **命名导入** 的方式，从 `Gallery.js` 中导入 `Profile` 组件，并取名为 `Profile`。
+  - 使用 **具名导入** 的方式，从 `Gallery.js` 中导入 `Profile` 组件，并取名为 `Profile`。
   - 使用 **默认导入** 的方式，从 `Gallery.js` 中导入 `Gallery` 组件。
   - 使用 **默认导出** 的方式，将根组件 `App` 导出。
 
@@ -234,7 +234,7 @@ img { margin: 0 10px 10px 0; height: 90px; }
 
 * 何为根组件
 * 如何导入和导出一个组件
-* 何时和如何使用默认和命名导入导出
+* 何时和如何使用默认和具名导入导出
 * 如何在一个文件里导出多个组件
 
 </Recap>

From 9ecfd8ec954af15ffd3d26a336b7e6a3b32c9a12 Mon Sep 17 00:00:00 2001
From: QC-L <github@liqichang.com>
Date: Mon, 30 May 2022 10:57:54 +0800
Subject: [PATCH 27/27] feat: add translators

---
 beta/src/pages/learn/importing-and-exporting-components.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/beta/src/pages/learn/importing-and-exporting-components.md b/beta/src/pages/learn/importing-and-exporting-components.md
index e620f008d8..359fd0c902 100644
--- a/beta/src/pages/learn/importing-and-exporting-components.md
+++ b/beta/src/pages/learn/importing-and-exporting-components.md
@@ -2,6 +2,7 @@
 title: 组件的导入与导出
 translators:
   - Alienover
+  - QC-L
 ---
 
 <Intro>