React의 기능적 하위 구성요소와 고차 구성요소에 대한 자세한 설명

이 글은 React의 함수 하위 구성 요소와 상위 구성 요소에 대한 자세한 설명을 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

React 프로젝트를 접한 후 대부분의 사람들은 이미 HOC(High-Order-Components)와 FaCC(Functions as Child Components)를 이해하거나 사용해왔을 것입니다. 왜냐하면 이 두 모드는 대부분의 React 오픈 소스 Curry에서 사용되기 때문입니다. 예를 들어, 반응 라우터의 withRouter는 하나의 구성 요소를 받아들이고 또 다른 향상된 구성 요소를 반환하는 일반적인 고차 구성 요소입니다. 반응 모션의 모션은 일반적인 FaCC 애플리케이션입니다.

HOC와 FaCC는 매우 유사한 작업을 수행하며 둘 다 디자인 패턴의 데코레이터 패턴과 유사합니다. 모든 기능은 원래 인스턴스 또는 장치에서 향상되었습니다.

물론 일부 오픈 소스 라이브러리뿐만 아니라 일상적인 코드 작성에서도 HOC 및 FaCC를 사용하여 일부 로직을 캡슐화하는 데 적합한 곳이 많이 있습니다. 예를 들어 데이터 매장 지점, 새로운 기능 전환, 전환 데이터 획득 등이 있습니다. 코드 가독성과 로직 재사용을 향상시키는 데 매우 유용합니다.

HOC

우리는 모두 함수를 받아들이고 캡슐화된 함수를 반환하는 고차 함수를 사용했습니다:

const plus = first => second => (first + second)
plus(1)(2) // 3

그리고 고차 구성요소는 고차 구성요소에 적용되는 고차 함수의 개념입니다:

const withClassName = ComposedComponent => props => (
   <composedcomponent></composedcomponent>
)

// 使用
const Header = text => (<header>{text}</header>)
const headerWitheClass = withClassName(Header)

구성 요소 수락은 새 래핑된 구성 요소를 반환합니다. 우리가 자주 사용하는 withRouter는 localtion과 같은 속성을 원래 구성요소 props에 추가하는 것입니다. props를 추가하는 것 외에도 고차 구성 요소는 다음 작업도 수행할 수 있습니다. withRouter就是在原有组件props上面在加上localtion等属性。除了添加props以外高阶组件还能做到：

• 在真正调用组件前后做一些事，比如埋点数据等

• 判断组件是否该render，或则应该render其他的东西，比如出错之后render错误页面

• 传递props并增加新的props

• 不render组件，转而做一些其他的事情，比如渲染一个外部的dom

对于上面的前三点都比较好理解，解释一下第4点。比如你在render了一个页面之后，需要改变一下页面的title.这是单页应用普遍存在的一个需求，通常你可以在具体router库中使用hook去实现。当然也可以通过HOC来实现：

const withTitleChange = ComposedComponent => {
  return class extends React.Component {
    componentDidMount () {
      const { title } = this.props
      document.title = title
    }
    render () {
      const props = this.props
      return <composedcomponent></composedcomponent>
    }
  }
}

FaCC

同样FaCC也是用于增强原有组件能力的一种模式，其主要功能的实现在于react的props.children可以是任何东西，包括函数。我们可以拿上面class的例子用FaCC再实现一遍：

const ClassNameWrapper = ({ children }) => children('demo-class')

// 使用

const HeadWithClass = (props) => (
  <classnamewrapper>
    {(class) => <header></header>}
  </classnamewrapper>
)

在FaCC中你也可以像HOC一样在生命周期中做很多事对原有的组件进行封装，基本上HOC能做的FaCC也都能做。我所在的项目之前都是大范围的使用HOC，再经过一番讨论后，开始大范围的转变成FaCC。

区别

两者都是用来增强原有组件的，具体该使用那种？那种是正确的模式？社区关于这一点也有很多讨论，比如就有人说FaCC是反模式：Function as Child Components Are an Anti-Pattern。他给出的理由是children并不语义化，会造成困惑，然后他提出了Component Injection

구성 요소가 실제로 호출되기 전후에 데이터 묻어두기 등 몇 가지 작업을 수행합니다.

1. 구성 요소를 렌더링해야 하는지 결정하거나 오류 후 오류 페이지를 렌더링하는 등 다른 것을 렌더링해야 하는지 결정

props를 전달하고 새 props를 추가

구성 요소를 렌더링하는 대신 다른 작업을 수행하세요. 외부 돔 렌더링과 같은

1. 위의 처음 세 가지 사항은 비교적 이해하기 쉽습니다. 네 번째 사항을 설명하겠습니다. 예를 들어, 페이지를 렌더링한 후 페이지 제목을 변경해야 합니다. 이는 단일 페이지 애플리케이션의 일반적인 요구 사항입니다. 일반적으로 이를 위해 특정 라우터 라이브러리의 후크를 사용할 수 있습니다. 물론 HOC를 통해서도 달성할 수 있습니다.

// HOC example
import View from './View'

const DetailPage = withServerData(withNavigator(View))

FaCC

마찬가지로 FaCC도 원래 구성 요소의 기능을 향상시키는 데 사용되는 모드입니다. 주요 기능은 반응의 props.children이 기능을 포함하여 무엇이든 될 수 있다는 것을 깨닫는 것입니다. . 위의 클래스 예를 FaCC로 다시 구현할 수 있습니다.

// FaCC example

import View from './View'

const DetailPage = props => (
  <fetchserverdata>
    {
      data => (
        <navigator>
          <view></view>
        </navigator>
      )
    }
  </fetchserverdata>
)

1. FaCC에서는 원래 구성 요소를 캡슐화하기 위해 HOC와 같이 수명 주기에서 많은 작업을 수행할 수도 있습니다. 기본적으로 FaCC는 HOC가 수행할 수 있는 작업을 수행합니다. 제가 진행하고 있던 프로젝트는 HOC를 대규모로 활용하던 프로젝트였는데, 몇 가지 논의 끝에 대규모로 FaCC로 전환되기 시작했습니다.
   Difference

둘 다 원래 구성 요소를 강화하는 데 사용됩니다. 어느 것을 사용해야 합니까? 올바른 모델은 무엇입니까? 예를 들어, 일부 사람들은 FaCC가 안티 패턴이라고 말합니다. 하위 구성 요소로서의 기능은 안티 패턴입니다. 그가 제시한 이유는 아이들이 의미론적이지 않아 혼란을 야기할 수 있다는 점이었습니다. 이에 관심 있는 학생들이 읽을 수 있는 컴포넌트 주입 모델을 제안했습니다.

여러 측면에서 비교해 보겠습니다.

결합 단계

결합 단계는 HOC, FaCC 및 향상될 구성 요소의 결합을 의미합니다. FaCC는 전면 및 후면 구성 요소의 도킹에 대한 종속성 정보를 더 많이 표시하므로 상대적으로 이해하기 쉽다는 것을 분명히 알 수 있습니다. HOC의 경우 어떻게 서로 연결해야 할까요? HOC에 대해 자세히 알아보고 이 HOC가 수행하는 작업을 알아보려면 코드를 읽어야 합니다.

rrreeerrreee위에 HOC를 2개 더 추가하면 위의 조합 과정이 매우 추악해집니다. 상대적으로 말하면 FaCC를 사용하면 어떻게 캡슐화되는지, 데이터 소스가 어디서 왔는지, 구성 요소가 어떤 데이터를 수신하는지가 모두 더 눈에 띕니다.

성능 최적화

HOC에서는 prop이 HOC에서 전달되기 때문에 호스트로부터 prop을 받을 수 있습니다. 따라서 전체 수명 주기도 있으므로 shouldComponentUpdate 최적화를 사용할 수 있습니다. 내부적으로 props를 비교할 수 없는 FaCC의 경우에는 그렇지 않습니다. 외부 컴포넌트를 결합해야만 props를 비교할 수 있습니다.

🎜🎜🎜Flexibility🎜🎜🎜🎜FaCC는 결합 단계에서 HOC보다 더 유연합니다. 향상된 구성 요소가 전달된 속성을 어떻게 사용하는지 규정하지 않습니다. HOC는 기본적으로 작성된 후 완료됩니다. 🎜🎜또한 FaCC는 새 컴포넌트를 생성하지 않지만 HOC는 새 컴포넌트를 생성하고 여기에 props를 전달합니다. 🎜🎜요약🎜🎜커뮤니티의 많은 오픈소스 라이브러리는 이미 두 가지 모드를 사용해 왔고, 이를 비교하는 글도 많이 있습니다. 열띤 토론도 많았고, 물론 두 모델 모두 최종적으로 문제를 해결하는 데에는 좋았습니다. 고려 사항이 다르기 때문에 선택이 다를 수 있습니다. 🎜🎜관련 권장 사항: 🎜🎜🎜React 고차 구성 요소 인스턴스 분석🎜🎜🎜🎜🎜React의 제어 및 비제어 구성 요소 인스턴스에 대한 자세한 설명🎜🎜🎜🎜

위 내용은 React의 기능적 하위 구성요소와 고차 구성요소에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!