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 {...props} className=&#39;demo-class&#39; />
)

// 使用
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 {...props} />
    }
  }
}

FaCC

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

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

// 使用

const HeadWithClass = (props) => (
  <ClassNameWrapper>
    {(class) => <header classNmae={class} ></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 example

import View from './View'

const DetailPage = props => (
  <FetchServerData>
    {
      data => (
        <Navigator>
          <View data={data} {...props} />
        </Navigator>
      )
    }
  </FetchServerData>
)

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

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

성능 최적화

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

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