Hello, I’m Edong. In-depth interview series is a series of advanced articles I wrote specifically for the interview, the target population is one to five years need to advance the front end, this is the first.
Why insist on writing this series? Because our business development work at ordinary times it is difficult to directly access to some of the original rational knowledge, don’t have time to do a systemic summary, hindering our technology, and these things are programmers advanced and interview success must grasp, so deeply to understand and summarize some knowledge is necessary, hope can always stick to it.
What interview questions can this article solve:
- What are the ways React can reuse component logic?
- What is the difference between React high-order components and Render Props?
Try answering these two questions after you finish reading this article, in case you’re asked in your next job interview.
background
Throughout React development, a major problem that deserves our attention and design is how to encapsulate and reuse components. We can easily use the React component to encapsulate and reuse THE UI, but for some logic used by multiple components, how can we achieve elegant reuse?
Consider, for example, a scenario where there are two components, each of which requires a logic that counts the number of clicks on the component. Clearly this logic can and deserves to be reused. So what are the ways to reuse it?
The first instinct of a programmer with experience in object-oriented design is to design a parent class with a method that counts the number of clicks a component has, and then any component class can inherit that parent class.
However, in the React ecosystem, we recommend using composition instead of inheritance to achieve logical reuse between components. Next, I’ll summarize how React reuses component logic in terms of high Order Components, render props, and hooks.
hoc
First, we introduce higher-order components. What is a high Order Component? In simple terms, it is a method that takes a component and returns a new one in a way that enhances the functionality of the original component without breaking its logic, as is often the case in the Redux library. Recall that if we extract the count state, click calculation logic into a clickCountHoc component, then all components that require this logic can be combined with clickCountHoc components in a higher-order component manner to have the ability to count component clicks. Here is a sample of the code (source address:react-component-combination) :
This way, whatever component needs to count the number of clicks can be enhanced in a higher-order component way. Higher-order components are widely used in business development, such as unified log printing, unified error reporting, extraction of common functions and so on.
render props
Next, let’s look at renderProps.
Render props is a technique for telling components what to render using props. Many times we render a component, but its logic and data is dependent on the parent component, in this case we can put the part can reuse the logic of the extraction in the parent component, and the parent component exposed a render parameter to receive the child component method, and through this method to traverse to the child components rely on data to it, This approach is called render props.
Here is a sample of the code (source address:react-component-combination) :
In this way, the child component doesn’t need to care about the logic of the parent component at all, just do the rendering according to the data from the parent component. All the things that the higher-order component can do, the render props can do.
So what distinguishes it from higher-order components? The idea of using render props is inversion of control. The child component defines a function to render itself using render props. The parent component then passes the data needed by the child component to the function, and the child component can render itself at will after receiving the data.
hooks
Finally, we introduce hooks.
React hooks are a new feature from React 16.7.0-alpha that allows logic reuse. I will cover the technical principles and design of the hooks in the following in-depth interview series. For now, we only use hooks to package the logic that obtains the current mouse position on the screen.react-component-combination) :
In addition to encapsulation state, there are several other apis available, which we will cover later. As seen in this demo so far, the hooks logic is clear, easy to reuse, and use functional components directly. They are short and concise, and will be the common way to package logic in the future.
I am Erdong, currently working as a front-end engineer in a large factory. My public account is “Front-end erdong”.
The public number will update the article every week, mainly including: 1, front-end technology analysis, whether it is new technology taste, source code analysis, serial tutorial, I will involve 2, programmers related workplace experience, such as how to promote programmers, programmers should pay attention to what job hopping and so on
In addition, we also provide the following services: 1, resume modification 2, technical consulting 3, technical planning
Welcome to “Front Ear East”