4

All:

I am pretty new to React. A lot of posts talking about React's performance virtualDOM, but I guess I did not quite get it, I kinda wondering how to take advantage of this when it comes to data visualization area(especially with lib as D3.js), almost every operation in data visualization is to modify the data which leads to DOM related operation like style changing or number of elements updating.

For example, say I need to build a line chart to show a time series data, each time when I choose another data set, the line need to be recalculated and drawn or add one more line, I wonder in this situation, how React virtualDOM shows a better performance than D3+Angular( I just try to understand which part of virtualDOM improve the performance in this case, or what part is most time consuming when it comes to real DOM operation)?

Thanks

Kuan
  • 11,149
  • 23
  • 93
  • 201

1 Answers1

8

There is currently no great way to work with React and D3. As you seem to have caught on, this is because in the React world you don't do direct DOM manipulation, but in the d3 world that's the only thing you do. In many ways the whole d3 library is built around direct DOM manipulation if you think about how the d3.selection.data function works. There are many libraries that work well when using D3 for it's mathematical capabilities, but none that have fluidly (and with good performance) mixed React with d3 animations. (For that matter, animations in React in general are a pain.)

Some starting points:

  1. react-d3 is great for drawing easy charts with React. There is also a similar package, react-d3-basic.
  2. react-faux-dom uses a shadow DOM to perform d3 calculations and easy DOM manipulation and then render it out to React, but that doesn't work well with things like Force Layouts since the performance gets bad fast. There is a good blog post on this package.

What you'll notice is that almost all things that are React and d3 are basically just charts. Here is a good example of React and d3 using a Force Layout. However, you'll notice even that small example sometimes doesn't feel fluid.

It seems to me that the current consensus for Force Layouts and the like is to simply drop out of React for those components and let d3 do its thing. This isn't ideal but it's way more performant. I know some people are also investigating the use of react-art for combining React and d3, but I haven't seen a good solution for the Force Layout yet.

Matthew Herbst
  • 29,477
  • 23
  • 85
  • 128
  • Thanks, ok, say if I do not need D3 but just manually manipulate them in React with virtualDOM, will there be performance improve? I just do not get why virtualDOM can enhance the performance when all the DOMs there need to be modified( like add/remove change attribute, style etcs) – Kuan Feb 03 '16 at 20:34
  • The React [Advanced Performance page](https://facebook.github.io/react/docs/advanced-performance.html) does a good job of explaining why using the virtual DOM can be super fast. – Matthew Herbst Feb 03 '16 at 21:00
  • Thanks, say I want to move a
    using `$("div").css("margin-left","10px")`. Could u give a little detail how virtualDOM and real DOM treat this operation differently? Why virtualDOM have better performance, like what heavy job does virtualDOM skip while realDOM not?
     – Kuan Feb 03 '16 at 21:18
  • Well, if you do something like you just mentioned using jQuery, then you won't be using the virtual DOM. You need to do things the React way using props, state, and render. There are few reasons to use jQuery when working with React. – Matthew Herbst Feb 03 '16 at 21:42
  • thanks, I guess I did not express clearly, I mean in real DOM I use jquery to do that move, but if say virtual dom achieve that move operation without that heavy work(nothing about jquery here), then what does it skip to make it efficient compared with real DOM? – Kuan Feb 03 '16 at 22:15
  • 1
    Well, for a single operation jQuery is likely much much faster. However, most single page apps aren't just a single operation - you're changing lots of things, possibly hundreds of lines of HTML. Virtual DOM lets React do all those changes in memory and then make a single DOM update. Recall, [updating the DOM is - comparatively - very, very slow.](http://therockncoder.blogspot.com/2013/02/why-is-dom-slow.html) There are [various reasons for why it remains slow today.](http://stackoverflow.com/questions/6817093/but-whys-the-browser-dom-still-so-slow-after-10-years-of-effort) – Matthew Herbst Feb 04 '16 at 00:06