doc: translate hooks-overview #35

BruceWeng · 2019-03-09T01:50:13Z

Ready to review!
I made an independent PR for each article for easier merging.

I will keep doc: Translate Hooks #32 open until all the Hooks topics are done.
I will track the Hooks translation progress there, which will be friendly for newcomers following current progress.

Also, I find it hard to avoid my hooks-intro.md work. Please cherry-pick hooks-overview.md commits in this PR and I will pull the result on master and start from there on my next translation.

Let me know if you have any thought!

Update: I have resolved conflict on hooks-intro.md by deleting my part. This PR should have no collision with the master branch now.

netlify · 2019-03-09T01:54:58Z

Deploy preview for zh-hant-reactjs-org ready!

Built with commit c43ad02

https://deploy-preview-35--zh-hant-reactjs-org.netlify.com

chloewlin

Hi @BruceWeng! In another PR, you used "Hook" (singular) consistently over the entire translation. But here you alternate between "Hooks" and "Hook". Can you fix them?

Also, please take a look at the glossary: https://github.com/reactjs/zh-hant.reactjs.org/wiki/Glossary
These are the words the community agrees to keep in English.

I didn't fix everything in this PR. Can you fix the rest? Thanks!

chloewlin · 2019-03-13T08:33:32Z

content/docs/hooks-overview.md

@@ -1,30 +1,30 @@
 ---
 id: hooks-overview
-title: Hooks at a Glance
+title: 第一眼 Hooks


At a glance does not mean 第一眼. It means a brief summary.

Suggested change

title: 第一眼 Hooks

title: Hook 概論

chloewlin · 2019-03-13T08:36:13Z

content/docs/hooks-overview.md

 permalink: docs/hooks-overview.html
 next: hooks-state.html
 prev: hooks-intro.html
 ---

-*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
+*Hooks* 是 React 16.8 新加的功能，他們讓你可以不用寫 class 就能使用 state 與其他 React 的功能。


Suggested change

*Hooks* 是 React 16.8 新加的功能，他們讓你可以不用寫 class 就能使用 state 與其他 React 的功能。

*Hook* 是 React 16.8 新加的功能，他們讓你可以不用寫 class 就能使用 state 與其他 React 的功能。

Singular.

chloewlin · 2019-03-13T08:36:30Z

content/docs/hooks-overview.md


-Hooks are [backwards-compatible](/docs/hooks-intro.html#no-breaking-changes). This page provides an overview of Hooks for experienced React users. This is a fast-paced overview. If you get confused, look for a yellow box like this:
+Hooks [向後兼容](/docs/hooks-intro.html#no-breaking-changes)。這一頁提供 Hooks 的簡介給有經驗的 React 使用者們。這是一個快節奏的簡介，如果你有疑惑，看一下黃色框框如下：


Suggested change

Hooks [向後兼容](/docs/hooks-intro.html#no-breaking-changes)。這一頁提供 Hooks 的簡介給有經驗的 React 使用者們。這是一個快節奏的簡介，如果你有疑惑，看一下黃色框框如下：

Hook [向後兼容](/docs/hooks-intro.html#no-breaking-changes)。這一頁提供 Hook 的簡介給有經驗的 React 使用者們。這是一個快節奏的簡介，如果你有疑惑，看一下黃色框框如下：

Singular

chloewlin · 2019-03-13T08:36:42Z

content/docs/hooks-overview.md

 >
->Read the [Motivation](/docs/hooks-intro.html#motivation) to learn why we're introducing Hooks to React.
+>讀[動機](/docs/hooks-intro.html#motivation)來了解為什麼我們將 Hooks 加入 React。


Suggested change

>讀[動機](/docs/hooks-intro.html#motivation)來了解為什麼我們將 Hooks 加入 React。

>讀[動機](/docs/hooks-intro.html#motivation)來了解為什麼我們將 Hook 加入 React。

chloewlin · 2019-03-13T08:39:29Z

content/docs/hooks-overview.md


-**↑↑↑ Each section ends with a yellow box like this.** They link to detailed explanations.
+**↑↑↑ 每一個章節結束都有一個黃色框框像這樣。**他們連到詳細解釋。


Suggested change

**↑↑↑ 每一個章節結束都有一個黃色框框像這樣。**他們連到詳細解釋。

**↑↑↑ 每一個章節結束都有一個黃色框框像這樣。** 他們連到詳細解釋。

Not properly bolded.

chloewlin · 2019-03-13T08:58:41Z

content/docs/hooks-overview.md


-## 🔌 Other Hooks {#other-hooks}
+## 🔌 其他 Hooks {#other-hooks}


Suggested change

## 🔌 其他 Hooks {#other-hooks}

## 🔌 其他 Hook {#other-hooks}

chloewlin · 2019-03-13T22:05:16Z

content/docs/hooks-overview.md

 >
->You can learn more about all the built-in Hooks on a dedicated page: [Hooks API Reference](/docs/hooks-reference.html).
+>你可以在 [Hooks API Reference](/docs/hooks-reference.html) 了解更多所有的內建 Hooks。


Suggested change

>你可以在 [Hooks API Reference](/docs/hooks-reference.html) 了解更多所有的內建 Hooks。

>你可以在 [Hooks API Reference](/docs/hooks-reference.html) 了解更多所有的內建 Hook。

chloewlin · 2019-03-13T22:06:03Z

content/docs/nav.yml

      - id: hooks-overview
-        title: Hooks at a Glance
+        title: 第一眼 Hooks


Again, at a glance means a brief summary here.

chloewlin · 2019-03-13T22:06:28Z

content/docs/hooks-overview.md


-You can also check out the [Hooks API reference](/docs/hooks-reference.html) and the [Hooks FAQ](/docs/hooks-faq.html).
+你也可以看看 [Hooks API reference](/docs/hooks-reference.html) 與 [Hooks 常見問題](/docs/hooks-faq.html)。


Suggested change

你也可以看看 [Hooks API reference](/docs/hooks-reference.html) 與 [Hooks 常見問題](/docs/hooks-faq.html)。

你也可以看看 [Hook API reference](/docs/hooks-reference.html) 與 [Hook 常見問題](/docs/hooks-faq.html)。

chloewlin · 2019-03-13T22:06:39Z

content/docs/hooks-overview.md


-Finally, don't miss the [introduction page](/docs/hooks-intro.html) which explains *why* we're adding Hooks and how we'll start using them side by side with classes -- without rewriting our apps.
+最後，不要漏了[隆重介紹頁面](/docs/hooks-intro.html)，這裡解釋了 *為什麼* 我們加入了 Hooks 與我們如何和 class 一起使用——不用重寫我們的應用程式。


Suggested change

最後，不要漏了[隆重介紹頁面](/docs/hooks-intro.html)，這裡解釋了 *為什麼* 我們加入了 Hooks 與我們如何和 class 一起使用——不用重寫我們的應用程式。

最後，不要漏了[隆重介紹頁面](/docs/hooks-intro.html)，這裡解釋了 *為什麼* 我們加入了 Hook 與我們如何和 class 一起使用——不用重寫我們的應用程式。

BruceWeng · 2019-03-14T00:07:00Z

Hi @chloewlin ,
Thanks for reviewing! I have made the following changes:

Change all Hooks to Hook (Singular)
Properly translate "at a glance" to 「概論」
Properly spacing between English and Chinese
Use prop in singular and keep "tree" in English

Let me know if you find a further suggestion in the article. Thanks!

vrabe · 2019-03-15T18:17:07Z

content/docs/hooks-overview.md

  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
 }
 ```

-The [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) syntax lets us give different names to the state variables we declared by calling `useState`. These names aren't a part of the `useState` API. Instead, React assumes that if you call `useState` many times, you do it in the same order during every render. We'll come back to why this works and when this is useful later.
+[Array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) 語法讓我們可以給用呼叫 `useState` 宣告的 state 變數不同的名字，這些名字不是 `useState` API 的一部份。相反地，React 假設如果你呼叫 `usetState` 多次，你在每次 render 用同樣的順序。我們之後將會回來討論為什麼可以這樣做與什麼時候他很有用。


Suggested change

[Array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) 語法讓我們可以給用呼叫 `useState` 宣告的 state 變數不同的名字，這些名字不是 `useState` API 的一部份。相反地，React 假設如果你呼叫 `usetState` 多次，你在每次 render 用同樣的順序。我們之後將會回來討論為什麼可以這樣做與什麼時候他很有用。

[Array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) 語法讓我們可以給用呼叫 `useState` 宣告的 state 變數不同的名字，這些名字不是 `useState` API 的一部份。相反地，React 假設如果你呼叫 `useState` 多次，你在每次 render 用同樣的順序。我們之後將會回來討論為什麼可以這樣做與什麼時候他很有用。

vrabe · 2019-03-15T18:19:22Z

content/docs/hooks-overview.md

@@ -229,19 +229,19 @@ function FriendListItem(props) {
 }
 ```

-The state of these components is completely independent. Hooks are a way to reuse *stateful logic*, not state itself. In fact, each *call* to a Hook has a completely isolated state -- so you can even use the same custom Hook twice in one component.
+這兩個 component 的 state 是完全獨立的。Hook 是一種重複使用 *statefule 邏輯* 的方式，不是 state 本身。實際上，每一次呼叫一個 Hook 都有一個完全獨立且隔離的 state —— 所以你甚至可以在一個 component 使用同一個客製化 Hook 兩次。


Suggested change

這兩個 component 的 state 是完全獨立的。Hook 是一種重複使用 *statefule 邏輯* 的方式，不是 state 本身。實際上，每一次呼叫一個 Hook 都有一個完全獨立且隔離的 state —— 所以你甚至可以在一個 component 使用同一個客製化 Hook 兩次。

這兩個 component 的 state 是完全獨立的。Hook 是一種重複使用 *stateful 邏輯* 的方式，不是 state 本身。實際上，每一次呼叫一個 Hook 都有一個完全獨立且隔離的 state —— 所以你甚至可以在一個 component 使用同一個客製化 Hook 兩次。

vrabe · 2019-03-15T18:20:18Z

content/docs/hooks-overview.md


-Custom Hooks are more of a convention than a feature. If a function's name starts with "`use`" and it calls other Hooks, we say it is a custom Hook. The `useSomething` naming convention is how our linter plugin is able to find bugs in the code using Hooks.
+客製化 Hook 比較像慣例而不是功能，如果一個 function 的名字是「`use`」開頭且他呼叫其他 Hook，我們將他稱之為客製化 Hook。使用 Hook 時，`useSometing`的命名慣例是我們的 linter plugin 如何能夠在程式碼中找到 bug 的原因。


Suggested change

客製化 Hook 比較像慣例而不是功能，如果一個 function 的名字是「`use`」開頭且他呼叫其他 Hook，我們將他稱之為客製化 Hook。使用 Hook 時，`useSometing`的命名慣例是我們的 linter plugin 如何能夠在程式碼中找到 bug 的原因。

客製化 Hook 比較像慣例而不是功能，如果一個 function 的名字是「`use`」開頭且他呼叫其他 Hook，我們將他稱之為客製化 Hook。使用 Hook 時，`useSomething`的命名慣例是我們的 linter plugin 如何能夠在程式碼中找到 bug 的原因。

vrabe

Just some typos.

BruceWeng · 2019-03-16T02:27:14Z

Hi @vrabe ,
Thank you for taking time reviewing the article! I have fixed the typos in the new commit.

BruceWeng · 2019-03-19T03:34:45Z

Hi @chloewlin,
Can we merge it if there is no concern about the translation? Thanks.

bugtender · 2019-03-22T10:23:58Z

Hey, @BruceWeng thanks for your contribution.👍
Could you rebase this pull request to the head? I'll merge it after that. 👌

Translate Introducing Hooks

BruceWeng · 2019-03-23T05:47:42Z

Thanks @bugtender . I have rebased the PR to HEAD.

This was referenced Mar 9, 2019

doc: Translate Hooks #32

Merged

[OLD] Legacy Traditional Chinese Translation Progress #1

Closed

chloewlin added the Review Needed label Mar 10, 2019

chloewlin requested changes Mar 13, 2019

View reviewed changes

chloewlin added In Review Currently under review and removed Review Needed labels Mar 13, 2019

vrabe reviewed Mar 15, 2019

View reviewed changes

vrabe suggested changes Mar 15, 2019

View reviewed changes

bugtender approved these changes Mar 19, 2019

View reviewed changes

BruceWeng added 2 commits March 22, 2019 22:37

Translate Hooks nav.yml

d25f4e9

Translate Introducing Hooks

translate hooks-overview

c43ad02

BruceWeng force-pushed the hooks-overview branch from 5ef51f2 to c43ad02 Compare March 23, 2019 05:39

bugtender merged commit 9bac071 into reactjs:master Mar 23, 2019

neighborhood999 added Completed and removed In Review Currently under review labels Mar 27, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

doc: translate hooks-overview #35

doc: translate hooks-overview #35

BruceWeng commented Mar 9, 2019 •

edited

Loading

netlify bot commented Mar 9, 2019 •

edited

Loading

chloewlin left a comment

chloewlin Mar 13, 2019

chloewlin Mar 13, 2019

chloewlin Mar 13, 2019

chloewlin Mar 13, 2019

chloewlin Mar 13, 2019

chloewlin Mar 13, 2019

chloewlin Mar 13, 2019

chloewlin Mar 13, 2019

chloewlin Mar 13, 2019

chloewlin Mar 13, 2019

BruceWeng commented Mar 14, 2019

vrabe Mar 15, 2019

vrabe Mar 15, 2019

vrabe Mar 15, 2019

vrabe left a comment

BruceWeng commented Mar 16, 2019

BruceWeng commented Mar 19, 2019

bugtender commented Mar 22, 2019

BruceWeng commented Mar 23, 2019 •

edited

Loading

	Hooks 是 React 16.8 新加的功能，他們讓你可以不用寫 class 就能使用 state 與其他 React 的功能。
	Hook 是 React 16.8 新加的功能，他們讓你可以不用寫 class 就能使用 state 與其他 React 的功能。


		Hooks are [backwards-compatible](/docs/hooks-intro.html#no-breaking-changes). This page provides an overview of Hooks for experienced React users. This is a fast-paced overview. If you get confused, look for a yellow box like this:
		Hooks [向後兼容](/docs/hooks-intro.html#no-breaking-changes)。這一頁提供 Hooks 的簡介給有經驗的 React 使用者們。這是一個快節奏的簡介，如果你有疑惑，看一下黃色框框如下：

	Hooks [向後兼容](/docs/hooks-intro.html#no-breaking-changes)。這一頁提供 Hooks 的簡介給有經驗的 React 使用者們。這是一個快節奏的簡介，如果你有疑惑，看一下黃色框框如下：
	Hook [向後兼容](/docs/hooks-intro.html#no-breaking-changes)。這一頁提供 Hook 的簡介給有經驗的 React 使用者們。這是一個快節奏的簡介，如果你有疑惑，看一下黃色框框如下：

	>讀[動機](/docs/hooks-intro.html#motivation)來了解為什麼我們將 Hooks 加入 React。
	>讀[動機](/docs/hooks-intro.html#motivation)來了解為什麼我們將 Hook 加入 React。


		↑↑↑ Each section ends with a yellow box like this. They link to detailed explanations.
		↑↑↑ 每一個章節結束都有一個黃色框框像這樣。他們連到詳細解釋。

	↑↑↑ 每一個章節結束都有一個黃色框框像這樣。他們連到詳細解釋。
	↑↑↑ 每一個章節結束都有一個黃色框框像這樣。他們連到詳細解釋。


		## 🔌 Other Hooks {#other-hooks}
		## 🔌 其他 Hooks {#other-hooks}

	## 🔌 其他 Hooks {#other-hooks}
	## 🔌 其他 Hook {#other-hooks}

	>你可以在 [Hooks API Reference](/docs/hooks-reference.html) 了解更多所有的內建 Hooks。
	>你可以在 [Hooks API Reference](/docs/hooks-reference.html) 了解更多所有的內建 Hook。


		You can also check out the [Hooks API reference](/docs/hooks-reference.html) and the [Hooks FAQ](/docs/hooks-faq.html).
		你也可以看看 [Hooks API reference](/docs/hooks-reference.html) 與 [Hooks 常見問題](/docs/hooks-faq.html)。

	你也可以看看 [Hooks API reference](/docs/hooks-reference.html) 與 [Hooks 常見問題](/docs/hooks-faq.html)。
	你也可以看看 [Hook API reference](/docs/hooks-reference.html) 與 [Hook 常見問題](/docs/hooks-faq.html)。


		Finally, don't miss the [introduction page](/docs/hooks-intro.html) which explains why we're adding Hooks and how we'll start using them side by side with classes -- without rewriting our apps.
		最後，不要漏了[隆重介紹頁面](/docs/hooks-intro.html)，這裡解釋了為什麼我們加入了 Hooks 與我們如何和 class 一起使用——不用重寫我們的應用程式。

	這兩個 component 的 state 是完全獨立的。Hook 是一種重複使用 statefule 邏輯的方式，不是 state 本身。實際上，每一次呼叫一個 Hook 都有一個完全獨立且隔離的 state —— 所以你甚至可以在一個 component 使用同一個客製化 Hook 兩次。
	這兩個 component 的 state 是完全獨立的。Hook 是一種重複使用 stateful 邏輯的方式，不是 state 本身。實際上，每一次呼叫一個 Hook 都有一個完全獨立且隔離的 state —— 所以你甚至可以在一個 component 使用同一個客製化 Hook 兩次。


		Custom Hooks are more of a convention than a feature. If a function's name starts with "`use`" and it calls other Hooks, we say it is a custom Hook. The `useSomething` naming convention is how our linter plugin is able to find bugs in the code using Hooks.
		客製化 Hook 比較像慣例而不是功能，如果一個 function 的名字是「`use`」開頭且他呼叫其他 Hook，我們將他稱之為客製化 Hook。使用 Hook 時，`useSometing`的命名慣例是我們的 linter plugin 如何能夠在程式碼中找到 bug 的原因。

doc: translate hooks-overview #35

doc: translate hooks-overview #35

Conversation

BruceWeng commented Mar 9, 2019 • edited Loading

netlify bot commented Mar 9, 2019 • edited Loading

chloewlin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BruceWeng commented Mar 14, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vrabe left a comment

Choose a reason for hiding this comment

BruceWeng commented Mar 16, 2019

BruceWeng commented Mar 19, 2019

bugtender commented Mar 22, 2019

BruceWeng commented Mar 23, 2019 • edited Loading

BruceWeng commented Mar 9, 2019 •

edited

Loading

netlify bot commented Mar 9, 2019 •

edited

Loading

BruceWeng commented Mar 23, 2019 •

edited

Loading