As far as I've read parents should store childrens data which would solve my problem simply because I could iterate through the tree, but I'm not able to come up with a solution that manages to do that in react.
To clarify:
My goal is to convert my JSX-Layout to a JSON-Object so that I can send it to my backend for further processing.
Currently each of the nodes handle the adding of a new child in themself. All nodes only know their immediate children.
The problem now is that I don't know how I could read the entire tree data structure.
For example: In Java I could simply add a child to a node by just accessing the node's reference and adding the new node to the list of childrens. Since I use functional components in React I'm not able to do that and probably need to pass down a event from the parent nodes to register new nodes from children but I simply cant wrap my head around it. I don't see how that is possible with React, but I'm certain that it's just me misunderstanding something or trying for too long.
Any help is appreciated!
TL;DR:
How do I manage state in trees so that I can access the whole tree and add/remove children to/from children and their descendants?
I tried to pass down an event from the parent through the whole hierarchy where every child would add its children but I'm not sure if that is correct since it seems really unclean.
If I'm understanding your question correctly, you want a way to traverse your tree. There are various ways to traverse a tree to generate a full depiction of its elements (to make a JSON object, for example), but I think you probably want to use in-order traversal. Here is a link with more details about some different tree traversal strategies.
If you're looking for a way to access a React component's children, you can read this article for inspiration.
Related
I am developing an application that contains multiple features and each feature has multiple functions. I represented this as a tree but some functions use other functions which means a child can have more than one parent (if I am not wrong). How it is possible in a tree data structure? Can I access the child node from another parent's child node? If so how can I implement this? Can graphs help me with this issue?
If a node has more than two parents, your data structure is no longer a tree. E.g., to quote the wikipedia entry:
A node has at most one parent, but possibly many ancestor nodes, such as the parent's parent.
If you need a data structure where a child can have multiple parents, you should look into a (directed) graph.
a google search gives the answer that:
"Yes, you can have nodes have both “children” and “parents”. However that is no longer a tree structured graph, so you will not be able to use a TreeModel"
Original reference
I am relatively new to React and Redux after spending a lot of time in the .net mvc and knockoutjs world. What I am having trouble understanding is how the store is used and how props are passed down between parent and child components.
My first question: if an array of values get sent down from parent to children components via props, do these components do a deep copy and create their own version of this array? If we have a rather large array of values that we want multiple children to have access to, and we send it as props, are we unnecessarily creating extra data or are they just simply referencing the same array?
I'm not sure exactly how the store is used, but could it be used to help the scenario above? If we have some values like a larger array that we want accessed by multiple component children, they could pull them from this globally accessible store?
I would appreciate if somebody could help me wrap my head around these concepts. In my scenario I'm working on we have a table of 30 students each of which gets sent an array of data to help fill in some rows. What I'm afraid we're doing though is giving each student a large amount of data that they don't need if they could pull from the parent or this global store.
<StudentTable
onSelectAllStudents={this.props.handleSelectAllStudents}
handleLoadStudentResponses={this.props.handleLoadStudentResponses}
structures={this.props.structures}
lessons={this.props.lessons}
activities={this.props.activities}
students={this.props.students} />
They are creating a table, where each row is a student. The table contains a large amount of data (which is a whole other problem) however what essentially we are doing is for each student we are showing whether they completed a particular activity or not. As you can see in the screenshot they build out a rather complex table. In the StudentTable they loop through students and create a Student component for each row which gets sent in the list of activities so that in the table they can color in a cell based on if the activity is published or not. My main fear was that with each Student component getting the list of activities it was adding a ton of data to memory as opposed to those numerous Student components just referencing some parent array.
Based on the syntax I've seen, children receive a pointer. Not a new object. Regarding your question about giving 30 students the entire array, you're not approaching data passing correctly. Show us a code snippet and I'll be able to comment more.
Also, redux is not helpful. It can be used, but it's overkill and adds needless complexity. Components with a child-parent relationship can very easily be handled with normal React prop passing. Redux is the go-to option if the components do not have any direct relation.
edit: When referencing elements in an obj, primitives are copied and objects are pointed.
const obj = {arrayObject: [], primitiveBoolean: true}
const primitive = obj.primitiveBoolean
const array = obj.arrayObject
primitive = false
console.log(obj.primitiveBoolean); //still true
array.push(10)
console.log(obj.arrayObject); // [10] push changed object's array
I wrote a script that loads data from 2 tables.
Using this script I need to just match corresponding elements in these 2 columns.
I am using angular-ui-tree for managing columns, but can't come up with an idea how to visually and programmatically match corresponding elements between 2 trees?
Thanks
Not quite sure what is your problem here. I assuming by "matching visually" you do not mean you need some AI API to actually do visual match, so you just want to get objects that are in the same location in the UI tree?
Using $nodeScope (type: Scope of ui-tree-node) should give you that information, as the property of $nodeScope is something like "1.1.1" or "1.1.2" etc. So you can just parse the "parent" node to get all children belonging to same node.
Scope also has a method isParent(nodeScope) which can check if a certain node (that calls the method) is a parent of targeted node. Similarly Scope has isSibling(targetNodeScope) and isChild(targetNodeScope) methods to help you identify the relationships. As a general guide, you just follow the (array) of nodes in a (nested) loop and pick the elements or objects you need. You can pick the objects from both UI trees at the same time, so they should be from the same node at that point.
import com.codename1.ui.tree.Tree;
import com.codename1.ui.tree.TreeModel;
Upon detecting a delete action from my tree ActionListener,
I delete the path on disk.
FileSystemStorage.getInstance().delete(node.getPath());
Then attempt to refresh the tree where there is one less element in the curr node.
tree.expandPath(true,(Object[]) (node.getNodeParent().getNodesOnPath()));
Can you please provide a working example of delete a single leaf (file) and then refresh the Node Parent
My approach does not work.
If I manually tap on the Node Parent twice, I see the file id no longer displayed as expected.
Thanks in advance.
Once it's shown the tree won't refresh unless you refresh the whole thing. Only hidden nodes take events into account so if you fold and reopen it will update. In the case of deletion you can just use something specific to the file and remove the specific node components from their parents directly which is a bit of a hack.
Alternatively you can refresh the entire tree which is what we do for the GUI builder by setting a new instance of the model. In the GUI builder that's practical because the tree is always expanded. It might be a bit painful for your implementation.
All:
I am pretty new to React.js, heard a lot about React virtual dom, but I kinda wondering what is the main difference between it and real DOM when deal with a simple case like change a style of a element:
Say I want to change the distance of a div to others, I can use jQuery for:
$("div#test").css("margin-left","10px");
And my understand about how browser does to the real dom is:
search down the DOM tree and find that node.
updating according style attribute( I guess it is CSSOM tree )
rendering the view
So my question is:
Is my understanding correct?
If it is basically correct, then what does virtual DOM do to improve the performance? Does not it just use a diff algorithm to compare what need to update in its light weighted version DOM tree and find that margin-left needs updating, and apply the same thing like in jquery to the real DOM?
OR
if it is not correct, could anyone give a little detail what heavy job does browser do to real DOM which React virtual DOM skip to enhance the performance?
I find a post mention 3 detail operation on virtual DOM:
What makes it really fast is:
Efficient diff algorithms.
Batching DOM read/write operations.
Efficient update of sub-tree only.
So comparing with this, does that mean in real DOM:
Not quite efficient diff algorithm or no diff algorithm(just update
everything)?
Single read/write operation like if I give 3 style updating to even same DOM element, the browser will look for that element down the DOM tree 3 times and update style?
Update whole DOM from the root(basically like dump the current tree and rebuild the whole DOM tree again no matter what part of the tree need update, and find the node and update)
Thanks
First of all, you are right with how the "real" DOM manipulation works.
React keeps an in-memory representation of the "real" DOM which we call the virtual DOM. Instead of traversing the "real" DOM for the node to modify, this virtual DOM is easily and quickly accessed therefore delivering update faster. Also, imagine a lot of changes in the DOM, traversing the "real" DOM would take a long time. This is one situation where the virtual DOM really excels.