How React components work?
source link: https://dev.to/fromaline/how-react-components-work-520f
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React Components are the fundamental building blocks of any React app. They allow us to simplify complex UIs by breaking them down into small chunks.
But as always every abstraction has its cost and the very concept of React Components confuses a lot of beginners, so let's figure it out!
React Component vs React Component instance vs React Element
These three terms seemingly refer to a single thing - UI element on the screen. But it's not true.
React Component
React Component is either a function or an ES6 class - nothing more, nothing less. You manage the state, handle events and implement other custom logic here.
It never renders anything to the screen. Instead, you create its instance to do that.
const TextButton = ({text}) => {
return <button>{text}</button>;
}
// It becomes more obvious with class-based component
// because you extend React.Component, not React.Element
class ListItem extends React.Component {
render() {
return <li>{this.props.children}</li>;
}
}
Enter fullscreen mode
Exit fullscreen mode
React Component Instance
It's exactly what it sounds like. You may have an instance of the React Component only at run time.
Also, you may have multiple instances, each with its own properties and local state. It happens when you use React Component more than once.
class ListItem extends React.Component {
constructor(props) {
super(props);
console.log(`This is instance ${this}`);
}
render() {
return <li>{this.props.children}</li>;
}
}
const App = () => {
return (
<ul>
<ListItem>First item</ListItem>
<ListItem>Second item</ListItem>
<ListItem>Third item</ListItem>
</ul>
);
}
Enter fullscreen mode
Exit fullscreen mode
React Element
React Element is what React Component Instance returns at run-time. It's a plain JavaScript object that completely describes a DOM node.
Multiple React Elements together form a virtual DOM, a tree-like structure that describes the UI of your React app.
// After Babel
const App = () => {
return React.createElement('ul', null,
React.createElement(ListItem, {children: 'First item'}),
React.createElement(ListItem, {children: 'Second item'}),
React.createElement(ListItem, {children: 'Third item'})
)
}
// At run-time
const App = () => {
return {
"type": "ul",
"key": null,
"ref": null,
"props": {
"children": [
{
"type": class ListItem,
"key": null,
"ref": null,
"props": {
"children": "First item"
},
},
// ...
]
}
}
}
Enter fullscreen mode
Exit fullscreen mode
The big picture of how React Components work
- React developers create either function-based or class-based React Components, that return JSX.
- Babel transpiles JSX to
React.createElement()
orjsx()
at build-time. - React creates necessary React Components Instances at run-time, and they return React Elements.
-
ReactDOM
renders the virtual DOM, that consists of React Elements.
P.S. That's all for today! Follow me on Twitter for future content!
How does React implement the useState hook? 🪝
React Hooks are a great tool, but how do they work under the hood?
In the following week or two, we'll re-implement hooks to figure out their inner workings!
Follow to not skip the other hooks!
#FrontEnd #ReactJS #javascript
🧵👇18:52 PM - 26 Jan 2022
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK