반응이 뭐야?

HOC는 컴포넌트의 논리적 재사용 부분을 추출하는 React의 고급 기술이지만 HOC는 React API가 아닌 컴포넌트를 매개변수로 받아서 향상된 컴포넌트를 반환하는 방식입니다.

추천 관련 튜토리얼: React 비디오 튜토리얼

뭐? HOC란

HOC(High Order Component)는 컴포넌트 로직의 재사용되는 부분을 추출하는 react의 고급 기술이지만 HOC는 React API가 아닙니다. 데코레이터 패턴과 유사한 디자인 패턴일 뿐입니다. 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，时机
不要在组件的 render
구체적으로 HOC는 함수인데, 이 함수는 컴포넌트를 매개변수로 받아들이고 새로운 컴포넌트를 반환합니다.

결과론적 관점에서 HOC는 Vue의 mixins(mix)와 동일합니다. 실제로 React의 이전 전략에서도 mixins를 사용했지만 나중에 facebook는 mixins로 인해 문제가 발생한다는 것을 깨달았습니다. 값이 커서 mixins가 제거되었습니다. 더 알고 싶으세요

왜 HOC를 사용하나요?

예제를 살펴보겠습니다

rrreee

이 예에서는 localStorage가 필수입니다. code>를 마운트하여 <code>data의 값을 검색하지만 다른 구성 요소도 표시하기 위해 localStorage에서 동일한 데이터를 검색해야 하는 경우 각 구성 요소는 를 다시 작성해야 합니다. > componentWillMount 코드를 사용하면 매우 중복된 것처럼 보입니다. 그래서 Vue에서는 일반적으로 다음을 사용합니다.rrreee

하지만 React에서는 HOC 모드를 사용해야 합니다

rrreee

HOC를 빌드한 후 Looking을 사용하는 것이 훨씬 간단합니다. 초기 예에서는 comComponentWillMount를 작성할 필요가 없습니다.

rrreee

분명히 이것은 데코레이터 패턴이므로 ES7 양식을 사용할 수 있습니다

rrreee

HOC를 사용하는 방법

사용 시나리오

• 🎜props 조작🎜
• 🎜ref🎜
• 🎜를 통해 구성 요소 인스턴스에 액세스하세요. 컴포넌트 상태 개선🎜
• 🎜컴포넌트를 다른 요소로 감싸기🎜

🎜Tips Notes🎜🎜🎜1, 이름🎜 이불을 넣어주세요 래핑된 컴포넌트 이름은 HOC의 표시 이름에도 래핑됩니다. 🎜 2. 타이밍 🎜 컴포넌트의 render 메소드에 HOC를 사용하지 말고, 컴포넌트의 다른 라이프사이클에서도 HOC를 사용하지 마세요. HOC를 호출할 때마다 새로운 컴포넌트가 반환되기 때문에 렌더링할 때마다 이전 상위 컴포넌트에서 생성된 컴포넌트가 언마운트(언마운트)되고, 이번에 생성된 새로운 컴포넌트가 다시 마운트(마운트)됩니다. , 이는 효율성에 영향을 미치며 구성 요소와 해당 하위 구성 요소의 상태를 다시 잃습니다. 🎜 3. 정적 메서드 🎜 래핑된 구성 요소의 정적 메서드를 사용해야 하는 경우 이러한 정적 메서드를 수동으로 복사해야 합니다. HOC에서 반환된 새 구성 요소에는 래핑된 구성 요소의 정적 메서드가 포함되어 있지 않기 때문입니다. 🎜 4. ref 🎜는 래핑된 컴포넌트로 전달되지 않습니다. 🎜🎜🎜HOC와 Mixin의 비교 🎜🎜🎜🎜🎜🎜🎜고차 컴포넌트는 함수형 프로그래밍 아이디어에 속하며 래핑된 컴포넌트가 존재한다는 것을 인식하지 못합니다. 고차 구성 요소에 의해 반환되는 구성 요소는 원래 구성 요소 위에 향상된 기능을 갖게 됩니다. Mixin의 혼합 모드는 구성 요소에 새로운 메서드와 속성을 지속적으로 추가합니다. 구성 요소 자체는 이를 감지할 수 있을 뿐만 아니라 혼합 모듈 수가 증가하면 관련 처리(예: 이름 충돌, 상태 유지 관리)도 수행해야 합니다. 전체 구성 요소를 유지 관리하기가 어려워지기 때문에 많은 React 라이브러리가 고차 구성 요소를 사용하여 개발됩니다. 🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 반응이 뭐야?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!