Composition vs Inheritance
Na is this article we will compare the two concepts “Ingredients” and “Inheritance”.
One of React’s strengths is its design in the “component” direction, subdividing the application into multiple components, and React also recommends developing the application in the direction of “Components” rather than “Inheritance” to facilitate More convenient for reuse between components.
In this article, we will explore some issues related to inheritance and how to solve problems by breaking down into “Components”.
Containment
While working on a project we may encounter some components that they do not yet have details that depend on the passed properties. For example, some basic components are designed to be used in many places.
For example, 2 Component Sidebar or Dialog , 2 Components will have different content on each screen and will depend on what is passed to them.
And in React to solve this problem, the manufacturer recommended using a special prop, called children to pass the element to the Component.
1 2 3 4 5 6 7 8 | <span class="token keyword">function</span> <span class="token function">FancyBorder</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token string">'FancyBorder FancyBorder-'</span> <span class="token operator">+</span> props <span class="token punctuation">.</span> color <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token punctuation">{</span> props <span class="token punctuation">.</span> children <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
And this component will be used as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">function</span> <span class="token function">WelcomeDialog</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> FancyBorder color <span class="token operator">=</span> <span class="token string">"blue"</span> <span class="token operator">></span> <span class="token operator"><</span> h1 className <span class="token operator">=</span> <span class="token string">"Dialog-title"</span> <span class="token operator">></span> Welcome <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> p className <span class="token operator">=</span> <span class="token string">"Dialog-message"</span> <span class="token operator">></span> Thank you <span class="token keyword">for</span> visiting our spacecraft <span class="token operator">!</span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> FancyBorder <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
As in the above example, everything wrapped in FancyBorder tags is collected into prop children and when Render, FancyBorder component will render children into a Div tag as in the above example.
It is a simple example of sending a content to the Component, but in reality we sometimes need to pass more content into how.
In such cases, you can set your own conventions and pass them on as a custom prop instead of using prop children
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="token keyword">function</span> <span class="token function">SplitPane</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"SplitPane"</span> <span class="token operator">></span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"SplitPane-left"</span> <span class="token operator">></span> <span class="token punctuation">{</span> props <span class="token punctuation">.</span> left <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div className <span class="token operator">=</span> <span class="token string">"SplitPane-right"</span> <span class="token operator">></span> <span class="token punctuation">{</span> props <span class="token punctuation">.</span> right <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">App</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> SplitPane left <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator"><</span> Contacts <span class="token operator">/</span> <span class="token operator">></span> <span class="token punctuation">}</span> right <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator"><</span> Chat <span class="token operator">/</span> <span class="token operator">></span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
In the above example, the two components <Contact /> and <Chat/> are 2 objects, and you can pass it into the other Component as other data types. One of React’s strengths is this,
- You are not limited in the number of props passed into each component
- You declare and pass into the Component object, you will find it in
this.props
Specialization
In React, we aim to split Application of the Thành Phần Where separate component has many similarities.
Turn to the FancyBorder Component example.
Now we need a component like this:
- It is a Component like FancyBorder
- It can change data based on input
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">function</span> <span class="token function">Dialog</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> FancyBorder color <span class="token operator">=</span> <span class="token string">"blue"</span> <span class="token operator">></span> <span class="token operator"><</span> h1 className <span class="token operator">=</span> <span class="token string">"Dialog-title"</span> <span class="token operator">></span> <span class="token punctuation">{</span> props <span class="token punctuation">.</span> title <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> p className <span class="token operator">=</span> <span class="token string">"Dialog-message"</span> <span class="token operator">></span> <span class="token punctuation">{</span> props <span class="token punctuation">.</span> message <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> FancyBorder <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">WelcomeDialog</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> Dialog title <span class="token operator">=</span> <span class="token string">"Welcome"</span> message <span class="token operator">=</span> <span class="token string">"Thank you for visiting our spacecraft!"</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Breaking down into smaller components is convenient and can be used in many places, such as in a class
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <span class="token keyword">function</span> <span class="token function">Dialog</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> FancyBorder color <span class="token operator">=</span> <span class="token string">"blue"</span> <span class="token operator">></span> <span class="token operator"><</span> h1 className <span class="token operator">=</span> <span class="token string">"Dialog-title"</span> <span class="token operator">></span> <span class="token punctuation">{</span> props <span class="token punctuation">.</span> title <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> p className <span class="token operator">=</span> <span class="token string">"Dialog-message"</span> <span class="token operator">></span> <span class="token punctuation">{</span> props <span class="token punctuation">.</span> message <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token punctuation">{</span> props <span class="token punctuation">.</span> children <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> FancyBorder <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">SignUpDialog</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleChange <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleChange <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleSignUp <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleSignUp <span class="token punctuation">.</span> <span class="token function">bind</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> login <span class="token punctuation">:</span> <span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> Dialog title <span class="token operator">=</span> <span class="token string">"Mars Exploration Program"</span> message <span class="token operator">=</span> <span class="token string">"How should we refer to you?"</span> <span class="token operator">></span> <span class="token operator"><</span> input value <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> login <span class="token punctuation">}</span> onChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleChange <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token operator"><</span> button onClick <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleSignUp <span class="token punctuation">}</span> <span class="token operator">></span> Sign Me Up <span class="token operator">!</span> <span class="token operator"><</span> <span class="token operator">/</span> button <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> Dialog <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">handleChange</span> <span class="token punctuation">(</span> e <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> login <span class="token punctuation">:</span> e <span class="token punctuation">.</span> target <span class="token punctuation">.</span> value <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">handleSignUp</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token string">`Welcome aboard, </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> login <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">!`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
So What About Inheritance?
One of the biggest applications built with React is Facebook, it works on a combination of thousands of small components, and so far Facebook developers have not found any Component cases yet. use inheritance.
With props and splitting the Application into multiple components, it will give you flexibility to handle your Components. And always remember that Component can accept any props including basic values, React Element, or maybe a function.
Also, if you want to use functions between components, you only need to Export, and Import without having to extend