Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: React.Component #75

Merged
merged 86 commits into from Sep 13, 2019
Merged

docs: React.Component #75

merged 86 commits into from Sep 13, 2019

Conversation

chloewlin
Copy link
Member

@chloewlin chloewlin commented Jun 30, 2019 •
edited

6/30 - Set up branch for React.Component. This is a pretty long article (642 lines), I will commit often. Please feel free to review as I translate.

7/5 - Complete translation. Please see my notes and review.

  • Overview
    • The Component Lifecycle
      • Mounting
      • Updating
      • Unmounting
      • Error Handling
    • Other APIs
    • Class Properties
    • Instance Properties
  • Reference:
    • render()
    • constructor()
    • componentDidMount()
    • componentDidUpdate()
    • componentWillUnmount()
    • shouldComponentUpdate()
  • Rarely Used Life Cycle Methods
    • static getDerivedStateFromProps()
    • getSnapshotBeforeUpdate()
    • Error boundaries
    • static getDerivedStateFromError()
    • componentDidCatch()
    • Legacy Lifecycle Methods: UNSAFE_componentWillMount(), UNSAFE_componentWillReceiveProps(), UNSAFE_componentWillUpdate()
    • Other APIs: setState(), forceUpdate()
  • Class Properties:
    • defaultProps
    • displayName
    • props, state

@netlify
Copy link

netlify bot commented Jun 30, 2019 •
edited

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

Built with commit 8c649b5

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

@tesseralis tesseralis mentioned this pull request Jun 30, 2019
Closed
92 tasks
@chloewlin
Finish Overview
e3b5e6a
@chloewlin
Finish Reference - commonly-used-lifecycle-methods and render
74d0755
@chloewlin
Finish Reference - constructor
e1766d1
@chloewlin
Finish componentDidMount()
28c2ec3
@chloewlin
Finish ComponentDidMount
e7f5bf7
@chloewlin
State rarely used life cycle methods
474d84c
@chloewlin
Revert "State rarely used life cycle methods"
987740a 
This reverts commit 474d84c.
@chloewlin
Merge branch 'master' of https://github.com/reactjs/zh-hant.reactjs.org…
b6ab4c3 
… into react-component
@chloewlin
Finish componentWillUnmount
6a27f98
@chloewlin
shouldComponentUpdate()
16fa90e
@chloewlin
Finish static getDerivedStateFromProps()
0632f4b
@chloewlin
Finish Error Boundary and getDerivedStateFromError
6ae323b
@chloewlin
Finish ComponentDidCatch
6c4df95
@chloewlin
Complete UNSAFE_componentWillMount() and UNSAFE_componentWillReceiveP…
d57e78c 
…rops()
@chloewlin
Complete UNSAFE_componentWillUpdate() and legacy lifecycle methods
5adafce
@chloewlin
Finish setState()
8177181
@chloewlin
Finish forceUpdate()
2d4ee35
@chloewlin
Complete react-component with changes that follow glossary in wiki
2da864f 
- tree, child/children component remain in English
- timer should be translated
@chloewlin
Fix typo and untranslated terms
5790e95
chloewlin
chloewlin commented Jul 7, 2019
View reviewed changes
Copy link
Member Author

@chloewlin chloewlin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've commented on a few terms that I am not sure of. This doc is now ready for review. :)

content/docs/reference-react-component.md Outdated

Each component has several "lifecycle methods" that you can override to run code at particular times in the process. **You can use [this lifecycle diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) as a cheat sheet.** In the list below, commonly used lifecycle methods are marked as **bold**. The rest of them exist for relatively rare use cases.
每一個 component 都有數個 「生命週期方法」，你可以[覆蓋（override）](https://en.wikipedia.org/wiki/Method_overriding)這些方法，以便在開發過程中某些特定的時刻運行某些程式。 **你可以使用[這個生命週期表](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)作為速查表。** 以下，常用的生命週期方法將會以粗體表達。其餘的生命週期方法則相對罕見。
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found this Wikipedia link helpful, so I added it. We can remove it if you think it's unnecessary.

content/docs/reference-react-component.md Outdated Show resolved Hide resolved
content/docs/reference-react-component.md Outdated

The `render()` function should be pure, meaning that it does not modify component state, it returns the same result each time it's invoked, and it does not directly interact with the browser.
`render()` function 應為純函數（pure function），這表示：它並不會改變 component 的 state，它在每次呼叫時都會返回同樣的結果，它並不會直接和瀏覽器有所互動。
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added 純函數（pure function) for clarity.

content/docs/reference-react-component.md Outdated

Avoid introducing any side-effects or subscriptions in the constructor. For those use cases, use `componentDidMount()` instead.
請避免在 constructor 中產生任何副作用或 subscription。如果你需要它們的話，請使用 `componentDidMount()`。
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure what subscription refers to here.

content/docs/reference-react-component.md Outdated

A snapshot value (or `null`) should be returned.
一個快照（snapshot）的值（或 `null`）應該被返回。
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can remove the English snapshot here if you think it's unnecessary.

content/docs/reference-react-component.md
>
> This lifecycle was previously named `componentWillUpdate`. That name will continue to work until version 17. Use the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
> 這個生命週期方法先前的命名是 `componentWillUpdate`。這個命名直到第 17 版仍然能繼續運作。請使用[`重新命名不安全的生命週期方法` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) 來自動更新你的 component。
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure how to translate codemod.

content/docs/reference-react-component.md Outdated

The first argument is an `updater` function with the signature:
這個方法的第一個參數是一個帶有如下的 signature 的 `updater` function：
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure how to translate function signature here.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe 形式 or 宣告?

content/docs/reference-react-component.md Outdated

```javascript
(state, props) => stateChange
```

`state` is a reference to the component state at the time the change is being applied. It should not be directly mutated. Instead, changes should be represented by building a new object based on the input from `state` and `props`. For instance, suppose we wanted to increment a value in state by `props.step`:
`state` 是當某個改變正在被應用時對 component state 的一個參考（reference）。它不應該直接被 mutate。相反的，任何改變都應該用一個基於 `state` 和 `props` 的 input 所建立的新的 object 來表示。例如，假設我們想要使用 `props.step` 來增加 state 中的某個值的話：
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can remove reference here

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer to remove.

content/docs/reference-react-component.md

In particular, `this.props.children` is a special prop, typically defined by the child tags in the JSX expression rather than in the tag itself.
值得注意的是，`this.props.children` 是一個特別的 prop，通常在 JSX 表達式內的 child tag 內所定義，而不是其自身的 tag。
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How should I translate tag here?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keeping original term haha.

chloewlin and others added 27 commits September 12, 2019 15:55
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
616578c 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
4173e7b 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
eab2b72 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
5893074 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
8094ac6 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
3334159 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
c0cea91 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
58d835f 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
2a05b16 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
8c2200f 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
23c6e5d 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
4708a3b 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
b626482 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
8137004 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
9de4064 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
3c8d4e1 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
da4717b 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
c05b2de 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
cb56fd3 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
e96de37 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
3e1212d 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
663def6 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
78c448f 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin @neighborhood999
Update content/docs/reference-react-component.md
3b1aca2 
Co-Authored-By: Peng Jie <dean.leehom@gmail.com>
@chloewlin
Add missing line 150
722781a
@chloewlin
Fix signature
6da45f6
@chloewlin
Remove reference on line 520
8c649b5
@chloewlin chloewlin merged commit ac2169c into reactjs:master Sep 13, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bugtender bugtender bugtender left review comments

@neighborhood999 neighborhood999 neighborhood999 left review comments

@chentsulin chentsulin Awaiting requested review from chentsulin

Assignees
No one assigned
Labels
Completed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@chloewlin @bugtender @neighborhood999