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:

  1. Use Higher Order Component ==> HOC
  2. 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