diff --git a/content/blog/2013-06-21-react-v0-3-3.md b/content/blog/2013-06-21-react-v0-3-3.md index 31f150de2..9ca92d4ff 100644 --- a/content/blog/2013-06-21-react-v0-3-3.md +++ b/content/blog/2013-06-21-react-v0-3-3.md @@ -3,21 +3,25 @@ title: "React v0.3.3" author: [zpao] --- -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. - +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 +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 +công cụ của chúng tôi để giúp chúng dễ sử dụng hơn. ## react-tools {#react-tools} -* 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`. -* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache. -* Freeze our esprima dependency. - +* +* 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 + 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`. +* Đã 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 + của họ. +* Đóng băng sự phụthuộc esprima của chúng tôi. ## React {#react} -* Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(
, domNode); React.renderComponent(, domNode);` will work now. - +* 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í + dụ. `React.renderComponent (
, domNode); React.renderComponent (, domNode); `sẽ hoạt động ngay bây giờ. ## JSXTransformer {#jsxtransformer} -* 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. +* Đã 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 + các thành phần được xác định và sử dụng từ các tệp riêng biệt. diff --git a/content/community/courses.md b/content/community/courses.md index 9884bfe78..8e47c6781 100644 --- a/content/community/courses.md +++ b/content/community/courses.md @@ -8,51 +8,51 @@ permalink: community/courses.html ## Free Courses {#free-courses} -- [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. +- [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. -- [Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Codecademy's introductory course for React. +- [Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Khóa học giới thiệu React của Codecademy's. -- [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. +- [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. -- [React Crash Course 2018](https://www.youtube.com/watch?v=Ke90Tje7VS0) - A beginner-friendly crash course through the most important React topics. +- [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. -- [Frontend Armory: React Fundamentals](https://frontarm.com/courses/react-fundamentals/) - Learn React without the buzzwords. +- [Frontend Armory: React Fundamentals](https://frontarm.com/courses/react-fundamentals/) - Học React mà không có `Class` -- [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. +- [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. -- [Free React Bootcamp](https://tylermcginnis.com/free-react-bootcamp/) - Recordings from three days of a free online React bootcamp. +- [Free React Bootcamp](https://tylermcginnis.com/free-react-bootcamp/) - Khóa học từ 3 ngày miễn phí React bootcamp. -- [Scrimba: Learn React for free](https://scrimba.com/g/glearnreact) - 48 hands-on video tutorials building react apps. +- [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. -- [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. +- [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. ## Paid Courses {#paid-courses} -- [Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics. +- [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. -- [Frontend Masters](https://frontendmasters.com/learn/react/) - Video courses on React. +- [Frontend Masters](https://frontendmasters.com/learn/react/) - Các khóa học về React. -- [Fullstack React](https://www.fullstackreact.com/) - The up-to-date, in-depth, complete guide to React and friends. +- [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. -- [Pure React](https://daveceddia.com/pure-react/) - A step-by-step guide to mastering React. +- [Pure React](https://daveceddia.com/pure-react/) - Từng bước để thành thạo React. -- [React for Beginners](https://reactforbeginners.com/) - Learn React in just a couple of afternoons. +- [React for Beginners](https://reactforbeginners.com/) - Học React trong vài buổi chiều. -- [React for Designers](https://designcode.io/react) - A 6-hour React course for designers, by designers. +- [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ế. -- [React Essentials for Designers](https://learnreact.design) - React courses tailored for designers: the fundamentals, capabilities, limitations and how they relate to design. +- [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ế. -- [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. +- [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. -- [React Training: Advanced React.js](https://courses.reacttraining.com/p/advanced-react) - Take your React skills to the next level. +- [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. -- [Tyler McGinnis](https://tylermcginnis.com/courses) - Tyler McGinnis provides access to his courses for a monthly fee. Courses include "React Fundamentals" and "Universal React". +- [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". -- [Mastering React](https://codewithmosh.com/p/mastering-react/) - Build professional interactive apps with React. +- [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. -- [React Tutorial](https://react-tutorial.app) - Learn React step by step in an interactive environment with flashcards. +- [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. -- [Road to React](https://www.roadtoreact.com/) - Your journey to master React in JavaScript. +- [Road to React](https://www.roadtoreact.com/) - Hành trình của bạn để thành thạo React trong JavaScript. -- [Epic React](https://epicreact.dev/) - Confidently Ship Well-Architected Production Ready React Apps Like a Pro +- [Epic React](https://epicreact.dev/) - Tự tin, sẵn sàng với React như một chuyên gia diff --git a/content/docs/addons-perf.md b/content/docs/addons-perf.md index 221ce2e86..7cb404523 100644 --- a/content/docs/addons-perf.md +++ b/content/docs/addons-perf.md @@ -8,7 +8,10 @@ category: Add-Ons > Note: > -> 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. +> Kể từ React 16, `react-addons-perf` không được hỗ trợ nữa. Hãy sử +> +dụng [your browser's profiling tools](/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab) +> để có thông tin chi tiết từ các `components re-render`. **Importing** @@ -17,50 +20,58 @@ import Perf from 'react-addons-perf'; // ES6 var Perf = require('react-addons-perf'); // ES5 with npm ``` +## Tổng quan {#overview} -## Overview {#overview} - -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. +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ó +sẽ cung cấp phương pháp [shouldComponentUpdate()](docsreact-component.htmlshouldcomponentupdate) nơi bạn có thể thêm +các gợi ý tối ưu hóa cho thuật toán khác biệt của React. -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. +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 +bạn biết chính xác nơi bạn cần đặt các phương pháp này. -See these articles for an introduction to React performance tooling: +Xem các bài viết này để được giới thiệu về công cụ hiệu suất React: - - ["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c) - - ["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react-e03013e53285) - - ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/a-deep-dive-into-react-perf-debugging-fd2063f5a667) +- ["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c) +- ["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react-e03013e53285) +- ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/a-deep-dive-into-react-perf-debugging-fd2063f5a667) -### Development vs. Production Builds {#development-vs-production-builds} +### Môi trường Development và môi trường Production Builds {#development-vs-production-builds} -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. +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 +đ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 +í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. -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. +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 +đó, 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. -### Using Perf {#using-perf} +### Sử dụng Perf {#using-perf} -The `Perf` object can be used with React in development mode only. You should not include this bundle when building your app for production. +Đố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 +ứng dụng của mình để sản xuất. #### Getting Measurements {#getting-measurements} - - [`start()`](#start) - - [`stop()`](#stop) - - [`getLastMeasurements()`](#getlastmeasurements) +- [`start()`](#start) +- [`stop()`](#stop) +- [`getLastMeasurements()`](#getlastmeasurements) #### Printing Results {#printing-results} -The following methods use the measurements returned by [`Perf.getLastMeasurements()`](#getlastmeasurements) to pretty-print the result. +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 +quả. - - [`printInclusive()`](#printinclusive) - - [`printExclusive()`](#printexclusive) - - [`printWasted()`](#printwasted) - - [`printOperations()`](#printoperations) - - [`printDOM()`](#printdom) +- [`printInclusive()`](#printinclusive) +- [`printExclusive()`](#printexclusive) +- [`printWasted()`](#printwasted) +- [`printOperations()`](#printoperations) +- [`printDOM()`](#printdom) * * * ## Reference {#reference} ### `start()` {#start} + ### `stop()` {#stop} ```javascript @@ -69,9 +80,10 @@ Perf.start() Perf.stop() ``` -Start/stop the measurement. The React operations in-between are recorded for analyses below. Operations that took an insignificant amount of time are ignored. +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 +thời gian không đáng kể sẽ bị bỏ qua. -After stopping, you will need [`Perf.getLastMeasurements()`](#getlastmeasurements) to get the measurements. +Sau khi dừng, bạn sẽ cần [`Perf.getLastMeasurements()`](#getlastmeasurements) để lấy các phép đo. * * * @@ -81,11 +93,14 @@ After stopping, you will need [`Perf.getLastMeasurements()`](#getlastmeasurement Perf.getLastMeasurements() ``` -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. +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 +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ứ. -> Note +> Ghi chú > -> 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. +> Đừ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ẽ +> cập nhật tài liệu +> 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. * * * @@ -95,7 +110,8 @@ Get the opaque data structure describing measurements from the last start-stop s Perf.printInclusive(measurements) ``` -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: +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ừ +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: ![](../images/docs/perf-inclusive.png) @@ -107,7 +123,9 @@ Prints the overall time taken. When no arguments are passed, `printInclusive` de Perf.printExclusive(measurements) ``` -"Exclusive" times don't include the times taken to mount the components: processing props, calling `componentWillMount` and `componentDidMount`, etc. +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ụ, +gọi `componentWillMount` +và `componentDidMount`, v.v. ![](../images/docs/perf-exclusive.png) @@ -121,7 +139,8 @@ Perf.printWasted(measurements) **The most useful part of the profiler**. -"Wasted" time is spent on components that didn't actually render anything, e.g. the render stayed the same, so the DOM wasn't touched. +"Wasted" time is spent on components that didn't actually render anything, e.g. the render stayed the same, so the DOM +wasn't touched. ![](../images/docs/perf-wasted.png) @@ -133,7 +152,7 @@ Perf.printWasted(measurements) Perf.printOperations(measurements) ``` -Prints the underlying DOM manipulations, e.g. "set innerHTML" and "remove". +In các thao tác DOM cơ bản, ví dụ: "set innerHTML" và "remove". ![](../images/docs/perf-dom.png) @@ -145,4 +164,6 @@ Prints the underlying DOM manipulations, e.g. "set innerHTML" and "remove". Perf.printDOM(measurements) ``` -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. +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 +dưới dạng bí danh +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. diff --git a/content/docs/addons-update.md b/content/docs/addons-update.md index 0e0241074..17835b289 100644 --- a/content/docs/addons-update.md +++ b/content/docs/addons-update.md @@ -19,13 +19,21 @@ var update = require('react-addons-update'); // ES5 with npm ## Overview {#overview} -React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) method to significantly speed up your app. - -Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](https://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js. +React cho phép bạn sử dụng bất kỳ kiểu quản lý dữ liệu nào bạn muốn, bao gồm cả đột biến. Tuy nhiên, nếu bạn có thể sử +dụng dữ liệu không thay đổi trong các phần quan trọng về hiệu suất của ứng dụng, bạn có thể dễ dàng triển khai phương +thức [`shouldComponentUpdate()'](/docs/react-component.html#shouldcomponentupdate) nhanh chóng để tăng tốc đáng kể ứng +dụng của bạn. + +Xử lý dữ liệu bất biến trong JavaScript khó hơn so với các ngôn ngữ được thiết kế cho nó, +như [Clojure](https://clojure.org/). Tuy nhiên, chúng tôi đã cung cấp một trình trợ giúp bất biến đơn giản, `update () ' +, giúp xử lý loại dữ +liệu này dễ dàng hơn nhiều mà không làm thay đổi cơ bản cách dữ liệu của bạn được thể hiện. Bạn cũng có thể xem +qua [Immutable-js](https://facebook.github.io/immutable-js/docs/) và +phần [Advanced Performance](/docs/advanced-performance.html) để biết thêm chi tiết về Immutable-js. ### The Main Idea {#the-main-idea} -If you mutate data like this: +Nếu bạn thay đổi dữ liệu như thế này: ```js myData.x.y.z = 7; @@ -33,7 +41,9 @@ myData.x.y.z = 7; myData.a.b.push(9); ``` -You have no way of determining which data has changed since the previous copy has been overwritten. Instead, you need to create a new copy of `myData` and change only the parts of it that need to be changed. Then you can compare the old copy of `myData` with the new one in `shouldComponentUpdate()` using triple-equals: +Bạn không có cách nào xác định dữ liệu nào đã thay đổi kể từ khi bản sao trước đó đã bị ghi đè. Thay vào đó, bạn cần tạo +một bản sao mới của `myData` và chỉ thay đổi những phần cần thay đổi của nó. Sau đó, bạn có thể so sánh bản sao cũ +của `myData` với bản sao mới trong` shouldComponentUpdate()`bằng cách sử dụng triple-equals: ```js const newData = deepCopy(myData); @@ -41,7 +51,9 @@ newData.x.y.z = 7; newData.a.b.push(9); ``` -Unfortunately, deep copies are expensive, and sometimes impossible. You can alleviate this by only copying objects that need to be changed and by reusing the objects that haven't changed. Unfortunately, in today's JavaScript this can be cumbersome: +Thật không may, các bản sao sâu rất đắt, và đôi khi là không thể. Bạn có thể giảm bớt điều này bằng cách chỉ sao chép +các đối tượng cần thay đổi và sử dụng lại các đối tượng chưa thay đổi. Thật không may, trong JavaScript ngày nay, điều +này có thể phức tạp: ```js const newData = extend(myData, { @@ -52,33 +64,38 @@ const newData = extend(myData, { }); ``` -While this is fairly performant (since it only makes a shallow copy of `log n` objects and reuses the rest), it's a big pain to write. Look at all the repetition! This is not only annoying, but also provides a large surface area for bugs. +Mặc dù điều này khá hiệu quả (vì nó chỉ tạo một bản sao nông của các đối tượng `log n` và sử dụng lại phần còn lại), +nhưng đó là một vấn đề lớn khi viết. Nhìn vào tất cả các sự lặp lại! Điều này không chỉ gây khó chịu mà còn cung cấp một +diện tích bề mặt lớn cho các lỗi. ## `update()` {#update} -`update()` provides simple syntactic sugar around this pattern to make writing this code easier. This code becomes: +`update()` cung cấp đường cú pháp đơn giản xung quanh mẫu này để giúp việc viết mã này dễ dàng hơn. Mã này trở thành: ```js import update from 'react-addons-update'; const newData = update(myData, { + s x: {y: {z: {$set: 7}}}, a: {b: {$push: [9]}} }); ``` -While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](https://docs.mongodb.com/manual/crud/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version. +Mặc dù cú pháp phải mất một chút thời gian để làm quen (mặc dù nó được lấy cảm hứng +từ [MongoDB's query language](https://docs.mongodb.com/manual/crud/#query) không có sự dư thừa, nó có thể phân tích tĩnh +và không phải gõ nhiều hơn phiên bản đột biến. -The `$`-prefixed keys are called *commands*. The data structure they are "mutating" is called the *target*. +Các khóa `$` -prefixed được gọi là *commands*. Cấu trúc dữ liệu mà chúng đang "mutating" được gọi là *target*. ## Available Commands {#available-commands} - * `{$push: array}` `push()` all the items in `array` on the target. - * `{$unshift: array}` `unshift()` all the items in `array` on the target. - * `{$splice: array of arrays}` for each item in `arrays` call `splice()` on the target with the parameters provided by the item. - * `{$set: any}` replace the target entirely. - * `{$merge: object}` merge the keys of `object` with the target. - * `{$apply: function}` passes in the current value to the function and updates it with the new returned value. +* `{push: array}` `push ()` tất cả các mục trong `mảng` trên đích. +* `{unshift: array}` `unshift ()` tất cả các mục trong `mảng` trên đích. +* `{splice: mảng của mảng}` cho mỗi mục trong `mảng` gọi` splice () `trên đích với các tham số được cung cấp bởi mục. +* `{set: any}` thay thế hoàn toàn mục tiêu. +* `{merge: object}` hợp nhất các khóa của `object` với đích. +* `{apply: function}` chuyển giá trị hiện tại vào hàm và cập nhật nó với giá trị trả về mới. ## Examples {#examples} @@ -88,7 +105,8 @@ The `$`-prefixed keys are called *commands*. The data structure they are "mutati const initialArray = [1, 2, 3]; const newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4] ``` -`initialArray` is still `[1, 2, 3]`. + +`initialArray` vẫn còn `[1, 2, 3]`. ### Nested collections {#nested-collections} @@ -97,13 +115,21 @@ const collection = [1, 2, {a: [12, 17, 15]}]; const newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}}); // => [1, 2, {a: [12, 13, 14, 15]}] ``` -This accesses `collection`'s index `2`, key `a`, and does a splice of one item starting from index `1` (to remove `17`) while inserting `13` and `14`. + +Thao tác này truy cập chỉ mục `2`, khóa` a` của `bộ sưu tập` và thực hiện ghép nối một mục bắt đầu từ chỉ mục` 1` (để +loại bỏ `17`) trong khi chèn` 13` và `14`. ### Updating a value based on its current one {#updating-a-value-based-on-its-current-one} ```js const obj = {a: 5, b: 3}; -const newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}}); +const newObj = update(obj, { + b: { + $apply: function(x) { + return x * 2; + } + } +}); // => {a: 5, b: 6} // This is equivalent, but gets verbose for deeply nested collections: const newObj2 = update(obj, {b: {$set: obj.b * 2}}); diff --git a/content/docs/cdn-links.md b/content/docs/cdn-links.md index 5ad0181bd..9f2b680c9 100644 --- a/content/docs/cdn-links.md +++ b/content/docs/cdn-links.md @@ -9,24 +9,29 @@ next: release-channels.html Cả React và ReactDOM đều có sẵn thông qua CDN. ```html - - + + + ``` -Các phiên bản trên chỉ dành cho việc phát triển, và không thích hợp để tạo ra sản phẩm. Các phiên bản sản xuất thu nhỏ và tối ưu hóa của React có sẵn tại: +Các phiên bản trên chỉ dành cho việc phát triển, và không thích hợp để tạo ra sản phẩm. Các phiên bản sản xuất thu nhỏ +và tối ưu hóa của React có sẵn tại: ```html - - + + + ``` Để tải một phiên bản cụ thể của `react` và `react-dom`, thay `17` bằng số phiên bản. ### Tại sao là thuộc tính `crossorigin`? {#why-the-crossorigin-attribute} -Nếu bạn dùng React từ CDN, chúng tôi khuyên bạn nên giữ tập thuộc tính [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes): +Nếu bạn dùng React từ CDN, chúng tôi khuyên bạn nên giữ tập thuộc +tính [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes): ```html + ``` @@ -34,4 +39,5 @@ Chúng tôi cũng khuyên bạn nên xác định rằng CDN bạn đang sử d ![Access-Control-Allow-Origin: *](../images/docs/cdn-cors-header.png) -Điều này cho phép tốt hơn [error handling experience](/blog/2017/07/26/error-handling-in-react-16.html) trong React 16 và sau này. +Điều này cho phép tốt hơn [error handling experience](/blog/2017/07/26/error-handling-in-react-16.html) trong React 16 +và sau này. diff --git a/content/docs/error-boundaries.md b/content/docs/error-boundaries.md index ef9a6d58f..93ca1e7e7 100644 --- a/content/docs/error-boundaries.md +++ b/content/docs/error-boundaries.md @@ -4,25 +4,34 @@ title: Error Boundaries permalink: docs/error-boundaries.html --- -In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to [emit](https://github.com/facebook/react/issues/4026) [cryptic](https://github.com/facebook/react/issues/6895) [errors](https://github.com/facebook/react/issues/8579) on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them. - +Trước đây, các lỗi JavaScript bên trong các thành phần được sử dụng để làm hỏng trạng thái bên trong của React và khiến +nó [emit](https://github.com/facebook/react/issues/4026) [cryptic](https://github.com/facebook/react/issues/6895) [errors](https://github.com/facebook/react/issues/8579) +vào lần hiển thị tiếp theo. Những lỗi này luôn do lỗi trước đó trong mã ứng dụng gây ra, nhưng React không cung cấp cách +xử lý chúng một cách linh hoạt trong các thành phần và không thể khôi phục chúng. ## Introducing Error Boundaries {#introducing-error-boundaries} -A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”. +Lỗi JavaScript trong một phần của giao diện người dùng sẽ không làm hỏng toàn bộ ứng dụng. Để giải quyết vấn đề này cho +người dùng React, React 16 giới thiệu một khái niệm mới về “error boundary”. -Error boundaries are React components that **catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI** instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. +Ranh giới lỗi là các thành phần React **bắt lỗi JavaScript ở bất kỳ đâu trong cây thành phần con của chúng, ghi lại +các lỗi đó và hiển thị giao diện người dùng dự phòng** thay vì cây thành phần bị rơi. Các ranh giới lỗi bắt lỗi trong +quá trình kết xuất, trong các phương thức vòng đời và trong các hàm tạo của toàn bộ cây bên dưới chúng. > Note > -> Error boundaries do **not** catch errors for: +> Ranh giới lỗi *không* bắt lỗi đối với: > -> * Event handlers ([learn more](#how-about-event-handlers)) -> * Asynchronous code (e.g. `setTimeout` or `requestAnimationFrame` callbacks) +> * Trình xử lý sự kiện ([learn more](#how-about-event-handlers)) +> * Code bất đồng bộ (e.g. `setTimeout` or `requestAnimationFrame` callbacks) > * Server side rendering -> * Errors thrown in the error boundary itself (rather than its children) +> * Lỗi được tạo ra trong chính ranh giới lỗi (chứ không phải con của nó) -A class component becomes an error boundary if it defines either (or both) of the lifecycle methods [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) or [`componentDidCatch()`](/docs/react-component.html#componentdidcatch). Use `static getDerivedStateFromError()` to render a fallback UI after an error has been thrown. Use `componentDidCatch()` to log error information. +Một thành phần lớp trở thành một ranh giới lỗi nếu nó xác định một trong hai (hoặc cả hai) phương thức vòng +đời [`static getDerivedStateFromError()`](/docs/react-component.html#static-getderivedstatefromerror) +hoặc [`componentDidCatch()`](/docs/react-component.html#componentdidcatch). Sử dụng `static getDerivedStateFromError()` +để hiển thị một giao diện người dùng dự phòng sau khi một lỗi đã được tạo ra. Để `componentDidCatch()` ghi lỗi +information. ```js{7-10,12-15,18-21} class ErrorBoundary extends React.Component { @@ -52,61 +61,83 @@ class ErrorBoundary extends React.Component { } ``` -Then you can use it as a regular component: +Sau đó, bạn có thể sử dụng nó như một thành phần thông thường: ```js - + ``` -Error boundaries work like a JavaScript `catch {}` block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application. +Các ranh giới lỗi hoạt động giống như một khối JavaScript `catch {}`, nhưng đối với các thành phần. Chỉ các thành phần +lớp mới có thể là ranh giới lỗi. Trong thực tế, hầu hết thời gian bạn sẽ muốn khai báo một thành phần ranh giới lỗi một +lần và sử dụng nó trong toàn bộ ứng dụng của mình. -Note that **error boundaries only catch errors in the components below them in the tree**. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how catch {} block works in JavaScript. +Lưu ý rằng **ranh giới lỗi chỉ bắt lỗi trong các thành phần bên dưới chúng trong cây**. Ranh giới lỗi không thể tự bắt +lỗi. +Nếu một ranh giới lỗi không cố gắng hiển thị thông báo lỗi, lỗi sẽ lan truyền đến ranh giới lỗi gần nhất phía trên nó. +Điều này cũng tương tự như cách khối catch {} hoạt động trong JavaScript. ## Live Demo {#live-demo} -Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) with [React 16](/blog/2017/09/26/react-v16.0.html). - +Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) +with [React 16](/blog/2017/09/26/react-v16.0.html). ## Where to Place Error Boundaries {#where-to-place-error-boundaries} -The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like how server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application. - +Mức độ chi tiết của ranh giới lỗi là tùy thuộc vào bạn. Bạn có thể bao bọc các thành phần tuyến cấp cao nhất để hiển thị +thông báo “Đã xảy ra sự cố” cho người dùng, giống như cách các khuôn khổ phía máy chủ thường xử lý các sự cố. Bạn cũng +có thể bao bọc các widget riêng lẻ trong một ranh giới lỗi để bảo vệ chúng khỏi làm hỏng phần còn lại của ứng dụng. ## New Behavior for Uncaught Errors {#new-behavior-for-uncaught-errors} -This change has an important implication. **As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.** +Sự thay đổi này có một hàm ý quan trọng. **Kể từ React 16, các lỗi không nằm trong bất kỳ ranh giới lỗi nào sẽ dẫn đến +việc ngắt kết nối toàn bộ cây thành phần React.** -We debated this decision, but in our experience it is worse to leave corrupted UI in place than to completely remove it. For example, in a product like Messenger leaving the broken UI visible could lead to somebody sending a message to the wrong person. Similarly, it is worse for a payments app to display a wrong amount than to render nothing. +Chúng tôi đã tranh luận về quyết định này, nhưng theo kinh nghiệm của chúng tôi, việc để lại giao diện người dùng bị +hỏng tại chỗ còn tệ hơn là xóa hoàn toàn. Ví dụ: trong một sản phẩm như Messenger, việc hiển thị giao diện người dùng bị +hỏng có thể dẫn đến việc ai đó gửi tin nhắn đến nhầm người. Tương tự, ứng dụng thanh toán hiển thị sai số tiền còn tệ +hơn là không hiển thị gì. -This change means that as you migrate to React 16, you will likely uncover existing crashes in your application that have been unnoticed before. Adding error boundaries lets you provide better user experience when something goes wrong. +Thay đổi này có nghĩa là khi bạn chuyển sang React 16, bạn có thể sẽ phát hiện ra các lỗi hiện có trong ứng dụng của +mình mà trước đây chưa được chú ý. Thêm ranh giới lỗi cho phép bạn cung cấp trải nghiệm người dùng tốt hơn khi có sự cố. -For example, Facebook Messenger wraps content of the sidebar, the info panel, the conversation log, and the message input into separate error boundaries. If some component in one of these UI areas crashes, the rest of them remain interactive. - -We also encourage you to use JS error reporting services (or build your own) so that you can learn about unhandled exceptions as they happen in production, and fix them. +Ví dụ: Facebook Messenger kết hợp nội dung của thanh bên, bảng thông tin, nhật ký cuộc trò chuyện và đầu vào tin nhắn +thành các ranh giới lỗi riêng biệt. Nếu một số thành phần trong một trong các khu vực giao diện người dùng này gặp sự +cố, phần còn lại của chúng vẫn tương tác. +Chúng tôi cũng khuyến khích bạn sử dụng các dịch vụ báo cáo lỗi JS (hoặc xây dựng của riêng bạn) để bạn có thể tìm hiểu +về các trường hợp ngoại lệ không được khắc phục khi chúng xảy ra trong quá trình sản xuất và khắc phục chúng. ## Component Stack Traces {#component-stack-traces} -React 16 prints all errors that occurred during rendering to the console in development, even if the application accidentally swallows them. In addition to the error message and the JavaScript stack, it also provides component stack traces. Now you can see where exactly in the component tree the failure has happened: +React 16 in tất cả các lỗi xảy ra trong quá trình hiển thị cho bảng điều khiển đang phát triển, ngay cả khi ứng dụng vô +tình nuốt chúng. Ngoài thông báo lỗi và ngăn xếp JavaScript, nó cũng cung cấp dấu vết ngăn xếp thành phần. Bây giờ bạn +có thể thấy vị trí chính xác trong cây thành phần mà lỗi đã xảy ra: Error caught by Error Boundary component -You can also see the filenames and line numbers in the component stack trace. This works by default in [Create React App](https://github.com/facebookincubator/create-react-app) projects: +Bạn cũng có thể xem tên tệp và số dòng trong dấu vết ngăn xếp thành phần. Điều này hoạt động theo mặc định +trong [Create React App](https://github.com/facebookincubator/create-react-app) projects: Error caught by Error Boundary component with line numbers -If you don’t use Create React App, you can add [this plugin](https://www.npmjs.com/package/@babel/plugin-transform-react-jsx-source) manually to your Babel configuration. Note that it’s intended only for development and **must be disabled in production**. +Nếu không sử dụng Tạo ứng dụng React, bạn có thể +thêm [this plugin](https://www.npmjs.com/package/@babel/plugin-transform-react-jsx-source) theo cách thủ công với cấu +hình Babel của bạn. Lưu ý rằng nó chỉ nhằm mục đích phát triển và **phải bị vô hiệu hóa trong quá trình sản xuất**. -> Note +> Ghi chú > -> Component names displayed in the stack traces depend on the [`Function.name`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name) property. If you support older browsers and devices which may not yet provide this natively (e.g. IE 11), consider including a `Function.name` polyfill in your bundled application, such as [`function.name-polyfill`](https://github.com/JamesMGreene/Function.name). Alternatively, you may explicitly set the [`displayName`](/docs/react-component.html#displayname) property on all your components. - +> Tên thành phần được hiển thị trong dấu vết ngăn xếp phụ thuộc vào các +> [`Function.name`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name) +> tài sản. Nếu bạn hỗ trợ các trình duyệt và thiết bị cũ hơn có thể chưa cung cấp tính năng này (ví dụ: IE 11), hãy xem +> xét đưa polyfill `Function.name` vào ứng dụng đi kèm của bạn, chẳng hạn +> như [`function.name-polyfill`](https://github.com/JamesMGreene/Function.name). Ngoài ra, bạn có thể đặt rõ +> ràng [`displayName`](/docs/react-component.html#displayname) tài sản trên tất cả các thành phần của bạn. ## How About try/catch? {#how-about-trycatch} -`try` / `catch` is great but it only works for imperative code: +`try` / `catch` thật tuyệt nhưng nó chỉ hoạt động đối với mã mệnh lệnh: ```js try { @@ -116,21 +147,25 @@ try { } ``` -However, React components are declarative and specify *what* should be rendered: +Tuy nhiên, các thành phần React là khai báo và chỉ định *những gì* sẽ được hiển thị ```js -