5cbc7b4f1c
Summary: Adds JavaScript bindings for YGHasNewLayout which introduces two new node methods: `hasNewLayout()` and `markLayoutSeen()`. Closes https://github.com/facebook/yoga/issues/681 Pull Request resolved: https://github.com/facebook/yoga/pull/1631 Reviewed By: joevilches Differential Revision: D55213296 Pulled By: NickGerleman fbshipit-source-id: 161288c3f54c2b82a6b2b842387916fe8713c2c9
88 lines
2.2 KiB
Plaintext
88 lines
2.2 KiB
Plaintext
---
|
|
sidebar_position: 1
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs';
|
|
import TabItem from '@theme/TabItem';
|
|
|
|
# Incremental layout
|
|
|
|
Most real-world UIs are not static. Yoga trees may be laid out incrementally to avoid large work when only a small portion of the UI changes. Yoga will automatically mark a node and its ancestors as "dirty" if the node's style or children are changed. During the first layout, all nodes are considered dirty, and every node is visited. On subsequent layout, any nodes that are not dirty are skipped, so long as their parent constraints have not changed.
|
|
|
|
Yoga exposes whether the layout of a node or its children have changed via a `HasNewLayout` flag. This flag may be read when applying Yoga layout results to avoid traversing any subtrees where there are no updates.
|
|
|
|
<Tabs groupId="language">
|
|
|
|
<TabItem value="cpp" label="C/C++">
|
|
|
|
```cpp
|
|
void applyLayout(YGNodeRef node) {
|
|
if (!YGNodeHasNewLayout(node)) {
|
|
return;
|
|
}
|
|
|
|
// Reset the flag
|
|
YGNodeSetHasNewLayout(node, false);
|
|
|
|
// Do the real work
|
|
...
|
|
|
|
for (size_t i = 0; i < YGNodeGetChildCount(node); i++) {
|
|
applyLayout(YGNodeGetChild(node, i));
|
|
}
|
|
}
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="java" label="Java">
|
|
|
|
```java
|
|
void applyLayout(YogaNode node) {
|
|
if (!node.hasNewLayout()) {
|
|
return;
|
|
}
|
|
|
|
// Reset the flag
|
|
node.markLayoutSeen();
|
|
|
|
// Do the real work
|
|
...
|
|
|
|
for (int i = 0; i < node.getChildCount(); i++) {
|
|
applyLayout(node.getChildAt(i));
|
|
}
|
|
}
|
|
```
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="js" label="JavaScript">
|
|
|
|
```javascript
|
|
void applyLayout(node) {
|
|
if (!node.hasNewLayout()) {
|
|
return;
|
|
}
|
|
|
|
// Reset the flag
|
|
node.markLayoutSeen();
|
|
|
|
// Do the real work
|
|
...
|
|
|
|
for (let i = 0; i < node.getChildCount(); i++) {
|
|
applyLayout(node.getChildAt(i));
|
|
}
|
|
}
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
In the below example, we start with an already laid out tree. The style of `F` is then modified, dirtying the node and its ancestors. After layout, the dirtied nodes, and any effected children, are marked as having new layout.
|
|
|
|
| Clean tree | Dirtied tree | Has new layout |
|
|
| - | - | - |
|
|
|  |  |  |
|