You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/blog/2013-06-21-react-v0-3-3.md
+13-9Lines changed: 13 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,21 +3,25 @@ title: "React v0.3.3"
3
3
author: [zpao]
4
4
---
5
5
6
-
We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.
7
-
6
+
Chúng tôi có rất nhiều thứ tuyệt vời sắp ra mắt trong phiên bản v0.4, nhưng trong thời gian chờ đợi, chúng tôi sẽ phát
7
+
hành phiên bản v0.3.3. Bản phát hành này giải quyết một số vấn đề nhỏ mà mọi người đang gặp phải và đơn giản hóa các
8
+
công cụ của chúng tôi để giúp chúng dễ sử dụng hơn.
8
9
9
10
## react-tools {#react-tools}
10
11
11
-
* Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`.
12
-
* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
13
-
* Freeze our esprima dependency.
14
-
12
+
*
13
+
* Nâng cấp Commoner để các câu lệnh `request` không còn được tương đối hóa khi đi qua máy biến áp. Đây là một tính năng
14
+
cần thiết khi xây dựng React, nhưng không tốt cho những người tiêu dùng khác của `binjsx`.
15
+
* Đã nâng cấp các phần phụ thuộc của chúng tôi lên Commoner và Recast để họ sử dụng một thư mục khác cho bộ nhớ cache
16
+
của họ.
17
+
* Đóng băng sự phụthuộc esprima của chúng tôi.
15
18
16
19
## React {#react}
17
20
18
-
*Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode);` will work now.
19
-
21
+
*Cho phép sử dụng lại cùng một nút DOM để hiển thị các thành phần khác nhau. ví
22
+
dụ. `React.renderComponent (<div>, domNode); React.renderComponent (<span>, domNode); `sẽ hoạt động ngay bây giờ.
20
23
21
24
## JSXTransformer {#jsxtransformer}
22
25
23
-
* Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.
26
+
* Đã cải tiến bộ biến áp trong trình duyệt để các tập lệnh được chuyển đổi sẽ thực thi trong phạm vi dự kiến. Cho phép
27
+
các thành phần được xác định và sử dụng từ các tệp riêng biệt.
-[Glitch: React Starter Kit](https://glitch.com/glimmer/post/react-starter-kit) - A free, 5-part video course with interactive code examples that will help you learn React.
11
+
-[Glitch: React Starter Kit](https://glitch.com/glimmer/post/react-starter-kit) - Một khóa học miễn phí về React với 5 phần và các ví dụ đầy đủ ở đây sẽ giúp bạn học React dễ dàng hơn.
12
12
13
-
-[Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Codecademy's introductory course for React.
13
+
-[Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Khóa học giới thiệu React của Codecademy's.
14
14
15
-
-[Egghead.io: Start Learning React](https://egghead.io/courses/start-learning-react) - This series will explore the basic fundamentals of React to get you started.
15
+
-[Egghead.io: Start Learning React](https://egghead.io/courses/start-learning-react) - Loạt bài này sẽ giải thích cho bạn những thứ cơ bản để có thể bắt đầu với React.
16
16
17
-
-[React Crash Course 2018](https://www.youtube.com/watch?v=Ke90Tje7VS0) - A beginner-friendly crash course through the most important React topics.
17
+
-[React Crash Course 2018](https://www.youtube.com/watch?v=Ke90Tje7VS0) - Một khóa học cấp tốc cơ bản đi qua những vấn đề trong React.
18
18
19
-
-[Frontend Armory: React Fundamentals](https://frontarm.com/courses/react-fundamentals/) - Learn React without the buzzwords.
19
+
-[Frontend Armory: React Fundamentals](https://frontarm.com/courses/react-fundamentals/) - Học React mà không có `Class`
20
20
21
-
-[Egghead.io: The Beginner's Guide to ReactJS](https://egghead.io/courses/the-beginner-s-guide-to-react) - Free course for React newbies and those looking to get a better understanding of React fundamentals.
21
+
-[Egghead.io: The Beginner's Guide to ReactJS](https://egghead.io/courses/the-beginner-s-guide-to-react) - Khóa học miễn phí cho người mới bắt đầu giúp họ có cái nhìn tổng quan và hiểu hơn về React Fundamentals.
22
22
23
-
-[Free React Bootcamp](https://tylermcginnis.com/free-react-bootcamp/) - Recordings from three days of a free online React bootcamp.
23
+
-[Free React Bootcamp](https://tylermcginnis.com/free-react-bootcamp/) - Khóa học từ 3 ngày miễn phí React bootcamp.
24
24
25
-
-[Scrimba: Learn React for free](https://scrimba.com/g/glearnreact) - 48 hands-on video tutorials building react apps.
25
+
-[Scrimba: Learn React for free](https://scrimba.com/g/glearnreact) - Video 48 giờ thực hành xây dựng một ứng dụng React.
26
26
27
-
-[University of Helsinki: Full Stack Open MOOC](https://fullstackopen.com/en/) - Learn to build web applications with React. Available in English, Spanish, Chinese and Finnish.
27
+
-[University of Helsinki: Full Stack Open MOOC](https://fullstackopen.com/en/) - Học cách xây dựng một ứng dụng web với React.
28
28
29
29
30
30
## Paid Courses {#paid-courses}
31
31
32
-
-[Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics.
32
+
-[Egghead.io](https://egghead.io/browse/frameworks/react) - Các video hướng dẫn ngắn về React và rất nhiều chủ đề khác.
33
33
34
-
-[Frontend Masters](https://frontendmasters.com/learn/react/) - Video courses on React.
34
+
-[Frontend Masters](https://frontendmasters.com/learn/react/) - Các khóa học về React.
35
35
36
-
-[Fullstack React](https://www.fullstackreact.com/) - The up-to-date, in-depth, complete guide to React and friends.
36
+
-[Fullstack React](https://www.fullstackreact.com/) - Được cập nhật thường xuyên, chuyên xây. đầy đủ về React và các thành phần liên quan.
37
37
38
-
-[Pure React](https://daveceddia.com/pure-react/) - A step-by-step guide to mastering React.
38
+
-[Pure React](https://daveceddia.com/pure-react/) - Từng bước để thành thạo React.
39
39
40
-
-[React for Beginners](https://reactforbeginners.com/) - Learn React in just a couple of afternoons.
40
+
-[React for Beginners](https://reactforbeginners.com/) - Học React trong vài buổi chiều.
41
41
42
-
-[React for Designers](https://designcode.io/react) - A 6-hour React course for designers, by designers.
42
+
-[React for Designers](https://designcode.io/react) - Khóa học 6 giờ dành cho các nhà thiết kế, bởi các nhà thiết kế.
43
43
44
-
-[React Essentials for Designers](https://learnreact.design) - React courses tailored for designers: the fundamentals, capabilities, limitations and how they relate to design.
44
+
-[React Essentials for Designers](https://learnreact.design) - Các khóa học về React phù hợp với các nhà thiết kế: các nguyên tắc cơ bản, khả năng, giới hạn và cách chúng liên quan đến thiết kế.
45
45
46
-
-[Essential React](https://learnreact.com/lessons/2018-essential-react-1-overview) - A crash course for doers, moving fast from "Hello World" to advanced component composition.
46
+
-[Essential React](https://learnreact.com/lessons/2018-essential-react-1-overview) - Một khóa học cấp tốc dành cho người làm, chuyển nhanh từ "Hello World" sang thành phần cấu thành nâng cao.
47
47
48
-
-[React Training: Advanced React.js](https://courses.reacttraining.com/p/advanced-react) - Take your React skills to the next level.
48
+
-[React Training: Advanced React.js](https://courses.reacttraining.com/p/advanced-react) - Nâng cao kỹ năng React của bạn lên cấp độ tiếp theo.
49
49
50
-
-[Tyler McGinnis](https://tylermcginnis.com/courses) - Tyler McGinnis provides access to his courses for a monthly fee. Courses include "React Fundamentals" and "Universal React".
50
+
-[Tyler McGinnis](https://tylermcginnis.com/courses) - Tyler McGinnis cung cấp quyền truy cập vào các khóa học của mình với một khoản phí hàng tháng. Các khóa học bao gồm "React Fundamentals" và "Universal React".
51
51
52
-
-[Mastering React](https://codewithmosh.com/p/mastering-react/) - Build professional interactive apps with React.
52
+
-[Mastering React](https://codewithmosh.com/p/mastering-react/) - Xây dựng các ứng dụng tương tác chuyên nghiệp với React.
53
53
54
-
-[React Tutorial](https://react-tutorial.app) - Learn React step by step in an interactive environment with flashcards.
54
+
-[React Tutorial](https://react-tutorial.app) - Học React từng bước trong môi trường tương tác với Flashcards.
55
55
56
-
-[Road to React](https://www.roadtoreact.com/) - Your journey to master React in JavaScript.
56
+
-[Road to React](https://www.roadtoreact.com/) - Hành trình của bạn để thành thạo React trong JavaScript.
57
57
58
-
-[Epic React](https://epicreact.dev/) - Confidently Ship Well-Architected Production Ready React Apps Like a Pro
58
+
-[Epic React](https://epicreact.dev/) - Tự tin, sẵn sàng với React như một chuyên gia
Copy file name to clipboardExpand all lines: content/docs/addons-perf.md
+54-33Lines changed: 54 additions & 33 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,10 @@ category: Add-Ons
8
8
9
9
> Note:
10
10
>
11
-
> As of React 16, `react-addons-perf` is not supported. Please use [your browser's profiling tools](/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab) to get insight into which components re-render.
11
+
> Kể từ React 16, `react-addons-perf` không được hỗ trợ nữa. Hãy sử
12
+
>
13
+
dụng [your browser's profiling tools](/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab)
14
+
> để có thông tin chi tiết từ các `components re-render`.
12
15
13
16
**Importing**
14
17
@@ -17,50 +20,58 @@ import Perf from 'react-addons-perf'; // ES6
17
20
var Perf =require('react-addons-perf'); // ES5 with npm
18
21
```
19
22
23
+
## Tổng quan {#overview}
20
24
21
-
## Overview {#overview}
22
-
23
-
React is usually quite fast out of the box. However, in situations where you need to squeeze every ounce of performance out of your app, it provides a [shouldComponentUpdate()](/docs/react-component.html#shouldcomponentupdate) method where you can add optimization hints to React's diff algorithm.
25
+
React thường diễn ra khá nhanh. Tuy nhiên, trong những tình huống bạn cần tận dụng từng chút hiệu suất của ứng dụng, nó
26
+
sẽ cung cấp phương pháp [shouldComponentUpdate()](docsreact-component.htmlshouldcomponentupdate) nơi bạn có thể thêm
27
+
các gợi ý tối ưu hóa cho thuật toán khác biệt của React.
24
28
25
-
In addition to giving you an overview of your app's overall performance, `Perf` is a profiling tool that tells you exactly where you need to put these methods.
29
+
Ngoài việc cung cấp cho bạn cái nhìn tổng quan về hiệu suất tổng thể của ứng dụng, `Perf` là một công cụ lập hồ sơ cho
30
+
bạn biết chính xác nơi bạn cần đặt các phương pháp này.
26
31
27
-
See these articles for an introduction to React performance tooling:
32
+
Xem các bài viết này để được giới thiệu về công cụ hiệu suất React:
28
33
29
-
-["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c)
30
-
-["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react-e03013e53285)
31
-
-["A Deep Dive into React Perf Debugging"](https://benchling.engineering/a-deep-dive-into-react-perf-debugging-fd2063f5a667)
34
+
-["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c)
35
+
-["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react-e03013e53285)
36
+
-["A Deep Dive into React Perf Debugging"](https://benchling.engineering/a-deep-dive-into-react-perf-debugging-fd2063f5a667)
32
37
33
-
### Development vs. Production Builds {#development-vs-production-builds}
38
+
### Môi trường Development và môi trường Production Builds {#development-vs-production-builds}
34
39
35
-
If you're benchmarking or seeing performance problems in your React apps, make sure you're testing with the [minified production build](/downloads.html). The development build includes extra warnings that are helpful when building your apps, but it is slower due to the extra bookkeeping it does.
40
+
Nếu bạn đang đo điểm chuẩn hoặc thấy các vấn đề về hiệu suất trong các ứng dụng React của mình, hãy đảm bảo rằng bạn
41
+
đang thử nghiệm với [bản dựng sản xuất thu nhỏ](download.html). Bản dựng phát triển bao gồm các cảnh báo bổ sung hữu
42
+
ích khi xây dựng ứng dụng của bạn, nhưng nó chậm hơn do có thêm sổ sách kế toán.
36
43
37
-
However, the perf tools described on this page only work when using the development build of React. Therefore, the profiler only serves to indicate the _relatively_ expensive parts of your app.
44
+
Tuy nhiên, các công cụ hoàn hảo được mô tả trên trang này chỉ hoạt động khi sử dụng bản dựng phát triển của React. Do
45
+
đó, trình mô tả chỉ dùng để chỉ ra các phần _relatively_ đắt tiền trong ứng dụng của bạn.
38
46
39
-
### Using Perf {#using-perf}
47
+
### Sử dụng Perf {#using-perf}
40
48
41
-
The `Perf` object can be used with React in development mode only. You should not include this bundle when building your app for production.
49
+
Đối tượng `Perf` chỉ có thể được sử dụng với React trong chế độ phát triển. Bạn không nên bao gồm gói này khi xây dựng
50
+
ứng dụng của mình để sản xuất.
42
51
43
52
#### Getting Measurements {#getting-measurements}
44
53
45
-
-[`start()`](#start)
46
-
-[`stop()`](#stop)
47
-
-[`getLastMeasurements()`](#getlastmeasurements)
54
+
-[`start()`](#start)
55
+
-[`stop()`](#stop)
56
+
-[`getLastMeasurements()`](#getlastmeasurements)
48
57
49
58
#### Printing Results {#printing-results}
50
59
51
-
The following methods use the measurements returned by [`Perf.getLastMeasurements()`](#getlastmeasurements) to pretty-print the result.
60
+
Các phương pháp sau sử dụng các phép đo được trả về bởi [`Perf.getLastMeasurements ()`](getlastmeasurements) để in kết
61
+
quả.
52
62
53
-
-[`printInclusive()`](#printinclusive)
54
-
-[`printExclusive()`](#printexclusive)
55
-
-[`printWasted()`](#printwasted)
56
-
-[`printOperations()`](#printoperations)
57
-
-[`printDOM()`](#printdom)
63
+
-[`printInclusive()`](#printinclusive)
64
+
-[`printExclusive()`](#printexclusive)
65
+
-[`printWasted()`](#printwasted)
66
+
-[`printOperations()`](#printoperations)
67
+
-[`printDOM()`](#printdom)
58
68
59
69
* * *
60
70
61
71
## Reference {#reference}
62
72
63
73
### `start()` {#start}
74
+
64
75
### `stop()` {#stop}
65
76
66
77
```javascript
@@ -69,9 +80,10 @@ Perf.start()
69
80
Perf.stop()
70
81
```
71
82
72
-
Start/stop the measurement. The React operations in-between are recorded for analyses below. Operations that took an insignificant amount of time are ignored.
83
+
Start/stop đo lường. Các hoạt động React ở giữa được ghi lại cho các phân tích bên dưới. Các thao tác chiếm một lượng
84
+
thời gian không đáng kể sẽ bị bỏ qua.
73
85
74
-
After stopping, you will need[`Perf.getLastMeasurements()`](#getlastmeasurements)to get the measurements.
86
+
Sau khi dừng, bạn sẽ cần[`Perf.getLastMeasurements()`](#getlastmeasurements)để lấy các phép đo.
75
87
76
88
* * *
77
89
@@ -81,11 +93,14 @@ After stopping, you will need [`Perf.getLastMeasurements()`](#getlastmeasurement
81
93
Perf.getLastMeasurements()
82
94
```
83
95
84
-
Get the opaque data structure describing measurements from the last start-stop session. You can save it and pass it to the other print methods in [`Perf`](#printing-results) to analyze past measurements.
96
+
Nhận cấu trúc dữ liệu không rõ ràng mô tả các phép đo từ phiên khởi động cuối cùng. Bạn có thể lưu nó và chuyển nó cho
97
+
các phương pháp in khác trong [`Perf`](#printing-results) để phân tích các phép đo trong quá khứ.
85
98
86
-
> Note
99
+
> Ghi chú
87
100
>
88
-
> Don't rely on the exact format of the return value because it may change in minor releases. We will update the documentation if the return value format becomes a supported part of the public API.
101
+
> Đừng dựa vào định dạng chính xác của giá trị trả về vì nó có thể thay đổi trong các bản phát hành nhỏ. Chúng tôi sẽ
102
+
> cập nhật tài liệu
103
+
> nếu định dạng giá trị trả về trở thành một phần được hỗ trợ của API công khai.
89
104
90
105
* * *
91
106
@@ -95,7 +110,8 @@ Get the opaque data structure describing measurements from the last start-stop s
95
110
Perf.printInclusive(measurements)
96
111
```
97
112
98
-
Prints the overall time taken. When no arguments are passed, `printInclusive` defaults to all the measurements from the last recording. This prints a nicely formatted table in the console, like so:
113
+
In tổng thời gian đã thực hiện. Khi không có đối số nào được chuyển, `printInclusive` mặc định cho tất cả các phép đo từ
114
+
bản ghi cuối cùng. Thao tác này sẽ in ra một bảng được định dạng độc đáo trong bảng điều khiển, như sau:
99
115
100
116

101
117
@@ -107,7 +123,9 @@ Prints the overall time taken. When no arguments are passed, `printInclusive` de
107
123
Perf.printExclusive(measurements)
108
124
```
109
125
110
-
"Exclusive" times don't include the times taken to mount the components: processing props, calling `componentWillMount` and `componentDidMount`, etc.
126
+
Thời gian "Exclusive" không bao gồm thời gian thực hiện để gắn kết các thành phần: xử lý đạo cụ,
Prints the underlying DOM manipulations, e.g. "set innerHTML" and "remove".
155
+
In các thao tác DOM cơ bản, ví dụ: "set innerHTML" và "remove".
137
156
138
157

139
158
@@ -145,4 +164,6 @@ Prints the underlying DOM manipulations, e.g. "set innerHTML" and "remove".
145
164
Perf.printDOM(measurements)
146
165
```
147
166
148
-
This method has been renamed to [`printOperations()`](#printoperations). Currently `printDOM()` still exists as an alias but it prints a deprecation warning and will eventually be removed.
167
+
Phương thức này đã được đổi tên thành [`printOperations()`](#printoperations). Hiện tại `printDOM()` vẫn tồn tại
168
+
dưới dạng bí danh
169
+
nhưng nó sẽ in một cảnh báo không dùng nữa và cuối cùng sẽ bị xóa.
0 commit comments