Before, we might have seen a lot of articles analyzing HOC and render props, but in 2020, we have a new love, “Hook.”

This article will examine the pros and cons of hook, Render props, and HOC modes. To give you a thorough understanding of these three modes. Also, it tells you why you should use hooks whenever possible.

HOC

How to create HOC

To learn HOC, we only need to remember the following two definitions:

  1. Creates a function that takes a component as inputIn addition to components, other parameters can be passed
  2. A different component is returned based on this component.

The code is as follows:

function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, props)
      };
    }
    // Some general logic processing
    render() {
      / /... And render the wrapped component with the new data!
      return <WrappedComponent data={this.state.data} {. this.props} / >; }}; }Copy the code

The advantages of HOC

  • It does not affect the state of the inner components and reduces the coupling degree

The disadvantage of HOC

  • Fixed props may be overwritten.
<MyComponent
  x="a"
  y="b"
/>
Copy the code

If these two values are the same as the higher-order component values, then x and y will be overwritten by the higher-order component values.

// If withMouse and withPage use the same props, such as x, y.
// There will be conflicts.
export default withMouse(withPage(MyComponent));
Copy the code
  • It cannot clearly identify the source of the data

WithMouse (MyComponent) It doesn’t tell you what props are contained in the component, increasing the time to debug and fix the code.

render props

Function: Pass state in a component as props to the caller, who can dynamically decide how to render.

The way to create render props

  1. Receives an externally passed props property
  2. Pass the internal state as an argument to the props property method of the calling component.

The code is as follows:

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.state = { x: 0.y: 0 };
  }
Copy the code
render() {
return (
<div style={{ height: '100'}} % >// Use the render props attribute to determine what to render {this.props. Render (this.state)}</div>); }}// Call method:
<Mouse render={mouse => (
<p>The mouse position is {mouse.x}, {mouse.y}</p>)} / >

disadvantages

  • Data cannot be accessed outside the return statement

It does not allow its data to be used outside of a return statement. As in the example above, x and y values cannot be used anywhere else in the useEffect hook or component, only in return statements.

  • nested

It can easily lead to nested hell. The following code:

const MyComponent = (a)= > {
  return (
    <Mouse>
      {({ x, y }) => (
        <Page>
          {({ x: pageX, y: pageY }) => (
            <Connection>
              {({ api }) => {
                // yikes
              }}
            </Connection>
          )}
        </Page>
      )}
    </Mouse>)};Copy the code

Based on the above two ways, both have their disadvantages, so we come to the most fragrant solution: hook

hook

Let’s look at an example:

const { x, y } = useMouse();
const { x: pageX, y: pageY } = usePage();

useEffect(() => {

Copy the code
}, [pageX, pageY]);

As you can see from the code above, hooks have the following features. It addresses the shortcomings of hoc and render props above.

  • Hook can be renamed

If the two hooks expose the same parameters, we can simply rename them.

  • Hooks clearly mark the source

From the above example, you can simply see that x and y come from useMouse. The x, y below are derived from usePage.

  • A hook lets you use data outside of a return
  • Hooks are not nested
  • Easy to understand, compared to hoc and render props, it is very intuitive and easier to understand.

conclusion

When choosing between hook, Render props, and HOC(higher-order Components), use hook whenever possible.

Reference article [1]

The last


Pay attention to “front-end plus”, the first time to get quality articles.

The resources

[1]

Refer to the article: https://dev.to/bettercodingacademy/react-hooks-vs-render-props-vs-higher-order-components-1al0