ReactJS 고차 컴포넌트

고급 컴포넌트는 기존 컴포넌트에 추가 기능을 추가하는 자바스크립트 함수입니다. 이 함수들은 순수 함수이며, 이는 데이터를 받아들이고 이 데이터에 따라 값을 반환한다는 의미입니다. 데이터가 변경되면, 고급 함수는 다른 데이터 입력으로 다시 실행됩니다. 반환된 컴포넌트를 업데이트하려면 HOC를 변경하지 않아도 됩니다. 우리가 해야 할 것은 함수가 사용하는 데이터를 변경하는 것입니다.

고급 컴포넌트(Higher Order Component, HOC)는 '보통' 컴포넌트를 둘러싸고 추가적인 데이터 입력을 제공합니다. 이는 실제로는 컴포넌트를 받아들이고 그 원본 컴포넌트를 포장하는 또 다른 컴포넌트를 반환하는 함수입니다.

이 개념이 어떻게 작동하는지 이해하기 위해 간단한 예제를 보겠습니다. MyHOC는 MyComponent에 데이터를 전달하는 데 사용되는 고차 함수입니다. 이 함수는 MyComponent을 받아들여 newData를 사용하여 그를 강화하고, 화면에 표시될 강화된 컴포넌트를 반환합니다.

import React from 'react';
var newData = {
　　　data: 'Data from HOC...'
}
var MyHOC = ComposedComponent => class extends React.Component {
　　　componentDidMount() {
　　　　　　this.setState({
　　　　　　　　　data: newData.data
　　　　　　);
　　　}
　　　render() {
　　　　　　return <ComposedComponent {...this.props} {...this.state}>　/});
　　　}
};
class MyComponent extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1{this.props.data}</h1>
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export default MyHOC(MyComponent);

이 애플리케이션을 실행하면 데이터가MyComponent.

Note고차 컴포넌트는 다양한 기능에 사용될 수 있습니다. 이러한 정적 함수는 함수 프로그래밍의 본질입니다. 익숙해지면,应用程序이 유지보수나 업그레이드가 더 쉬워지는 것을 발견하게 됩니다.