Was ist Hoc in React?

HOC ist eine fortschrittliche Technologie in React, die den logischen Wiederverwendungsteil von Komponenten extrahiert. HOC ist jedoch keine React-API, sondern eine Methode, die eine Komponente als Parameter empfängt und eine erweiterte Komponente zurückgibt.

Empfohlene verwandte Tutorials: React-Video-Tutorial

Was? Was ist HOC? HOC (High Order Component) ist eine fortschrittliche Technologie in react, die den wiederverwendeten Teil der Komponentenlogik extrahiert, aber HOC ist keine React API. Es handelt sich lediglich um ein Designmuster, ähnlich dem Dekoratormuster.

Konkret ist HOC eine Funktion, und die Funktion akzeptiert eine Komponente als Parameter und gibt eine neue Komponente zurück.

react 中对组件逻辑复用部分进行抽离的高级技术，但HOC并不是一个 React API 。 它只是一种设计模式，类似于装饰器模式。  

具体而言，HOC就是一个函数，且该函数接受一个组件作为参数，并返回一个新组件。 

从结果论来说，HOC相当于 Vue 中的 mixins(混合) 。其实 React 之前的策略也是采用 mixins ，但是后来 facebook 意识到 mixins 产生的问题要比带来的价值大，所以移除了 mixins。 想要了解更多

Why ? 为什么使用HOC

来看个例子

import React, { Component } from 'react'class Page1 extends Component{
  componentWillMount(){
    let data = localStorage.getItem('data')    this.setState({ data })
  }

  render() {    return (
      <h2>{this.state.data}</h2>
    )
  }
} 

export default Page1

这个例子中在组件挂载前需要在 localStorage 中取出 data 的值，但当其他组件也需要从 localStorage 中取出同样的数据进行展示的话，每个组件都需要重新写一遍 componentWillMount 的代码，那就会显得非常冗余。那么在 Vue 中通常我们采用:

mixins: []

但是在 React 中我们需要采用HOC模式咯

import React, { Component } from 'react'

const withStorage = WrappedComponent => {
  return class extends Component{
    componentWillMount() {
      let data = localStorage.getItem('data')
      this.setState({ data })
    }

    render() {
      return <WrappedComponent data={this.state.data} {...this.props} /> 
    }
  }
}

export default withStorage

当我们构建好一个HOC之后，我们使用的时候就简单多了，还看最开始的例子，我们就不需要写 componentWillMount 了。

import React, { Component } from 'react'
import withStorage from '@/utils/withStorage'

class Page1 extends Component{
  render() {
    return <h2>{this.props.data}</h2>
  }
}

export default withStorage(Page1)

很明显，这是一个装饰器模式，那么就可以使用ES7形式

import React, { Component } from 'react'
import withStorage from '@/utils/withStorage'

@withStorage
class Page1 extends Component{
  render() {
    return <h2>{this.props.data}</h2>
  }
}

export default Page1

How ? 怎么使用HOC

使用场景

• 操纵 props

• 通过 ref 访问组件实例

• 组件状态提升

• 用其他元素包装组件

Tips 注意事项

1，命名
把被包装的组件名称也包到HOC的显示名称中。
2，时机
不要在组件的 renderAus konsequentialistischer Sicht entspricht HOC mixins(mix) in Vue. Tatsächlich verwendete die vorherige Strategie von React auch Mixins, aber später erkannte Facebook, dass die Probleme durch Mixins verursacht wurden waren größer als Der Wert ist groß, daher wurden mixins entfernt. Möchten Sie mehr wissen? Komponente wird gemountet, um den Wert von data abzurufen, aber wenn andere Komponenten auch dieselben Daten aus localStorage zur Anzeige abrufen müssen, muss jede Komponente ComponentWillMount-Code, erscheint dieser sehr redundant. In Vue verwenden wir normalerweise:
rrreee
Aber in React müssen wir den HOC-Modus verwenden
rrreee
Nachdem wir ein HOC erstellt haben, ist es viel einfacher zu schauen Im ersten Beispiel müssen wir nicht componentWillMount schreiben.

rrreee

Natürlich ist dies ein Dekorationsmuster, dann können Sie das ES7-Formular verwendenrrreee

How? Nutzungsszenarien

Requisiten manipulieren

Zugriff auf Komponenteninstanzen über ref

Verbesserung des Komponentenstatus

Komponenten mit anderen Elementen umwickeln

Tipps Notizen

1, Name🎜 Legen Sie die Steppdecke auf Der umschlossene Komponentenname wird auch in den Anzeigenamen des HOC eingeschlossen. 🎜 2. Timing 🎜 Verwenden Sie HOC nicht in der render-Methode der Komponente und versuchen Sie, HOC nicht in anderen Lebenszyklen der Komponente zu verwenden. Da beim Aufruf von HOC jedes Mal eine neue Komponente zurückgegeben wird, wird bei jedem Rendern die Bereitstellung der von der vorherigen höherwertigen Komponente erstellten Komponente aufgehoben (unmount) und die dieses Mal erstellte neue Komponente wird erneut bereitgestellt (mountet). , was sich wiederum auf die Effizienz auswirkt, verliert den Zustand der Komponente und ihrer Unterkomponenten. 🎜 3. Statische Methoden 🎜 Wenn Sie die statischen Methoden der umhüllten Komponente verwenden müssen, müssen Sie diese statischen Methoden manuell kopieren, da die von HOC zurückgegebene neue Komponente nicht die statischen Methoden der umhüllten Komponente enthält. 🎜 4. ref 🎜 wird nicht an die verpackte Komponente übergeben 🎜🎜🎜Vergleich zwischen HOC und Mixin 🎜🎜🎜🎜🎜🎜🎜Komponenten höherer Ordnung gehören zur Idee der funktionalen Programmierung und werden sich der Existenz der verpackten Komponenten nicht bewusst sein von Komponenten höherer Ordnung, und die von Komponenten höherer Ordnung zurückgegebenen Komponenten verfügen über eine erweiterte Funktionalität gegenüber den Originalkomponenten. Der Mischmodus von Mixin fügt der Komponente kontinuierlich neue Methoden und Attribute hinzu. Die Komponente selbst kann dies nicht nur erkennen, sondern muss auch entsprechende Verarbeitungen durchführen (z. B. Namenskonflikte, Statuspflege). Die gesamte Komponente wird schwer zu warten sein, weshalb so viele React-Bibliotheken mit höherwertigen Komponenten entwickelt werden. 🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWas ist Hoc in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!