I've just started learning React and in the ReactDOM.render there is document.getElementById('someid'), what does it do?
It's the container to which the contents of the first parameter will be rendered to.
Check out public/index.html in your project if you use create-react-app. You should be able to find the <div> with an ID of root (the default value for create-react-app). You can change the ID of that div, but you will have to change the ID in the getElementById call in your index.js.
Here's what the documentation says about it: https://reactjs.org/docs/react-dom.html#render
ReactDOM.render(element, container[, callback])
Render a React element into the DOM in the supplied container and
return a reference to the component (or returns null for stateless
components).
If the React element was previously rendered into container, this will
perform an update on it and only mutate the DOM as necessary to
reflect the latest React element.
Related
Why the component Demo does not rerender on counter change?
I understand that props.children are equal to the previous ones, however local state changes, so it should rerender. Is changing local state optimized somehow to detect whether some part of the Top component should be rerendered or shouldn`t?
Children props example
In the second example it does rerender, what is the difference between these examples?
Local state change
In the examples you can click on button and see in the console whether Demo is rerendered.
In the first case you're passing the children which is a part of props and essentially on each re-render of Top component, the same children reference is being returned so React detects that and doesn't re-render the Demo component.
In the second case, React will internally execute React.createElement(...) again to create the Demo component and that's a new reference.
Here is a good line to remember this by :-
if a React component returns the exact same element reference in its
render output as it did the last time, React will skip re-rendering
that particular child
I referred this here - https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#component-render-optimization-techniques
This is because passing children argument to the Top component you are passing a reference to this object. React can detect that nothing has changed comparing to the previous version so it will not re-render it.
When you are rendering component using name <Demo /> in your Top component you are rendering a new version of Demo component every time.
When cloning a stateful component using cloneElement, is the state kept?
cloneElement clones React element, not an instance of underlying component.
This results in creating new element that has same type, key, ref as original element and also inherits props from it.
React element is an object that is created by createElement. It's basically a blueprint that is used to render a component. It may have no respective component instances at all, in case it wasn't rendered.
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.
I have a React element with a name attribute and child text, both of which are taken from the same value in props.
When re-rendering a React component with a different prop value, only the child text is updated, but the name attribute stays the same:
var Inner = React.createClass({
render: function () {
var name = this.props.name;
return ( <div name={name}>{name}</div> );
}
});
React.render(<Inner name="red"/>, document.getElementById('outer'));
// element is now <div name="red" data-reactid=".0">red</div>
React.render(<Inner name="green"/>, document.getElementById('outer'));
// element is now <div name="red" data-reactid=".0">green</div>
As you can see, after the second call to React.render, the name attribute is still red. (see http://jsfiddle.net/chyp9mxL/)
This problem can be resolved by adding a key={name} in the render function, but I don't see why I have to. Aren't keys only needed when we have multiple components? We only have one here.
Is it because div does not recognize name as a valid prop? I remember reading that passing illegal props to native DOM elements may give unexpected results.
Adding key as a prop simply would have given that div an identity. So React could identify that child and update the value properly.
The key here is to understand not everything in the DOM has a
representation in React "Virtual DOM" and, because direct
manipulations of the DOM (like a user changing an value or a
jQuery plugin listening an element) are unnoticed by React, not using
unique and constant keys will end up with React recreating the DOM
node of a component when the key is not constant (and losing any
untracked state in the node) or reusing a DOM node to render another
component when the key is not unique (and tying its state to this
other component).
Says this article. But it's really strange! I hope someone comes up with a proper explanation.
Because div is not a react component, you can just pass props to react components! You need read more about react prop,here is react props documents.
In Backbone.js, you can specify a view's element by using the el property or by calling view.setElement().
Is there an equivalent way of hooking up a React.js component to an existing DOM element?
I'm not overly familiar with Backbone, but to hook a React component into the DOM you use the renderComponent function. The first arg is the component, and the second is a DOM element:
React.renderComponent(<SampleComponent />, document.getElementById('app'));
Updated per the context given in the comments:
React hooks up to an element by replacing its contents, but not the element itself. You can call renderComponent() more than once on that element and it will run the same diff algorithm each time. This is handy if you want to pass in different props, pre-render on the server, or render a different component entirely. The same process is used to update the actual DOM each time, just like if you were to use setState() within the component itself.