Repetition is impossible. You can’t write repetitive code in your life
Of course, this sentence minutes will be hit by the product face, every day Shouting change demand, elder brother, here to change the next good? Therefore, we need to abstract and encapsulate repetitive functionality or logic so that we can change requirements without having to change them everywhere
So this time we’ll talk about the advanced components in React
React Advanced components come in two ways:
- Use Higher Order Component ==> HOC
- Subcomponents as function modes (Render Props)
High order component
First, high-order components. It’s not an API provided by React. It’s a pattern, a pattern that enhances components
Higher-order functions: a function passed in as an argument returns a new function. Such functions are called higher-order functions
The so-called high-order component is passing in an existing component as a parameter and returning a new one. High-order rental is also divided into proxy mode and inheritance mode. Let’s take a look at a simple HOC:
import React from 'react'; function addNameProp(WrapperComponent) { return class extends React.Component { render() { const { name, ... props } = this.props; return <WrapperComponent {... props} name={name || 'cnyballk'} />; }}; } export default addNameProp;
Copy the code
In the code above we define an addNameProp. The prop () function adds a prop of name to a component that has no name passed in, and renders it
This higher-order component enhances the incoming component, which is also a proxy higher-order component,
So what about inheritance
import React from 'react';
function addNameProp(WrapperComponent) {
return class extends WrapperComponent {
render() {
this.props = {
...this.props,
name: this.props.name || 'canyballk',
};
return super.render();
}
};
}
export default addNameProp;
Copy the code
The main difference between inheritance mode and proxy mode is that one returns the passed component and the other calls the render method of the inherited parent component
⚠️ In proxy mode WrapperComponent has a full life cycle and the returned component has a full life cycle, while in inheritance mode WrapperComponent render has only one life cycle of the returned component
If we’ve used Connect in React – Redux, we know that connect is also a high-level component of proxy mode
⚠️ Advanced components can be used this way
@Wrapper class Index extends Component { ... Slightly}
Copy the code
emmmm… This involves js decorator, you go to search to learn ha
Render Props
So we’ve seen how higher-order components can be reused, and we’ve seen the benefits of higher-order components.
But what are the downsides of higher-order components?
As you can see, we passed a Prop with the name, and that is only possible if the component we passed can handle it. Besides, there is also the risk of naming conflicts. After all, some components have different props names, or sub-components need the same data but have different processing methods, so HOC is not applicable at this time
HOC is a black box to the user, who needs to see their implementation
Render Props is the data for you, and the rest is for you. Let’s look at a simple example
import React from 'react';
class AddNameProp extends React.Component {
render() {
const name = 'cnyballk';
return this.props.children(name);
}
}
export default AddNameProp;
Copy the code
Simple use
<AddNameProp>{name => <div> I call {name}</div>}< AddNameProp>
Copy the code
Want to pass to the component
<AddNameProp>
{name =>
<Hello name={name}/>;
}
</AddNameProp>
Copy the code
Or any other prop name
<AddNameProp>
{name =>
<Hello myName={name}/>;
}
</AddNameProp>
Copy the code
As you can see, this approach is very flexible because subcomponents are a function and anything is possible, so there are a lot of Render Props, but the disadvantage of Render Props is that it is difficult to optimize performance, and higher-order components can use SCU to avoid repeated rendering. Render Props is a pretty good model, though, and I like it a lot
Programmers can be lazy, but not copy-and-paste lazy
Of course there are a lot of people like lazy copy and paste, but as the saying goes, copy and paste is good for a while, code refactoring crematorium, once the need to modify requirements or bugs, everywhere obviously is not good, we should do a good job of packaging
summary
This article introduces two approaches to the React advanced component, both of which have their pros and cons, but both are designed to reuse code, and you can choose your own preferred mode
The high-order component proxy mode can be better controlled and implemented, while the inheritance mode can control the life cycle of a specific component. Compared with the high-order component, the Render Props mode is more flexible, with functions, we can have more freedom