translate tutorial/reverse

source/_posts/en/tutorial/reverse.md

@@ -1,50 +1,47 @@
 ---
-title: 组件反解
+title: component reversion
 categories:
 - tutorial
 ---
 
 
-**3.4.0 对组件反解机制做了全面的升级。新的组件反解基于数据和模板匹配的机制，代替原来的标记机制。**
+**3.4.0 The `component reversion` mechanism has been fully upgraded. The new mechanism is based on data and template matching, replacing the original marking mechanism.**
 
-旧的基于标记的组件反解请见[老文档](../reverse-flag/)
+Old tag-based [component inverse] refer to [reverse-flag](../reverse-flag/)
 
 
-`版本`：>= 3.4.0
+`version`：>= 3.4.0
 
 
-`提示`：通过 San 进行[服务端渲染](../ssr/)，一定能通过相同版本的 San 在浏览器端进行反解。
+`tips`: The component can be [server-side rendered]((../ssr/)) in San, and it must be reversed on the browser side with the same version of San.
 
 
-概述
+Overview
 ----
 
-组件初始化时传入 **el**，其将作为组件根元素，并以此反解析出视图结构。
+When the component is initialized, it is passed a **el** argument which will be the root element of the component, and the view structure will be parsed backwards.
 
-该特性的意图是：有时我们为了首屏时间，期望初始的视图是直接的 HTML，不由组件渲染。但是我们希望组件为我们管理数据、逻辑与视图，后续的用户交互行为与视图变换通过组件管理。
+The intent of this feature is that sometimes we want the initial view to be direct HTML, rather than being rendered by components. But we want components to manage data, logic, and views for us, and subsequent user interactions and view transformations are managed through components.
 
 ```javascript
 var myComponent = new MyComponent({
     el: document.getElementById('wrap').firstChild
 });
 ```
 
-以 **el** 初始化组件时，San 会尊重 **el** 的现时 HTML 形态，不会执行任何额外影响视觉的渲染动作。
+When **el** initializes the component, San will respect the current HTML form of **el** and will not perform any additional rendering actions that affect the visual.
 
-- 不会使用预设的 template 渲染视图
-- 不会创建根元素
-- 直接到达 compiled、created、attached 生命周期
+- Will not render the view using the default template
+- Will not create a root element
+- Direct access to compiled, created, attached lifecycle
 
-
-
-
-数据
+Data
 ----
 
-组件的视图是数据的呈现。我们需要通过在组件起始时标记 **data**，以指定正确的初始数据。初始数据标记是一个 **s-data:** 开头的 HTML Comment，在其中声明数据。
+The view of the component is the rendering of the data. We need to mark **data** at the beginning of the component to specify the correct initial data.  The initial data tag is an HTML comment starting with **s-data:**, in which the data is declared.
 
 
-`警告`：San 的组件反解过程基于数据和组件模板进行视图结构反推与匹配。反解的组件必须拥有正确的标记数据，否则反解过程会发生错误。比如对于模板中的 s-if 条件进行视图反推，如果没有正确的标记数据，反推就会因为元素对应不上，得到不期望的结果。
+`warning`：The process of San's `component reversion` is based on data and component templates for view structure backstepping and matching. The reversed component must have the correct tagged data, otherwise, the reverse-parsing process will occur errors. For example, when the view is reversed for the `s-if` condition in the template, there is no correct markup data, and the backstepping will result in undesired outcomes because the elements do not correspond.
 
 
 ```html
@@ -69,12 +66,11 @@ var myComponent = new MyComponent({
 ```
 
 
-
-如果一个组件拥有 owner，不用标记初始数据。其初始数据由 owner 根据绑定关系灌入。
+If a component has owner, there is no need to mark the initial data. Its initial data is populated by the owner based on the binding relationship.
 
 
 ```html
-<!-- ui-label 组件拥有 owner，无需进行初始数据标记 -->
+<!-- ui-label a component has owner, there is no need to mark the initial data -->
 <div id="main"><!--s-data:{"name":"errorrik"}-->
     <span>errorrik</span>
 </div>
@@ -102,13 +98,13 @@ var myComponent = new MyComponent({
 ```
 
 
-复合插值文本
+Composite interpolation text
 ----
 
-San 支持在插值文本中直接输出 HTML，此时插值文本对应的不是一个 TextNode，而可能是多个不同类型的元素。对于这种复合插值文本，需要在内容的前后各添加一个注释做标记。
+San supports direct output of HTML in an interpolated text. In this case, the interpolated text corresponds to not a TextNode but may be multiple different types of elements. For this composite interpolated text, you need to add a comment before and after the content to mark it.
 
-- 文本前的注释内容为 **s-text**，代表插值文本片段开始。
-- 文本后的注释内容为 **/s-text**，代表插值文本片段结束。
+- The comment before the text is **s-text**, which means the start of an interpolated text fragment.
+- The comment after the text is **/s-text**, which means the end of an interpolated text fragment.
 
 ```html
 <a id="wrap"><!--s-data:{