From f1de3578a5c3f6343060afe10ac802c4b166907b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hoa=CC=80ng=20Va=CC=86n=20Ho=CC=80a?= <45493195+hoangvanhoa1701@users.noreply.github.com> Date: Wed, 15 Sep 2021 16:10:25 +0700 Subject: [PATCH 1/3] feat: translate docs Reconciliation page --- content/docs/reconciliation.md | 84 +++++++++++++++++----------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index 86b19cdd2..7d9baba0e 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -4,32 +4,32 @@ title: Reconciliation permalink: docs/reconciliation.html --- -React provides a declarative API so that you don't have to worry about exactly what changes on every update. This makes writing applications a lot easier, but it might not be obvious how this is implemented within React. This article explains the choices we made in React's "diffing" algorithm so that component updates are predictable while being fast enough for high-performance apps. +React cung cấp một API khai báo để bạn không phải lo lắng về những thay đổi chính xác trên mỗi bản cập nhật. Điều này làm cho việc viết ứng dụng trở nên dễ dàng hơn rất nhiều, nhưng có thể không rõ ràng điều này được thực hiện như thế nào trong React. Bài viết này giải thích các lựa chọn mà chúng tôi đã thực hiện trong thuật toán "khác biệt" của React để các bản cập nhật thành phần có thể dự đoán được trong khi vẫn đủ nhanh cho các ứng dụng hiệu suất cao. ## Motivation {#motivation} -When you use React, at a single point in time you can think of the `render()` function as creating a tree of React elements. On the next state or props update, that `render()` function will return a different tree of React elements. React then needs to figure out how to efficiently update the UI to match the most recent tree. +Khi bạn sử dụng React, tại một thời điểm nào đó, bạn có thể nghĩ `render()` function giống như việc tạo một tree (cây) các React element. Trong lần cập nhật state hoặc props tiếp theo, `render()` function đó sẽ trả về một cây các React element khác. Sau đó, React cần tìm ra cách cập nhật giao diện người dùng (UI) một cách hiệu quả để phù hợp với cây gần đây nhất. -There are some generic solutions to this algorithmic problem of generating the minimum number of operations to transform one tree into another. However, the [state of the art algorithms](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) have a complexity in the order of O(n3) where n is the number of elements in the tree. +Có một số giải pháp chung cho vấn đề algorithmic (thuật toán) này là tạo ra số lượng phép toán tối thiểu để biến đổi một tree này thành một tree khác. Tuy nhiên, [state of the art algorithms (các thuật toán hiện đại)](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) có độ phức tạp theo thứ tự là O(n3) trong đó n là số phần tử trong cây. -If we used this in React, displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm based on two assumptions: +Nếu chúng tôi sử dụng điều này trong React, việc hiển thị 1000 phần tử sẽ yêu cầu theo thứ tự của một tỷ phép so sánh. Đây là sự trả giá quá đắt. Thay vào đó, React triển khai thuật toán heuristic O(n) dựa trên hai giả định: -1. Two elements of different types will produce different trees. -2. The developer can hint at which child elements may be stable across different renders with a `key` prop. +1. Hai yếu tố của các loại khác nhau sẽ tạo ra các tree khác nhau. +2. Developer có thể gợi ý tại các child element để có thể ổn định trên các kết xuất khác nhau bằng một `key` prop. -In practice, these assumptions are valid for almost all practical use cases. +Trong thực tế, những giả định này có giá trị đối với hầu hết các trường hợp sử dụng thực tế. ## The Diffing Algorithm {#the-diffing-algorithm} -When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements. +Khi khác biệt hai tree, React đầu tiên sẽ so sánh hai root element. Hành vi khác nhau tùy thuộc vào loại của các root element. -### Elements Of Different Types {#elements-of-different-types} +### Elements Of Different Types (Khác loại) {#elements-of-different-types} -Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. Going from `` to ``, or from `
` to ``, or from `