I see three (3) properties on a value my react component is returning namely keys, props and type and i am blank on how they work. I even see a fourth one called ref when i use the createElement method to create my DOM elements. Any help that would enlighten me on the area will be much appreciated. Thank you.
Just a note - your questions are asking about the fundamental way that React works (pertaining to the use of the Virtual DOM and its component-based structure). I'll try to sum it up as much as possible and give links to resources that might be helpful.
The key attribute relates to the way React uses the Virtual DOM and one of the reasons it works as fast as it does. In short, React supports the key attribute to improve its ability to differentiate sibling elements/components from each other and prevent re-painting the whole element tree if only one of the sibling changes. I suggest reading further on this to better understand it.
The props attribute relates to how React passes data from one component to another (usually from a parent component to a child component). Think of them as the arguments that you pass to a function - where the function is React's internal way of compiling your code and eventually rendering the DOM elements.
type should be pretty straightforward - its used to determine the type of component/element (eg: div, or a React function component)
The ref attribute relates to a way that you can store references to a particular element. By passing a React ref to a component/element's ref attribute, you're essentially storing access to that component/element through the React ref. There are some pretty good explanations out there about how it works on a conceptual level.
Note that my use of the word "component" refers to a React components, and "element" refers to the DOM element
Related
How to do this easily ? I uses Angular so I don't usually think about this problem as Angular does it automatically. in Angular, I can pass a variable from controller down to any "children" directive in any depth, and when that variable is changed, it permeates in all directives and controller who use it.
In React however, one must use callback which is then passed through layers of React component: passing data from child to parent component - react - via callback function.
I use the above solution to pass a single variable through 3 different React components :
APP --> TABLE --> ROW_TABLE
EDIT: It is not that I don't understand how to pass the variable through layers of component. I just think there must be more easier way to do this.
I think this solution is quite complicated. Keep in mind that we usually deal with more than three "components" in the real life. Can someone give me suggestion of how to do this 'right' ?
I'm just learn React for a day now so I must miss something. Thank you
If you want to pass a variable through many childs, the most correct way of doing it in React is just passing them through props.
If you don't want to use this aproach you could use state management libraries like redux.
If you want instead to do this using pure React you could use the component's context, although it is not recommended.
See more about context here https://reactjs.org/docs/context.html
In the docs, React says that it doesn't really care for instances as the Components take props as input and outputs elements for you. It gives you an example at the top of how other frameworks have to create an instance and then connect it to the DOM to handle different events. But I don't understand how this is different than what React is doing.
You're not calling new on your component in React, but you still have to render it and create all the same handlers. And this inside the component still refers to the instance, so doesn't React still have to create an instance each time your component is rendered (even if it's a component inside an <li> that's being rendered several times at once).
Traditional frameworks will have to create multiple instances of the same component to connect to each DOM node it corresponds to, isn't that what React is doing too? How else can one component keep track of multiple this's?
Indeed, React creates Component instance internally. You don't need to worry about using new.
React Element is just a plain JavaScript Object that describes what you want to be rendered (React.Component or HTML Element, if type is a String).
From the docs:
An element is not an actual instance. Rather, it is a way to tell
React what you want to see on the screen. You can’t call any methods
on the element. It’s just an immutable description object with two
fields: type: (string | ReactClass) and props: Object1.
The difference is that you the developer are not having to write the code to do all that. You just write the render method and your callbacks and let React worry about creating the DOM elements and the component instances and connecting them together.
I learned that react uses key to recognise an element (component).
Which of the followings does react consider to recognize an element?
Are there anything else?
key
element type
where the element is located in the entire tree
You are correct in everything you have stated. You can verify it by inspecting your react application's elements and looking at the components. For example, you'll see divs with data-reactroot, data-reactid
You may also want to check out https://github.com/facebook/react-devtools
You're correct in that React uses keys to identify instances (components). And while it's not really about performance, keys are used to determine which instances can be reused (and therefore also leads to better performance). If the keys were to change all the time, React would unnecessarily have to recreate nodes, and child components would lose their state.
Every level of your React application has a key. When using JSX, you can specify the key explicitly using: <Button key={id} />. If no key attribute is provided, React will use the index of the component (in the current level) to implicitly add a key property to the component.
So why wouldn't you always let React do this for you? For components that maintain data in this.state, things can get weird if siblings (in the same level) are removed or re-ordered. You can read more about this in the React documentation.
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.
I sometimes find it useful to use React's Refs in order to change the state of the DOM as for example to focus an input field after rendering a component. Does Reagent or Om implement this or if not what is the idiomatic way to do this in those libraries?
EDIT (after the discussion below).
The use of this.getDOMNode in componentDidMount is not a generic solution to this problem. It only allows access to the physical DOM element after a component is mounted. Sometimes consistent access to an element is required after every call to render - as for example for triggering events. The way to do that is through Refs.
I found the answer from the author of Reagent here if anyone cares to look. It turns out refs cannot be directly supported because of the way Reagent does its rendering. The proposed solution is to wrap the portion of a component that needs to be referenced in another component and use component-did-mount in the wrapper.