All:
I wonder if I want to do data visualization using React JSX or Angular template to replace D3 DOM manipulation (such as .enter().append() .exit().remove()), how can I implement the animation transition like .transition().duration() in either of them?
For example, I build a line chart, in d3 after I change data set and generate new path, there is animation for those line to transform
Thanks
So, the problem with using D3.js in React is that both want control of the DOM, right?
D3 wants to directly select elements, add elements or remove elements based on the data being used, and add attributes to those elements.
React likes to have everything represented in it's virtual DOM and doesn't like any changes to the actual DOM without it's consent.
After some research, some people try utilizing some of React's different life cycle methods to instigate specific D3 methods at different points in a components life. For example, one approach wants you to return false to ComponentWillUpdate and use functional side-effects to run the D3 code on the actual DOM. While this works for some cases, it's still an improper use of React, and you're losing out on the benefits of passing state to any children components that component may be rendering.
I would suggest researching some of these approaches of how people have tried to tackle the issue, to see the root of the problem.
Also, feel free to try out this library my friends and I made that allows you to plug in your existing D3 code as is, and returns React components, and handles transitions, animations, timers, etc.
http://react-d3-library.github.io/
Always looking for more feedback!
Related
So I find React useRef ref's extremely helpful. I use them a lot to control style, get clientWidth and much more but I know that I'm just barely scraping the tip of ref's functionality.
Can anyone provide a list of all of the different keys and objects that can be accessed with useRef? (And a brief description of what it sets or returns)
I.E.
ref.current.style - changes css style for the element
ref.current.clientWidth - returns the elements width
I have searched Google and ReactJS.org and I have been unable to find such a list.
Everything about refs are given in the React documentation itself:
https://reactjs.org/docs/refs-and-the-dom.html.
Please note the subheading:
Refs provide a way to access DOM nodes or React elements created in the render method.
So if you are using refs to manipulate HTML Elements in your render, then you will be getting DOM nodes available in your browser. In simple terms, you get the same type of object when you access something like window.document, you get access to the properties and methods available on the traditional DOM node APIs for that particular element.
It's also possible to get refs to React Class Components, in that case, you get to access whatever properties and methods you get to access inside the component instance.
Please check the documentation to know more.
I just started to learn ReactJS. I was used jQuery and Javascript for all my projects previously and got few doubts on ReactJS after gone through tutorials.
Why I need ReactJS, still jQuery is there to update DOM and handlebar, dust is there to handle templating.
There's a concept Virtual DOM,In tutorials I can see it will take a copy of my DOM and updates only needed. Anyone please explain how it's differ normal DOM manipulation.
In React all event handlers are inline, <input onClick={this.eventSample} /> is this recommendable ?
I just started learning,If anyone clears me these doubts with some practical code example. It would be helpful for me to proceed further in React.
Thanks in advance.
With my understanding I'm explaining to make you understand :
Take an example of list times :
If one of these list items updates, then the DOM re-renders the entire list. This is where the DOM’s inefficiency stems from.
Ideally, we’d like to only re-render items that receive updates, leaving the rest of the items as-is.
React’s use of the Virtual DOM helps to reduce this inefficiency.
Normal DOM Manipulation :
Checks through all node’s data at a regular interval to see if there have been any changes.
This is inefficient because it requires traversing every single node recursively.
React's virtual DOM:
Components are responsible for listening to when an update takes place.
Since the data is saved on the state, components can simply listen to events on the state and if there is an update, it can re-render to the UI.
light-weight abstraction of the DOM. You can think of it as a copy of the DOM, that can be updated without affecting the actual DOM.
In fact, a new virtual DOM is created after every re-render.
When updates are supplied to the Virtual DOM, React uses a process called reconciliation — using a “diffing” algorithm that compares/contrasts changes in order to know what updates have taken place.
React then only updates those elements that have changed, leaving alone those that have not.
I hope this helps to shed some light on the advantages of efficiency with React’s use of a virtual DOM.
more at Why is React's concept of Virtual DOM said to be more performant than dirty model checking?
React, it’s so much more than a templating engine.
The JSX is, therefore, broader then template engines.
Hope you know how template engines work. here’s the comparison :
JSX/JS: javascript -> vdom
Template: string -> javascript -> vdom
// File 1 - templates/progress.html
<div class="progress-container">
<div class="progress-bar" data-style="width: $val"></div>
</div>
If you look at the template code, and the component separately, how can you tell where $val comes from?
// File 1 -- progress
const (val) => (
<div class="progress-container">
<div class="progress-bar" style={{width: val}}></div>
</div>
);
In this example, it is perfectly clear where val comes
more at https://stackoverflow.com/questions/32619168/react-engine-vs-other-template-engines
JQuery and React solve two completely different problems.
jQuery interacts with the DOM directly.
The idea is that DOM elements carry around too much unnecessary data, and the virtual DOM abstracts the relevant parts, allowing for faster performance.
In React, you modify the virtual DOM, which it then compares to the existing DOM elements and makes the necessary changes/updates.
Inline Events :
I can understand why you asked this, In HTML DOM you use inline events as “bad practice”.
Here, In React With JSX you pass a function as the event handler, rather than a string.
When using React you should generally not need to call addEventListener to add listeners to a DOM element after it is created.
Instead, just provide a listener when the element is initially rendered.
This is actually a React pro.
Hope I cleared your doubts as much as I can
I'm unit testing react components using Enzyme and I'm trying to figure out what html property to use to decorate nodes with enough information for me to select them in my tests. I'm hesitant to use className for a couple reasons. First if I set a className it implies that there is some styling specific to that node, and in many cases in my tests I just need a way to select the node and assert some things about it. Second I'm using CSS Modules so setting global class names just to support the unit tests feels wrong. Is there a good alternative to the class property people use for adding arbitrary info to nodes?
You're testing them via DOM rendering or shallow rendering? If shallow rendering you can set an arbitrary prop and assert on that. If you want to add arbitrary properties to DOM nodes you can use data- properties if there's not a better way to select the nodes you need to assert on.
I have a JS code which should do some things (animations etc.) BEFORE ReactJS possibly (or not) will update HTML element. I'm getting the whole template for this HTML element (i.e. part of the page, in particular a widget) for this purpose.
For example, I have a DIV with some content, which may change in time or not. Then I get a new version (i.e. as HTML template) of that DIV through AJAX call, and I want ReactJS first to compare the actual (or virtual) current DOM with the one just retrieved new HTML template for the same DIV in a string as got from AJAX call on success. Only then - when these two are different - it makes sense to do animations first, and only then update the actual DOM in the browser by React JS.
How to do that? Is there a method in React JS that allows me to get e.g. true/false when comparing virtual DOM with its new version as a HTML template got through AJAX (since it does internally this thing anyway - i.e. comparing current and updated DOM in its algorithm)?
EDIT: Hmm after initial thought that ReactJS is way much better than other JS Frameworks in my case (i.e. server functionality is already developed), I found multiple features not flexible enough; further more, I found ReactJS is not smart enough to figure out that only one element at the top of the list is added (ReactJS replaces the whole DOM template for the list, even with keys set for each element!), which suggests it's still not that mature as one could expect.
Besides, all Lifecycle methods with ***Component***Update are not called; only ***Component***Unmount are being called in the case of mentioned list. I can do it in a simpler way by myself, however Relay / Flux + ReactJS architecture is still nice, and I think I'll just abandon Facebook's implementation, and replace it with my own solution, inspired by Relay/Flux+ReactJS.
You might want to look at the following life cycle methods:
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
From the react docs:
componentWillUpdate
Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render.
Use this as an opportunity to perform preparation before an update occurs.
componentDidUpdate
Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render.
Use this as an opportunity to operate on the DOM when the component has been updated.
How do you create a ReactJS component that reaches multiple levels up the component/DOM hierarchy?
A good example of this is a Modal. I want to trigger and control the modal from a child nested way down in my app, but a Modal requires that the DOM be much higher, most likely all the way up as a child of the document body.
I'm considering a "portal" pattern, as described here: https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md#portals
FakeRainBrigand even wraps the pattern up nicely in a mixing in this post: https://stackoverflow.com/a/26789089/586181
This feels like a hack to me. Great if you want to use a non-react library like jquery-ui, but without that need breaking out of react just to render a react component somewhere else in the DOM seems like overkill. Is there a more "React" way of achieving this?
Thanks
I'll leave this best to the react documentation. If you must have buried React elements that need to communicate with other elements outside of their Parent Child or possibly even grandparent than see the below.
For communication between two components that don't have a
parent-child relationship, you can set up your own global event
system. Subscribe to events in componentDidMount(), unsubscribe in
componentWillUnmount(), and call setState() when you receive an event.
https://facebook.github.io/react/tips/communicate-between-components.html
I've written a library to help with this. I avoid the DOM insertion hacks used by Portal strategies out there and instead make use of context based registries to pass along components from a source to a target.
My implementation makes use of the standard React render cycles. The components that you teleport/inject/transport don't cause a double render cycle on the target - everything happens synchronously.
The API is also structured in a manner to discourage the use of magic strings in your code to define the source/target. Instead you are required to explicitly create and decorate components that will be used as the target (Injectable) and the source (Injector). As this sort of thing is generally considered quite magical I think explicit Component representation (requiring direct imports and usage) may help alleviate confusion on where a Component is being injected.
You can completely use my library to bind a ModalComponent to a root level component that you decorate with the Injectable helper. I plan on adding an example of this use case soon. It even supports natural props pass throughs, and all the various component types i.e. stateless/class.
See https://github.com/ctrlplusb/react-injectables for more info.