translation: thinking-in-react #515
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
| --- | ||
|
|
||
| <Intro> | ||
|
|
||
| React can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called *components*. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we’ll guide you through the thought process of building a searchable product data table with React. | ||
| React 可以改變你看待設計與建立應用程式的思考方式。當你使用 React 建立使用者介面時，第一步你需要先把它拆解成「元件」。接著，你要描述每個元件不同的畫面狀態。最後，把這些元件連結起來，讓資料可以在它們之間流動。在本教學中，我們將引導你透過 React 打造一個可搜尋的產品資料表格，並了解其中的思考過程。 |
There was a problem hiding this comment.
We reserve the component keyword, please help us to update😄.
Suggested change
| React 可以改變你看待設計與建立應用程式的思考方式。當你使用 React 建立使用者介面時，第一步你需要先把它拆解成「元件」。接著，你要描述每個元件不同的畫面狀態。最後，把這些元件連結起來，讓資料可以在它們之間流動。在本教學中，我們將引導你透過 React 打造一個可搜尋的產品資料表格，並了解其中的思考過程。 | |
| React 可以改變你看待設計與建立應用程式的思考方式。當你使用 React 建立使用者介面時，第一步你需要先把它拆解成「component」。接著，你要描述每個元件不同的畫面狀態。最後，把這些元件連結起來，讓資料可以在它們之間流動。在本教學中，我們將引導你透過 React 打造一個可搜尋的產品資料表格，並了解其中的思考過程。 |
| * **Programming**--use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents. | ||
| * **CSS**--consider what you would make class selectors for. (However, components are a bit less granular.) | ||
| * **Design**--consider how you would organize the design's layers. | ||
| * **程式設計**--就像你寫程式時會判斷是否該建立新的函式或物件一樣，也可以用相同的技巧來拆元件。其中一個常見的技巧叫做 [單一職責原則](https://en.wikipedia.org/wiki/Single_responsibility_principle)，也就是說，理想的情況下，每個元件應該只做一件事情。如果某個元件隨著開發越來越複雜，它就應該被分解成更小的子元件。 |
There was a problem hiding this comment.
Suggested change
| * **程式設計**--就像你寫程式時會判斷是否該建立新的函式或物件一樣，也可以用相同的技巧來拆元件。其中一個常見的技巧叫做 [單一職責原則](https://en.wikipedia.org/wiki/Single_responsibility_principle)，也就是說，理想的情況下，每個元件應該只做一件事情。如果某個元件隨著開發越來越複雜，它就應該被分解成更小的子元件。 | |
| * **程式設計**--就像你寫程式時會判斷是否該建立新的函式或物件一樣，也可以用相同的技巧來拆元件。其中一個常見的技巧叫做[單一職責原則](https://en.wikipedia.org/wiki/Single_responsibility_principle)，也就是說，理想的情況下，每個元件應該只做一件事情。如果某個元件隨著開發越來越複雜，它就應該被分解成更小的子元件。 |
|
|
||
| </CodeDiagram> | ||
|
|
||
| </FullWidth> | ||
|
|
||
| If you look at `ProductTable` (lavender), you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference, and you could go either way. For this example, it is a part of `ProductTable` because it appears inside the `ProductTable`'s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own `ProductTableHeader` component. | ||
| 若你查看 `ProductTable`（淡紫色）時，會發現表格的表頭（包含 "Name" 和 "Price" 標籤 ）並不是獨立的元件。這純粹是偏好的問題，你可以選擇任何一種作法。以這裡為例，表頭被視為 `ProductTable` 的一部分，因為它出現在 `ProductTable` 的清單中。不過，當這個表頭變得更加複雜（例如加入了排序功能），你就可以把它抽出成獨立的 `ProductTableHeader` 元件。 |
There was a problem hiding this comment.
Suggested change
| 若你查看 `ProductTable`（淡紫色）時，會發現表格的表頭（包含 "Name" 和 "Price" 標籤 ）並不是獨立的元件。這純粹是偏好的問題，你可以選擇任何一種作法。以這裡為例，表頭被視為 `ProductTable` 的一部分，因為它出現在 `ProductTable` 的清單中。不過，當這個表頭變得更加複雜（例如加入了排序功能），你就可以把它抽出成獨立的 `ProductTableHeader` 元件。 | |
| 若你查看 `ProductTable`（淡紫色）時，會發現表格的表頭（包含「Name」和「Price」標籤 ）並不是獨立的元件。這純粹是偏好的問題，你可以選擇任何一種作法。以這裡為例，表頭被視為 `ProductTable` 的一部分，因為它出現在 `ProductTable` 的清單中。不過，當這個表頭變得更加複雜（例如加入了排序功能），你就可以把它抽出成獨立的 `ProductTableHeader` 元件。 |
|
|
||
| To build a static version of your app that renders your data model, you'll want to build [components](/learn/your-first-component) that reuse other components and pass data using [props.](/learn/passing-props-to-a-component) Props are a way of passing data from parent to child. (If you're familiar with the concept of [state](/learn/state-a-components-memory), don't use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don't need it.) | ||
| 為了建立一個根據資料模型來渲染畫面的靜態版本應用程式，你需要建立可以重複使用的 [元件](/learn/your-first-component) ，並透過 [props.](/learn/passing-props-to-a-component) 來傳遞資料，Props 是一個可以將資料從父元件傳遞到子元件的方法。（如果你已經熟悉 [state](/learn/state-a-components-memory)的概念，請不要在這個靜態版本中使用到 state 。 State 是專門用來處理互動的，也就是那些會隨時間改變的資料。因此在這個靜態版本的應用程式中，你不需要用到它。） |
There was a problem hiding this comment.
Suggested change
| 為了建立一個根據資料模型來渲染畫面的靜態版本應用程式，你需要建立可以重複使用的 [元件](/learn/your-first-component) ，並透過 [props.](/learn/passing-props-to-a-component) 來傳遞資料，Props 是一個可以將資料從父元件傳遞到子元件的方法。（如果你已經熟悉 [state](/learn/state-a-components-memory)的概念，請不要在這個靜態版本中使用到 state 。 State 是專門用來處理互動的，也就是那些會隨時間改變的資料。因此在這個靜態版本的應用程式中，你不需要用到它。） | |
| 為了建立一個根據資料模型來渲染畫面的靜態版本應用程式，你需要建立可以重複使用的 [component](/learn/your-first-component) ，並透過 [props](/learn/passing-props-to-a-component) 來傳遞資料，Props 是一個可以將資料從父元件傳遞到子元件的方法。（如果你已經熟悉 [state](/learn/state-a-components-memory)的概念，請不要在這個靜態版本中使用到 state 。 State 是專門用來處理互動的，也就是那些會隨時間改變的資料。因此在這個靜態版本的應用程式中，你不需要用到它。） |
|
|
||
| After building your components, you'll have a library of reusable components that render your data model. Because this is a static app, the components will only return JSX. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. This is called _one-way data flow_ because the data flows down from the top-level component to the ones at the bottom of the tree. | ||
| 當你建立好元件後，你就會擁有一個可重複使用的元件庫，用來渲染你的資料模型。由於這是一個靜態應用程式，所以元件只會回傳 JSX ，不包含任何互動邏輯。最上層的元件（`FilterableProductTable`）會將資料模型作為 prop 傳入。這種資料從頂層元件一路向下傳遞到樹狀結構底部元件的方式，被稱為 _單向資料流_。 |
There was a problem hiding this comment.
Suggested change
| 當你建立好元件後，你就會擁有一個可重複使用的元件庫，用來渲染你的資料模型。由於這是一個靜態應用程式，所以元件只會回傳 JSX ，不包含任何互動邏輯。最上層的元件（`FilterableProductTable`）會將資料模型作為 prop 傳入。這種資料從頂層元件一路向下傳遞到樹狀結構底部元件的方式，被稱為 _單向資料流_。 | |
| 當你建立好元件後，你就會擁有一個可重複使用的元件庫，用來渲染你的資料模型。由於這是一個靜態應用程式，所以元件只會回傳 JSX ，不包含任何互動邏輯。最上層的元件（`FilterableProductTable`）會將資料模型作為 prop 傳入。這種資料從頂層元件一路向下傳遞到樹狀結構底部元件的方式，被稱_單向資料流_。 |
|
|
||
| This means only the search text and the value of the checkbox are state! Nicely done! | ||
| 1. 原始的產品清單會 **透過 props 傳遞，所以它不能放進 state**。 | ||
| 2. 搜尋文字看起來是 state ，因為它會隨時間變化而改變，且不能從任何東西計算出來。 |
There was a problem hiding this comment.
Suggested change
| 2. 搜尋文字看起來是 state ，因為它會隨時間變化而改變，且不能從任何東西計算出來。 | |
| 2. 搜尋文字看起來是 state，因為它會隨時間變化而改變，且不能從任何東西計算出來。 |
| This means only the search text and the value of the checkbox are state! Nicely done! | ||
| 1. 原始的產品清單會 **透過 props 傳遞，所以它不能放進 state**。 | ||
| 2. 搜尋文字看起來是 state ，因為它會隨時間變化而改變，且不能從任何東西計算出來。 | ||
| 3. checkbox 的狀態看起來可以放進 state ，因為它會隨時間變化而改變，且不能從任何東西計算出來。 |
There was a problem hiding this comment.
Suggested change
| 3. checkbox 的狀態看起來可以放進 state ，因為它會隨時間變化而改變，且不能從任何東西計算出來。 | |
| 3. Checkbox 的狀態看起來可以放進 state，因為它會隨時間變化而改變，且不能從任何東西計算出來。 |
| 1. 原始的產品清單會 **透過 props 傳遞，所以它不能放進 state**。 | ||
| 2. 搜尋文字看起來是 state ，因為它會隨時間變化而改變，且不能從任何東西計算出來。 | ||
| 3. checkbox 的狀態看起來可以放進 state ，因為它會隨時間變化而改變，且不能從任何東西計算出來。 | ||
| 4. 篩選後的產品清單 **不能放進 state ，因為它可以透過原始的產品清單被計算出來** ，且篩選本身是根據搜尋文字與 checkbox 狀態而來。 |
There was a problem hiding this comment.
Suggested change
| 4. 篩選後的產品清單 **不能放進 state ，因為它可以透過原始的產品清單被計算出來** ，且篩選本身是根據搜尋文字與 checkbox 狀態而來。 | |
| 4. 篩選後的產品清單**不能放進 state ，因為它可以透過原始的產品清單被計算出來**，且篩選本身是根據搜尋文字與 checkbox 狀態而來。 |
|
|
||
| 這代表只有搜尋文字與 checkbox 狀態應該被放進 state 中！做得好！ |
There was a problem hiding this comment.
This line should be in the line 235.
| <DeepDive> | ||
|
|
||
| #### Props vs State {/*props-vs-state*/} | ||
|
|
||
| There are two types of "model" data in React: props and state. The two are very different: | ||
| 在 React 中有兩種資料「模型」： props 和 state 。 它們兩者非常的不同： |
There was a problem hiding this comment.
Suggested change
| 在 React 中有兩種資料「模型」： props 和 state 。 它們兩者非常的不同： | |
| 在 React 中有兩種資料「模型」： props 和 state 。它們兩者非常的不同： |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.