diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index 1624bfbde..8a064482e 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -1,35 +1,35 @@ --- id: reconciliation -title: Reconciliation +title: Rekonsiliasi 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 menyediakan API deklaratif jadi Anda tidak perlu khawatir tentang apa yang pasti berubah pada setiap pembaruan. Ini membuat penulisan aplikasi menjadi jauh lebih mudah, tetapi ini mungkin kurang jelas bagaimana ini diimplementasikan di dalam React. Artikel ini menjelaskan pilihan yang bisa kita buat dalam algoritma "pembeda" nya React jadi pembaruan komponen dapat diprediksi selagi aplikasi berkinerja cukup cepat. -## Motivation {#motivation} +## Motivasi {#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. +Ketika Anda menggunakan React, pada satu titik waktu Anda dapat berpikir fungsi `render()` sebagai pembuat pohon elemen React. Pada pembaruan *state* atau *prop* selanjutnya, fungsi `render()` tersebut akan mengembalikan pohon elemen React yang berbeda. React kemudian perlu mencari tahu bagaimana cara untuk memperbarui antarmuka pengguna secara efisien agar sesuai dengan pohon terbaru. -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. +Ada beberapa solusi umum untuk permasalahan algoritma ini menghasilkan jumlah operasi minimum untuk mengubah satu pohon ke yang lain. Namun, The [State of the Art Algorithms](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) memiliki kompleksitas dalam urutan O(n3) dimana n adalah jumlah elemen di pohon. -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: +Jika kita menggunakannya di React, menampilkan 1000 elemen akan membutuhkan satu miliar perbandingan. Ini terlalu mahal. Sebagai gantinya, React mengimplementasikan algoritma heuristik O(n) berdasarkan dua asumsi: -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. Dua elemen yang berbeda jenis akan menghasilkan pohon-pohon yang berbeda. +2. Pengembang dapat mengisyaratkan elemen *child* mana yang mungkin stabil di berbagai *render* yang berbeda dengan *prop* `key`. -In practice, these assumptions are valid for almost all practical use cases. +Dalam prakteknya, asumsi ini sah untuk hampir semua contoh kasus praktis. -## The Diffing Algorithm {#the-diffing-algorithm} +## Algoritma Pembeda {#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. +Saat membedakan dua pohon, React pertama membandingkan dua elemen *root*. Tindakan berbeda tergantung pada jenis dari elemen-elemen *root*. -### Elements Of Different Types {#elements-of-different-types} +### Elemen Dari Berbagai Jenis {#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 `