From 866f7eb8997faa5483beb55a11b899712da74a0c Mon Sep 17 00:00:00 2001 From: SangLv Date: Tue, 19 Feb 2019 21:08:07 +0800 Subject: [PATCH] doc: Chinese translation for reconciliation.md --- content/docs/reconciliation.md | 88 +++++++++++++++++----------------- 1 file changed, 45 insertions(+), 43 deletions(-) diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md index c2147a4dcf..411e68aa93 100644 --- a/content/docs/reconciliation.md +++ b/content/docs/reconciliation.md @@ -1,35 +1,37 @@ --- id: reconciliation -title: Reconciliation +title: 协调 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 提供的声明式 API 让开发者可以在对 React 的底层实现没有具体了解的情况下编写应用。在开发者编写应用时虽然保持相对简单的心智，但开发者无法了解内部的实现机制。本文描述了在实现 React 的 "diffing" 算法中我们做出的设计决策以保证组件满足更新具有可预测性，以及在繁杂业务下依然保持应用的高性能性。 -## Motivation {#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. +在某一时间节点调用 React 的 `render()` 方法，会创建一棵由 React 元素组成的树。在下一次 state 或 props 更新时，相同的 `render()` 方法会返回一棵不同的树。React 需要基于这两棵树之间的差别来判断如何有效率的更新 UI 以保证当前 UI 与最新的树保持同步。 + +这个算法问题有一些通用的解决方案，即生成将一棵树转换成另一棵树的最小操作数。 然而，即使在[最前沿的算法中](http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf)，该算法的复杂程度为 O(n 3 )，其中 n 是树中元素的数量。 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](http://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. -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: +如果在 React 中使用了该算法，那么展示 1000 个元素所需要执行的计算量将在十亿的量级范围。这个开销实在是太过高昂。于是 React 在以下两个假设的基础之上提出了一套 O(n) 的启发式算法： -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. 两个不同类型的元素会产生出不同的树； +2. 开发者可以通过 `key` prop 来暗示哪些子元素在不同的渲染下能保持稳定； -In practice, these assumptions are valid for almost all practical use cases. +在实践中，我们发现以上假设在几乎所有实用的场景下都成立。 -## The Diffing Algorithm {#the-diffing-algorithm} +## Diffing 算法 {#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. +当对比两颗树时，React 首先比较两棵树的根节点。不同类型的根节点元素会有不同的形态。 -### Elements Of Different Types {#elements-of-different-types} +### 比对不同类型的元素 {#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 `