이 글은 React의 함수 하위 구성 요소와 상위 구성 요소에 대한 자세한 설명을 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.
React 프로젝트를 접한 후 대부분의 사람들은 이미 HOC(High-Order-Components)와 FaCC(Functions as Child Components)를 이해하거나 사용해왔을 것입니다. 왜냐하면 이 두 모드는 대부분의 React 오픈 소스 Curry에서 사용되기 때문입니다. 예를 들어, 반응 라우터의 withRouter는 하나의 구성 요소를 받아들이고 또 다른 향상된 구성 요소를 반환하는 일반적인 고차 구성 요소입니다. 반응 모션의 모션은 일반적인 FaCC 애플리케이션입니다.
HOC와 FaCC는 매우 유사한 작업을 수행하며 둘 다 디자인 패턴의 데코레이터 패턴과 유사합니다. 모든 기능은 원래 인스턴스 또는 장치에서 향상되었습니다.
물론 일부 오픈 소스 라이브러리뿐만 아니라 일상적인 코드 작성에서도 HOC 및 FaCC를 사용하여 일부 로직을 캡슐화하는 데 적합한 곳이 많이 있습니다. 예를 들어 데이터 매장 지점, 새로운 기능 전환, 전환 데이터 획득 등이 있습니다. 코드 가독성과 로직 재사용을 향상시키는 데 매우 유용합니다.
우리는 모두 함수를 받아들이고 캡슐화된 함수를 반환하는 고차 함수를 사용했습니다:
const plus = first => second => (first + second) plus(1)(2) // 3
그리고 고차 구성요소는 고차 구성요소에 적용되는 고차 함수의 개념입니다:
const withClassName = ComposedComponent => props => (
<ComposedComponent {...props} className='demo-class' />
)
// 使用
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也是用于增强原有组件能力的一种模式，其主要功能的实现在于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
구성 요소가 실제로 호출되기 전후에 데이터 묻어두기 등 몇 가지 작업을 수행합니다.
구성 요소를 렌더링해야 하는지 결정하거나 오류 후 오류 페이지를 렌더링하는 등 다른 것을 렌더링해야 하는지 결정
props를 전달하고 새 props를 추가
위의 처음 세 가지 사항은 비교적 이해하기 쉽습니다. 네 번째 사항을 설명하겠습니다. 예를 들어, 페이지를 렌더링한 후 페이지 제목을 변경해야 합니다. 이는 단일 페이지 애플리케이션의 일반적인 요구 사항입니다. 일반적으로 이를 위해 특정 라우터 라이브러리의 후크를 사용할 수 있습니다. 물론 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>
)컴포넌트 주입 모델을 제안했습니다. 여러 측면에서 비교해 보겠습니다.
결합 단계
결합 단계는 HOC, FaCC 및 향상될 구성 요소의 결합을 의미합니다. FaCC는 전면 및 후면 구성 요소의 도킹에 대한 종속성 정보를 더 많이 표시하므로 상대적으로 이해하기 쉽다는 것을 분명히 알 수 있습니다. HOC의 경우 어떻게 서로 연결해야 할까요? HOC에 대해 자세히 알아보고 이 HOC가 수행하는 작업을 알아보려면 코드를 읽어야 합니다.
HOC에서는 prop이 HOC에서 전달되기 때문에 호스트로부터 prop을 받을 수 있습니다. 따라서 전체 수명 주기도 있으므로 shouldComponentUpdate 최적화를 사용할 수 있습니다. 내부적으로 props를 비교할 수 없는 FaCC의 경우에는 그렇지 않습니다. 외부 컴포넌트를 결합해야만 props를 비교할 수 있습니다.
🎜🎜🎜Flexibility🎜🎜🎜🎜FaCC는 결합 단계에서 HOC보다 더 유연합니다. 향상된 구성 요소가 전달된 속성을 어떻게 사용하는지 규정하지 않습니다. HOC는 기본적으로 작성된 후 완료됩니다. 🎜🎜또한 FaCC는 새 컴포넌트를 생성하지 않지만 HOC는 새 컴포넌트를 생성하고 여기에 props를 전달합니다. 🎜🎜요약🎜🎜커뮤니티의 많은 오픈소스 라이브러리는 이미 두 가지 모드를 사용해 왔고, 이를 비교하는 글도 많이 있습니다. 열띤 토론도 많았고, 물론 두 모델 모두 최종적으로 문제를 해결하는 데에는 좋았습니다. 고려 사항이 다르기 때문에 선택이 다를 수 있습니다. 🎜🎜관련 권장 사항: 🎜🎜🎜React 고차 구성 요소 인스턴스 분석🎜🎜🎜🎜🎜React의 제어 및 비제어 구성 요소 인스턴스에 대한 자세한 설명🎜🎜🎜🎜위 내용은 React의 기능적 하위 구성요소와 고차 구성요소에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
