is it true, the purpose of Ref is replacing document.getElementById??
Once i apply react, i should not use document.getElementById to access DOM to get data?
i found some article said that we can apply the this.refs to access the DOM
<input ref="test" value="option" id="option4"/>
console.log(this.refs.test);
But it can only run within the method within the component,
what if i want show the input value in console (developer Tools)?
It is true in a way, because react uses its virtual dom and diffing algorithm to watch changes and reflect in dom. If you use direct api to access dom. react could not access it in its virtual dom.
Thats why they have an unique id or keys just like in DOM to manipulate elements (components) as node.
If you see in confirm-alert components used in npm packages, they will create an element and render it as an element by using ReactDOM. As soon the toaster is finished it is not removed directly from the DOM.
First it is made to be find from the reactVirtualDom by using api findDomNode at https://reactjs.org/docs/react-dom.html#finddomnode
then it is unmounted using unmountComponentAtNode.
https://reactjs.org/docs/react-dom.html#unmountcomponentatnode
For example: https://github.com/GA-MO/react-confirm-alert/blob/master/src/index.js
So, refs are used to overcome direct DOM manipulation and changes that affect or effects the react rendering process.
Related
I have read lots of articles and believe this question is not the duplicated one.
According to What is the role of the render() function inside react component?
render function is part of the react component lifecyle where ReactDOM
is the class object which exposes a method called render which is used
to render the React JSX content into your DOM.
and I also read many articles which explain how the react virtual dom works, which uses diff process before render its node to the real-dom.
All the articles (at least what I've read) mention that render() reflects dom
I wonder if that dom is real-dom or virtual-dom
Actually I am having some trouble understanding componentDidUpdate() which is immediately invoked after render(), realizing my lack of understanding of component's render function
appreciate for your help
react interact with Virtual DOM.To apply updates/changes to real DOM, the Virtual DOM core feature comes into play, the reconciliation algorithm.
It's job is to come up with the most optimized solution to resolve the difference between previous and current Virtual DOM state. And then apply the new Virtual DOM to the real DOM.
this article will help to understand virtual DOM in depth https://medium.com/#gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e
componentDidUpdate is the last opportunity to react to change in props, during the given cycle of the react component's life.
It is the last opportunity because it has access to prevProps.
and BTW right after the render - getSnapshotBeforeUpdate(prevProps, prevState) is called and only then componentDidUpdate.
According to react doc -
getSnapshotBeforeUpdate() is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle will be passed as a parameter to componentDidUpdate().
So I assume that render method refers to the real DOM.
I'm assuming the virtual DOM, and that React takes care of it with diff'ing. But I had a recruiter say that ref's affect the actual DOM, I can't see how this can be. I assume that they were just mistaken.
Refs should reference the actual DOM. One usage of Refs is integrating with third-party DOM libraries, so you can directly modify the DOM using Refs. If Refs reference the virtual DOM, I don't think the demand can be meet. You modify a virtual DOM, but you can't make sure the modification would be synchronized to the actual DOM. Besides, if you want to modify actual DOM when using react, you should always modify the state of components instead of modifying the DOM by Refs.
Consider the following scenario:
I have a piece of (safe) HTML that I import in a js module and add to a React component using the dangerouslySetInnerHtml prop.
I then use the escape hatch that refs provide to access the mounted React component.
let foo = this.refs.foo;
And add an event listener to a DOM element inside that mounted component
foo.querySelector('a').addEventListener('click', callback, true);
Question Will React remove this event listener automatically when the component is unmounted, or do I need to do this manually in componentWillUnmount? I can't imagine why React wouldn't remove it along with the DOM node it was added to, but I couldn't find any reference to support or contradict my intuition.
What do you think?
Modern browsers will collect event handlers of removed DOM elements.
But if you hold a reference of that DOM element somewhere, the event handlers can't be collected by a browser and cause memory leak.
So the safest way is to remove all the event handlers in your componentWillUnmount.
If I render a component into a domNode and then again render another component into the same domNode my understanding is that this is a replace operation rather than an append. The first component will be removed from the dom and from the React Tree in the Virtual representation of the DOM. Therefore I don't need to specifically call ReactDOM.unmountComponentAtNode to clean up the first component.
Is this correct?
That is correct. According to the ReactDOM docs, on ReactDOM.render():
In the future, it may be possible to insert a component to an existing DOM node without overwriting the existing children.
This means that it is not even currently possible to append using ReactDOM.render() - components always get destroyed and replaced.
Generally it is better to avoid the ReactDOM module unless completely necessary. For most React apps, you'll find it is only used to render just the top level wrapper component to the DOM.
Here is scenario:
react renders components
external library changes dom structure and move a part to somewhere else in dom not handled by react
Result:
Every events set are not working anymore and exceptions..
Expected
Events (clicks) work
What do you think about it ?
Is it possible with react to rerender everything based of a new dom structure ?
Dom react structure is really changed, some part have moved somewhere else in DOM
Thanks,
Julien