Skip to content

Commit 7fef32b

Browse files
Fix render pipeline typo, tweak wording slightly (facebook#4212)
1 parent 925de66 commit 7fef32b

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

website/architecture/render-pipeline.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ The mount phase transforms the _React Shadow Tree_ (which now contains data from
8989
</View>
9090
```
9191

92-
At a high level, React Native renderer creates a corresponding [Host View](architecture-glossary.md#host-view-tree-and-host-view) for each _React Shadow Node_ and mounts it on screen. In the example above, the renderer creates an instance of `android.view.ViewGroup` for the `<View>` and `android.widget.TextView` for `<Text>` and populates it with “Hello World”. Similarly for iOS a `UIView` is created with and text is populated with a call to `NSLayoutManager`. Each host view is then configured to use props from its React Shadow Node, and its size and position is configured using the calculated layout information.
92+
At a high level, React Native renderer creates a corresponding [Host View](architecture-glossary.md#host-view-tree-and-host-view) for each _React Shadow Node_ and mounts it on screen. In the example above, the renderer creates an instance of `android.view.ViewGroup` for the `<View>` and `android.widget.TextView` for `<Text>` and populates it with “Hello World”. Similarly for iOS a `UIView` is created and text is populated with a call to `NSLayoutManager`. Each host view is then configured to use props from its React Shadow Node, and its size and position is configured using the calculated layout information.
9393

9494
![Step two](/docs/assets/Architecture/renderer-pipeline/render-pipeline-3.png)
9595

@@ -189,7 +189,7 @@ After React creates the new _React Element Tree_ and _React Shadow Tree_, it mus
189189
- **Tree Promotion (Next Tree → Rendered Tree)**: This step atomically promotes the “next tree” to “previously rendered tree” so that the next mount phase computes a diff against the proper tree.
190190
- **Tree Diffing:** This step computes the diff between the “previously rendered tree” (**T**) and the “next tree” (**T'**). The result is a list of atomic mutation operations to be performed on _host views_.
191191
- In the above example, the operations consist of: `UpdateView(**Node 3**, {backgroundColor: 'yellow'})`
192-
Diff can be calculated for any currently mounted tree with any new tree. The renderer can skip some intermediate versions of the tree.
192+
- The diff can be calculated for any currently mounted tree with any new tree. The renderer can skip some intermediate versions of the tree.
193193
- **View Mounting**: This step applies the atomic mutation operations onto corresponding _host views_. In the above example, only the `backgroundColor` of **View 3** will be updated (to yellow).
194194

195195
![Render pipeline 6](/docs/assets/Architecture/renderer-pipeline/render-pipeline-6.png)
@@ -202,7 +202,7 @@ For most information in the _Shadow Tree_, React is the single owner and single
202202

203203
However, there is one exception and important mechanism: components in C++ can contain state that is not directly exposed to JavaScript, and JavaScript is not the source of truth. C++ and _Host Platform_ control this _C++ State_. Generally, this is only relevant if you are developing a complicated _Host Component_ that needs _C++ State_. The vast majority of _Host Components_ do not need this functionality.
204204

205-
For example, `ScrollView` uses this mechanism to let the renderer know what’s the current offset. The update is triggered from the _host platform_, specifically from the host view that represents the `ScrollView` component. The information about offset is used in an API like [measure](https://reactnative.dev/docs/direct-manipulation#measurecallback). Since this update stems from the host platform, and does not affect the React Element Tree, this state data is held by _C++ State_.
205+
For example, `ScrollView` uses this mechanism to let the renderer know what the current offset is. The update is triggered from the _host platform_, specifically from the host view that represents the `ScrollView` component. The information about offset is used in an API like [measure](https://reactnative.dev/docs/direct-manipulation#measurecallback). Since this update stems from the host platform, and does not affect the React Element Tree, this state data is held by _C++ State_.
206206

207207
Conceptually, _C++ State_ updates are similar to the [React State Updates](render-pipeline#react-state-updates) described above.
208208
With two important differences:
@@ -220,4 +220,4 @@ When performing a _C++ State_ update, a block of code requests an update of a `S
220220

221221
![Phase three: mount](/docs/assets/Architecture/renderer-pipeline/phase-three-mount.png)
222222

223-
The _Mount Phase_ is practically identical to the [Mount Phase of React State Updates](#react-state-updates). The renderer still needs to recompute layout perform a tree diff, etc. See above sections for details.
223+
The _Mount Phase_ is practically identical to the [Mount Phase of React State Updates](#react-state-updates). The renderer still needs to recompute layout, perform a tree diff, etc. See the sections above for details.

0 commit comments

Comments
 (0)