React high order components (3) high order components of inheritance mode

Time:2021-5-4

High order component of inheritance mode

If the passed in parameter component is wrappedcomponent, the returned component will inherit from the passed in parameter component if it is wrappedcomponent.

The difference between agent mode and high-level component

High level component of proxy mode
React high order components (3) high order components of inheritance mode

High order component of inheritance mode
React high order components (3) high order components of inheritance mode

As can be seen from the above two figures, there are two differences

1. The high-order component of inheritance mode inherits from react. Component, while the high-order component of proxy mode directly inherits from the passed in component parameters.
2. The return value is also significantly different. The higher-order component of inheritance mode needs to return the incoming component, while the higher-order component of proxy mode returns super. Render().

Application of high order component based on inheritance

There are two operations:

1. Control props.
2. Manipulate the life cycle.

1. Control props
First, create a high-order component D with inheritance mode, and manipulate props through the following methods.

import React from 'react'

const D = (WrappedComponent) => 
  class NewComp extends WrappedComponent {
    render() {
      //Gets the element content of the inherited incoming component
      const element = super.render()
      //Add style attribute to element label judgment
      const newStyle = {
        color:element.type === 'div' ? 'red' : 'yellow',
        fontSize: '50px'
      }
      //Define new props
      const newProps = {...this.props, style: newStyle}
      //The react. Cloneelement method generates a new react object
      return React.cloneElement(element, newProps, element.props.children)
    }
  }

export default D

Create common component E and inherit high-level component D

import React, { Component } from 'react'
import D from './D'

@D
class E extends Component {
  render() {
    return (
      < div > I'm div in E < / div >
    )
  }
}

export default E

Create common component F and inherit high-level component D

import React, { Component } from 'react'
import D from './D'

@D
class F extends Component {
  render() {
    return (
      <p>I'm P in F</p>
    )
  }
}
export default F

The results are as follows
React high order components (3) high order components of inheritance mode

2. Control the life cycle
First, log in the component will mount life cycle.

import React, { Component } from 'react'
import D from './D'

@D
class E extends Component {
  componentWillMount() {
    Console.log ('I am the life cycle of E ')
  }
  render() {
    return (
      < div > I'm div in E < / div >
    )
  }
}

export default E

The following effects can be seen on the console:
React high order components (3) high order components of inheritance mode

I’m sure everyone has no problem. I can see it clearly.

Next, we enter the same content in the inherited high-level component D:

import React from 'react'

const D = (WrappedComponent) => 
  class NewComp extends WrappedComponent {
    componentWillMount() {
      Console.log ('I inherit the life cycle of high-level component D ')
    }

    render() {
      const element = super.render()
      const newStyle = {
        color:element.type === 'div' ? 'red' : 'yellow',
        fontSize: '50px'
      }
      const newProps = {...this.props, style: newStyle}
      return React.cloneElement(element, newProps, element.props.children)
    }
  }

export default D

The following effects can be seen on the console:
React high order components (3) high order components of inheritance mode

Oh, roar, the life cycle content in E is missing, and it is hijacked by the inherited high-level component d. This is to inherit the high-level component to manipulate the life cycle

epilogue

Although this article introduces the inheritance of high-level components in detail, the official react document does not recommend you to use the inheritance of high-level components. Do not change the original component, using composition is the high-level component that should use proxy mode.
Please see the official website for details
https://zh-hans.reactjs.org/d…

Recommended Today

Looking for frustration 1.0

I believe you have a basic understanding of trust in yesterday’s article. Today we will give a complete introduction to trust. Why choose rust It’s a language that gives everyone the ability to build reliable and efficient software. You can’t write unsafe code here (unsafe block is not in the scope of discussion). Most of […]