Skip to content

Sync with reactjs.org @ 4133943e #241

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.

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

Merged
merged 3 commits into from
Jul 19, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 0 additions & 7 deletions content/community/support.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,11 @@ Có rất nhiều diễn đàn online là nơi tuyệt vời để thảo luận

Mỗi cộng đồng bao gồm hàng nghìn người dùng React.

<<<<<<< HEAD
* [Cộng đồng React của DEV](https://dev.to/t/react)
* [Cộng đồng React của Hashnode](https://hashnode.com/n/reactjs)
* [Trò chuyện online với Reactiflux](https://discord.gg/reactiflux)
* [Cộng đồng React của Reddit](https://www.reddit.com/r/reactjs/)
* [Cộng đồng React của Spectrum](https://spectrum.chat/react)
=======
* [DEV's React community](https://dev.to/t/react)
* [Hashnode's React community](https://hashnode.com/n/reactjs)
* [Reactiflux online chat](https://discord.gg/reactiflux)
* [Reddit's React community](https://www.reddit.com/r/reactjs/)
>>>>>>> 9b3c3f4e613440baf2e2f1775be65dac8c08ab5f

## Tin tức {#news}

Expand Down
6 changes: 1 addition & 5 deletions content/docs/add-react-to-a-website.md
Original file line number Diff line number Diff line change
Expand Up @@ -149,11 +149,7 @@ return (

Hai đoạn code trên là tương đương nhau. Trong khi **JSX [hoàn toàn là tuỳ chọn](/docs/react-without-jsx.html)**, nhiều người thấy rằng nó khá hữu ích cho việc viết UI code -- cả với React và với các thư viện khác.

<<<<<<< HEAD
Bạn có thể trải nghiệm với JSX bằng cách sử dụng [bộ chuyển đổi online](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3).
=======
You can play with JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.15.7).
>>>>>>> 9b3c3f4e613440baf2e2f1775be65dac8c08ab5f
Bạn có thể trải nghiệm với JSX bằng cách sử dụng [bộ chuyển đổi online](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.15.7).

### Thử nhanh JSX {#quickly-try-jsx}

Expand Down
4 changes: 4 additions & 0 deletions content/docs/hooks-faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -912,9 +912,13 @@ Lưu ý bạn có thể chọn giữa truyền *state* của ứng dụng xuốn

>Lưu ý
>
<<<<<<< HEAD
>Chúng tôi đề xuất [truyền `dispatch` xuống các context](#how-to-avoid-passing-callbacks-down) thay vì các callback độc lập qua prop. Cách tiếp cận bên dưới chỉ đề cập ở đây để đầy đủ và như là một cách hatch.
>
>Cũng lưu ý rằng pattern này có thể gây ra vấn đề trong [chế độ concurrent ](/blog/2018/03/27/update-on-async-rendering.html). Chúng tôi có kế hoạch cung cấp một cách làm khác hữu hiệu trong tương lai, nhưng giải pháp an toàn nhất hiện nay là luôn luôn vô hiệu hóa callback nếu một vài giá trị phụ thuộc vào thay đổi.
=======
>We recommend to [pass `dispatch` down in context](#how-to-avoid-passing-callbacks-down) rather than individual callbacks in props. The approach below is only mentioned here for completeness and as an escape hatch.
>>>>>>> 4133943e718a77f11627888db2f59f6cb7a73403

Trong vài trường hợp các biệt, bạn cần nhớ 1 callback với [`useCallback`](/docs/hooks-reference.html#usecallback) nhưng việc nhớ này không làm việc tốt bởi vì hàm bên trong bị re-create quá nhiều lần. Nếu hàm bạn nhớ là một hàm xử lý sự kiện và không được sử dụng trong quá trình render, bạn có thể sử dụng [ref như một biến instance](#is-there-something-like-instance-variables), và lưu giá trị lần commit sau cùng một cách thủ công:

Expand Down
6 changes: 1 addition & 5 deletions content/docs/thinking-in-react.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ Sau khi kết thúc, bạn sẽ có những thư viện có thể tái sử dụ

Tham khảo [tài liệu React](/docs/) nếu như bạn cần trợ giúp để thực hiện bước này.

### Bản tóm tắt ngắn gọn: Props và State {#a-brief-interlude-props-vs-state}
Xem [React docs](/docs/getting-started.html) nếu bạn cần trợ giúp ở bước này.

Có 2 kiểu "mô hình" dữ liệu trong React: props và state. Hiểu ra sự khác biệt giữa prop và state là điều rất quan trọng; Tham khảo [Những tài liệu từ React](/docs/state-and-lifecycle.html) nếu bạn thực sự không hiểu ra sự khác biệt đó. Xem thêm phần [FAQ: Sự khác nhau giữa prop và state là gì?](/docs/faq-state.html#what-is-the-difference-between-state-and-props)

Expand Down Expand Up @@ -138,11 +138,7 @@ React làm cho luồng dữ liệu trở nên rõ ràng và dễ hiểu hơn ch

Nếu bạn thử gõ hoặc lựa chọn giá trị trong ví dụ hiện thời, bạn sẽ thấy rằng React bỏ qua những giá trị đầu vào này. Điều này sảy ra có chủ ý, vì chúng ta gán `value` prop của `input` luôn luôn bằng với `state` truyền từ `FilterableProductTable`.

<<<<<<< HEAD
Hãy nghĩ xem chúng ta muốn thực hiện điều gì. Chúng ta muốn chắc chắn rằng khi nào người dùng thay đổi form, chúng ta cập nhật state dựa trên dữ liệu đầu vào. Vì những component chỉ nên cập nhật state cuả chúng, `FilterableProductTable` sẽ truyền vào callbacks tới `SearchBar` để kích hoạt mỗi khi dữ liệu cần cập nhật. Chúng ta có thể sử dụng sự kiện `onChange` trong input để nhận được thông báo. Callbacks truyền xuống bởi `FilterableProductTable` sẽ gọi hàm `setState()`, và ứng dụng sẽ được cập nhật.
=======
If you try to type or check the box in the previous version of the example (step 4), you'll see that React ignores your input. This is intentional, as we've set the `value` prop of the `input` to always be equal to the `state` passed in from `FilterableProductTable`.
>>>>>>> 9b3c3f4e613440baf2e2f1775be65dac8c08ab5f

Mặc dù nó nghe phức tạp, nhưng thật ra chỉ cần vài dòng lệnh. Và nó chỉ ra rất rõ ràng luồng dữ liệu được truyền đi trong ứng dụng như thế nào.

Expand Down
7 changes: 1 addition & 6 deletions content/tutorial/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -1045,13 +1045,8 @@ Hãy `map` mảng `history` trong phương thức `render` của Game component:

**[Xem code chi tiết tại bước này](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)**

<<<<<<< HEAD
Với mỗi lịch sử bước đi trong game tic-tac-toe, ta tạo ra một danh sách các `<li>` chứa một `<button>`. Button sẽ có một hàm xử lý `onClick`, hàm này sẽ gọi phương thức `this.jumpTo()`. Hiện tại ta chưa có hàm `jumpTo()`. Đến bước này, bạn sẽ thấy một danh sách các bước đi được hiển thị trên màn hình và cảnh báo trong console của công cụ cho nhà phát triển với thông điệp như sau:
=======
As we iterate through `history` array, `step` variable refers to the current `history` element value, and `move` refers to the current `history` element index. We only interested in `move` here, hence `step` is not getting assigned to anything.

For each move in the tic-tac-toe game's history, we create a list item `<li>` which contains a button `<button>`. The button has a `onClick` handler which calls a method called `this.jumpTo()`. We haven't implemented the `jumpTo()` method yet. For now, we should see a list of the moves that have occurred in the game and a warning in the developer tools console that says:
>>>>>>> 9b3c3f4e613440baf2e2f1775be65dac8c08ab5f
Khi chúng ta loop qua mảng `history`, `step` biến này ánh xạ tới value của element `history`. Và `move` ánh xạ tới `history` element index. Chúng ta chỉ quan tâm tới `move` ở đây, vì thế `step` sẽ không được gán.

> Warning:
> Each child in an array or iterator should have a unique "key" prop. Check the render method of "Game".
Expand Down