You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
React uses trees to model the relationships between components and modules.
545
+
546
+
A React render tree is a representation of the parent and child relationship between components.
547
+
548
+
<Diagramname="generic_render_tree"height={250}width={500}alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">An example React render tree.</Diagram>
549
+
550
+
Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
551
+
552
+
Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree.
553
+
554
+
<Diagramname="generic_dependency_tree"height={250}width={500}alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">An example module dependency tree.</Diagram>
555
+
556
+
A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues.
Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
561
+
562
+
</LearnMore>
563
+
564
+
565
+
## What's next? {/*whats-next*/}
566
+
>>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
528
567
529
568
Idite do [Vaša prva komponenta](/learn/your-first-component) da biste počeli da čitate ovo poglavlje stranicu po stranicu!
Copy file name to clipboardExpand all lines: src/content/learn/preserving-and-resetting-state.md
+4-20
Original file line number
Diff line number
Diff line change
@@ -10,33 +10,17 @@ State is isolated between components. React keeps track of which state belongs t
10
10
11
11
<YouWillLearn>
12
12
13
-
* How React "sees" component structures
14
13
* When React chooses to preserve or reset the state
15
14
* How to force React to reset component's state
16
15
* How keys and types affect whether the state is preserved
17
16
18
17
</YouWillLearn>
19
18
20
-
## The UI tree {/*the-ui-tree*/}
19
+
## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
21
20
22
-
Browsers use many tree structures to model UI. The [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) represents HTML elements, the [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model) does the same for CSS. There's even an [Accessibility tree](https://developer.mozilla.org/docs/Glossary/Accessibility_tree)!
23
-
24
-
React also uses tree structures to manage and model the UI you make. React makes **UI trees** from your JSX. Then React DOM updates the browser DOM elements to match that UI tree. (React Native translates these trees into elements specific to mobile platforms.)
25
-
26
-
<DiagramGroup>
27
-
28
-
<Diagramname="preserving_state_dom_tree"height={193}width={864}alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">
29
-
30
-
From components, React creates a UI tree which React DOM uses to render the DOM
31
-
32
-
</Diagram>
33
-
34
-
</DiagramGroup>
35
-
36
-
## State is tied to a position in the tree {/*state-is-tied-to-a-position-in-the-tree*/}
37
-
38
-
When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the UI tree.
21
+
React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
39
22
23
+
When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
40
24
41
25
Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:
42
26
@@ -190,7 +174,7 @@ Updating state
190
174
</DiagramGroup>
191
175
192
176
193
-
React will keep the state around for as long as you render the same component at the same position. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
177
+
React will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
0 commit comments