React 학습 방법 소개

이 글에서는 주로 React에서 고급 컴포넌트의 디커플링에 대해 소개합니다. 이 글에서는 모든 사람의 공부나 업무에 확실한 참고가 되는 컴포넌트 분할 및 디커플링 방법을 소개합니다. 함께 배우는 편집자.

머리말

우리 모두 알고 있듯이 React의 구성 요소는 매우 유연하고 확장 가능합니다. 그러나 비즈니스 복잡성이 증가하고 많은 외부 도구 라이브러리가 도입되면서 구성 요소가 종종 비대해집니다. 단일 책임 원칙을 따르는 몇 가지 일반적인 구성 요소 분할 및 분리 방법을 살펴보겠습니다. 자세한 소개는 다음과 같습니다.

1. 분할 렌더링 기능

구성 요소가 많은 콘텐츠를 렌더링하는 경우, 빠르고 일반적인 방법은 원래의 거대한 렌더링을 단순화하기 위해 하위 렌더링 기능을 만드는 것입니다

class Panel extends React.Component {
 renderHeading() {
 // ...
 }

 renderBody() {
 // ...
 }

 render() {
 return (
 <p>
 {this.renderHeading()}
 {this.renderBody()}
 </p>
 );
 }
}

하위 렌더링 기능을 다시 단순화하기 위해 기능 구성 요소를 사용할 수도 있습니다. 작성 방법, 이 방법은 더 작은 처리 단위를 생성하고 테스트에 더 도움이 됩니다

const PanelHeader = (props) => (
 // ...
);

const PanelBody = (props) => (
 // ...
);

class Panel extends React.Component {
 render() {
 return (
 <p>
 // Nice and explicit about which props are used
 <PanelHeader title={this.props.title}/>
 <PanelBody content={this.props.content}/>
 </p>
 );
 }
}

2. props를 사용하여 요소를 전달합니다

컴포넌트에 상태나 구성이 많으면 다음을 사용할 수 있습니다. 예를 들어 상위 구성 요소가 구성에만 집중하도록 구성 요소를 선언합니다.

class CommentTemplate extends React.Component {
 static propTypes = {
 // Declare slots as type node
 metadata: PropTypes.node,
 actions: PropTypes.node,
 };

 render() {
 return (
 <p>
 <CommentHeading>
  <Avatar user={...}/>

  // Slot for metadata
  <span>{this.props.metadata}</span>

 </CommentHeading>
 <CommentBody/>
 <CommentFooter>
  <Timestamp time={...}/>

  // Slot for actions
  <span>{this.props.actions}</span>

 </CommentFooter>
 </p>
 );
 }
}

부모 구성 요소

class Comment extends React.Component {
 render() {
 const metadata = this.props.publishTime ?
 <PublishTime time={this.props.publishTime} /> :
 <span>Saving...</span>;

 const actions = [];
 if (this.props.isSignedIn) {
 actions.push(<LikeAction />);
 actions.push(<ReplyAction />);
 }
 if (this.props.isAuthor) {
 actions.push(<DeleteAction />);
 }

 return <CommentTemplate metadata={metadata} actions={actions} />;
 }
}

3. 고차 구성 요소 사용

클릭 수를 달성하기 위해 컴포넌트에 하이퍼링크를 걸어 컴포넌트의 ID를 보냅니다. 대부분의 솔루션은 다음과 같습니다

class Document extends React.Component {
 componentDidMount() {
 ReactDOM.findDOMNode(this).addEventListener('click', this.onClick);
 }

 componentWillUnmount() {
 ReactDOM.findDOMNode(this).removeEventListener('click', this.onClick);
 }

 onClick = (e) => {
 if (e.target.tagName === &#39;A&#39;) { // Naive check for <a> elements
 sendAnalytics(&#39;link clicked&#39;, {
 documentId: this.props.documentId // Specific information to be sent
 });
 }
 };

 render() {
 // ...
 }
}

그러나 코드를 재사용할 수 없고 컴포넌트 재구성이 어려운 등의 문제가 있습니다

고차 컴포넌트를 사용하여 문제를 해결할 수 있습니다. 이러한 문제의 경우 이름에서 알 수 있듯이 고차 컴포넌트는 함수이고, 이를 컴포넌트에 전달하면 새 컴포넌트를 반환합니다

function withLinkAnalytics(mapPropsToData, WrappedComponent) {
 class LinkAnalyticsWrapper extends React.Component {
 componentDidMount() {
 ReactDOM.findDOMNode(this).addEventListener('click', this.onClick);
 }

 componentWillUnmount() {
 ReactDOM.findDOMNode(this).removeEventListener('click', this.onClick);
 }

 onClick = (e) => {
 if (e.target.tagName === &#39;A&#39;) { // Naive check for <a> elements
 const data = mapPropsToData ? mapPropsToData(this.props) : {};
 sendAnalytics(&#39;link clicked&#39;, data);
 }
 };

 render() {
 // Simply render the WrappedComponent with all props
 return <WrappedComponent {...this.props} />;
 }
 }

 return LinkAnalyticsWrapper;
}

간단한 코드는 다음과 같습니다. 팔로우

class Document extends React.Component {
 render() {
 // ...
 }
}

export default withLinkAnalytics((props) => ({
 documentId: props.documentId
}), Document);

위 내용은 React 학습 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!