This question already has an answer here:
reactjs.net - are react-text tags required when rendered?
(1 answer)
Closed 5 years ago.
What is react-text ?
It does not exist in the code, but it appears in html after rendering
React tries to diff the minimal amount of dom it can and it needs to track the dom rendered for every child. For empty string childs it tracks it using these comment tag. So no, you cannot (and should not) remove these.
More
https://facebook.github.io/react/blog/2016/04/07/react-v15.html#no-more-extra-ltspangts
We received some amazing contributions from the community in this release, and we would like to highlight this pull request by Michael Wiencek in particular. Thanks to Michael’s work, React 15 no longer emits extra nodes around the text, making the DOM output much cleaner. This was a longstanding annoyance for React users so it’s exciting to accept this as an outside contribution.
More More
These will not appear if you do not render anything e.g. null. But for a string like (a space), these will appear.
Related
I'm running into a problem in React. As shown in the figure below, if there are many elements in a list, such as 100 elements, then use a component to render the view of each element in a For loop, and the web page will take several seconds to completely rendering, and no operations can be performed during rendering.
Figure 1
I think it's because the entire rendering process occupies the main process, and that lead to program cannot respond before completely rendering.
In order to improve page generation efficiency and response time, I came up with a compromise solution. As shown in the figure below, we first render the placeholder image of the entire list according to the number of lists in advance, and then render the real data one by one according to the order.
Figure 2
As shown in the figure below, for example, we have 100 elements, then render 100 empty divs or placeholders first, and then render a real element every 100/200 milliseconds.
Figure 3
Finally, after N renderings, the effect shown below will be formed. Of course, it's best to do so that only the placeholders that the user sees will render the real data.
Figure 4
Back to question, I am very unfamiliar with React, can I do this with React? Is there a corresponding library that can be used in React?
You've tagged reactjs, and react-native. Is this for react on the web or React Native?
If React Native then the FlatList component can help rather than rendering via a loop since FlatList supports lazy loading which would help with loading not all at once.
For web the recommended approach is to use react-window or react-virtualized as documented here.
I'm trying to implement an infinite list for a React project and I'd like to know if there is an equivalent to the onEndReached from react-native that I could use to get this done easily. The idea would be to have an offset and a limit in my request so that I can append a batch of elements after I reached the end of my list.
I haven't found many options except some already complete components but I do need to implement mine.
I also found this question from January 27 (How can I implement a robust onEndReached for ScrollView on React Native) but since he doesn't have any answer I thought I should ask here.
Do you guys have any idea ?
Thanks in advance
By quick Googling, this can detect when you scroll to an element. It can call your callback to fetch more items.
https://github.com/brigade/react-waypoint
While going through react I came up with the following doubts:
DOM operations are very expensive
But eventually react also does the DOM manipulation. We cannot generate a view with Virtual DOM.
Collapsing the entire DOM and building it affects the user experience.
I never did that, Mostly what I do is changing the required child node(Instead of collapsing entire parent) or appending HTML code generated by JS.
Examples:
As a user scrolls down we append posts to parent element, even react
also have to do it in same way. No one collapse entire dom for that.
When a user comment on a post we append a div(comment element(HTML code)) to that particular post comment list. I think no one collapse entire post(dom) for that
3) "diffing" algorithm to check changes:
Why we need a algorithm to check changes.
Example:
If I have a 100 posts, whenever a user clicks on edit button of a particular post, i do it as follows
$(".postEdit").click(function(){
var post_id = $(this).data("postid");
//do some Ajax and DOM manipulation to that particular post.
})
I am telling the DOM to change particular element, then how does diffing help?
Am I thinking in a wrong way? If so, please then correct me.
You are correct that people don't tend to collapse and recreate the entire DOM when they need to update a single element. Instead, the best practice is to just rebuild the element you need. But what if a user takes an action that actually impacts lots of elements? Like it they star a post or something, you want to reflect that on the post and maybe in a stars count elsewhere on the page. As applications get complex enough changing all of the parts of a page that need to be changed becomes really complicated and error prone. Another developer might not be aware that there is a "stars count" elsewhere on the page and would forget to update it.
What if you could just rebuild the entire DOM? If you wrote your render methods and stored your state such that at any point, you could with certainty render the entire page from scratch? That removes a lot of these pain points, but obviously you lose all the performance gains you got from manually altering parts of the DOM by hand.
React and the virtual dom give you the best of both worlds. You get that optimized DOM updating, but as a developer you don't have to keep a mental model of the entire application and remember what you need to change for any given user or network input. The virtual dom will also potentially implement these changes more effectively than you by literally only rebuilding the elements you need. At some point you might be rebuilding more than you should "just in case".
Hope this sort of makes sense!
This discussion can be very helpful to understand Virtual DOM and it's implementation in different UI frameworks.
Why is React's concept of Virtual DOM said to be more performant than dirty model checking?
There are couple of other links as well which explains it in better way.
https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/
http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
I have react component that renders something like:
<div>
<div key='bowie'>something</div>
<div>
when I query the keys of each node (using enzyme if that matters), my keys are printed as
.$bowie
Is the .$ something I can rely on? What does it mean?
It is not something you can rely on. The key attribute does not give any public API beside the original assignment, and the value is only used internally to improve the rendering/diffing algorithm.
React v15+ actually removed the data-reactid attribute (I'm assuming this is where you are seeing the keys?) from the DOM entirely, since it now uses internal references. More on that in the React 15 release blog post.
As far as the importance of the $ itself, I'm not sure, but I would guess that it made it easier to parse the IDs.
my premise was wrong. while AngularJS was certainly slowing things down, it was not due to the problem I describe below. however, it was flim's answer to my question - how to exclude an element from an Angular scope - that was able to prove this.
I'm building a site that generates graphs using d3+Raphael from AJAX-fetched data. this results in a LOT of SVG or VML elements in the DOM, depending on what type of chart the user chooses to render (pie has few, line and stacked bar have many, for example).
I'm running into a problem where entering text into text fields controlled by AngularJS brings Firefox to a crawl. I type a few characters, then wait 2-3 seconds for them to suddenly appear, then type a few more, etc. (Chrome seems to handle this a bit better.)
when there is no graph on the page (the user has not provided enough data for one to be generated), editing the contents of these text fields is fine. I assume AngularJS is having trouble when it tries to update the DOM and there's hundreds SVG or VML elements it has to look through.
the graph, however, contains nothing that AngularJS need worry itself with. (there are, however, UI elements both before and after the graph that it DOES need to pay attention to.)
I can think of two solutions:
put the graph's DIV outside the AngularJS controller, and use CSS to position it where it's actually wanted
tell AngularJS - somehow - to nevermind the graph's DIV; to skip it over when keeping the view and model in-sync
the second option seems preferable to me, since it keeps the document layout sane/semantic. is there any way to do this? (or some, even-better solution I have not thought of?)
Have you tried ng-non-bindable? http://docs.angularjs.org/api/ng.directive:ngNonBindable
<ANY ng-non-bindable>
...
</ANY>