React는 매우 좋은 전단 개발 라이브러리로 광속으로 작업하여 쉽게 들고 사용하기 시작합니다.그것은 간단한 개념을 이용하여 주로 흔히 볼 수 있는 자바스크립트 지식을 이용하여 단일 페이지 응용 프로그램을 구축하는 것이지 유명한 전단층에서 기이한 추상을 만드는 것이 아니다.React는 구성 요소 기반 아키텍처와 함께 UI를 구축합니다.응용 프로그램은 서로 중첩된 다른 구성 요소를 포함할 수 있는 구성 요소가 될 것입니다.
Angular나 Vue와 같은 프레임워크는 코드에 구조를 강제적으로 실행합니다. 그러면 라이브러리가 폴더나 모범 사례에 귀속되지 않습니다.이것은 당신이 조심하지 않으면 최종적으로 매우 깊고 상호 의존적인 구성 요소 그림을 삽입할 수 있다는 것을 의미한다. 이것은 단원 테스트를 하기 어렵고 유지보수는 말할 것도 없다.
어떻게 서로 다른 유형의 논리를 서로 다른 유형의 용기here로 구분하는지에 대해 풍부한 경험을 바탕으로 하는 흥미로운 생각이 있다.이것은 데이터 획득 논리와 데이터 표시 논리의 결합 문제를 해결했다.대부분의 방법 배후의 주요 사상은 일부 응용 프로그램 코드를 독립적이고 작게 함으로써 복잡성이 너무 높은 것을 방지하는 것이다.

내가 직면한 문제

나는 내가 경험이 풍부한 창고 웹 개발자라고 생각한다. 처음에는 마이크로소프트를 기반으로 한 창고에서 시작했지만, 그때부터 나는 나의 기술을 확장했다.비록 나는 20일의 React만 배웠지만, 나는 다른 분야에서도 비슷한 문제를 여러 번 본 적이 있다.
React를 배우기 위해 가능한 한 많은 정보를 얻기 시작했습니다.나는 팟캐스트를 듣고, 토론을 읽고, 심지어는 책 한 권을 훑어보기 시작했다.나는 호기심을 불러일으키는 데 필요한 것이 있다고 생각한 후에 실제 문제를 해결하기 위한 프로젝트를 세우기 시작했다.나의 응용 프로그램은 뉴스 포털 사이트로 도처에 글이 있다.
이 글의 문제는 내 구성 요소에 대한 것이다. 이 구성 요소는 글의 제목과 글에 대한 메타데이터를 표시하기 위한 것이다.내 응용 프로그램에서 한 문장은 세 가지 다른 상태를 가질 수 있다.

한 문장은 보이지 않을 수 있다. 검색을 통해 프레젠테이션 원고에서 필터링

한 문장이 여전히 불러올 수 있습니다. - 연습을 위해 뼈대 문장을 아직 불러오지 않은 문장의 위치에 두기로 했습니다.

마지막으로 글은 응용 프로그램에서 완전하게 나타날 수 있다.

간단한 코드 예제를 살펴보겠습니다.

import React from 'react';
class Article extends React.Component {

  constructor(props) {
    super(props);
    this.state = { articles : [] };
  }

  async componentDidMount() {
    const result = await fetch('http://sample.com/');
    const articles = await result.json();
    this.setState({articles: articles});
  }

  render() {
    return this.state.articles.map( article => {
      if (!article.visible) return <React.Fragment />;
      else if (article.loading) {
        return <div className="article skeleton" />;
      }
      else {
        return (
          <div className="article">
            {article.title}
          </div>);
      }
    });
  }
}
export default Article;

물론 뼈대와 완전히 과장된 문장은 위의 이 가상 예시보다 좀 복잡하다. 전체적으로 말하자면 이 구성 요소의 과장법은 100줄을 넘는다!많은 줄은 내가 한 번 처리하는 것보다 더 복잡하다는 것을 의미한다.

모드가 이 날을 구합니다...

내가 이 점을 보았을 때, 나는 이러한 생각을 형성하기 시작했다. 아마도 책임 체인 모델을 사용하여 구성 요소를 이해하기 쉽게 할 때가 되었을 것이다.RefactoringGuru에 설명된 바와 같이:

Chain of Responsibility is a behavioral design pattern that lets you pass requests along a chain of handlers. Upon receiving a request, each handler decides either to process the request or to pass it to the next handler in the chain.

이것은 우리가 이 복잡한 렌더링 함수를 간소화할 수 있는 것처럼 보인다.다음과 같은 프로세서가 있다고 가정합니다.

보이지 않는 프로젝트 프로세서 - 프로젝트가 보이지 않으면 빈 세션이 나타나고 요청이 전달됩니다.

기사 처리 프로그램 불러오기 - 기사를 불러오는 동안 뼈대가 나타나거나 요청이 전달됩니다.

전문 처리 프로그램 - 전문을 보여줍니다.

따라서 우리는 이 처리 프로그램을 만들고 그것을 하나하나 연결하는 방법을 찾아야 한다.Wikipedia 의 다음 UML 그림을 고려하여 구현이 어떻게 작동하는지 알아보십시오.
프로세서는 모든 프로세서의 목록을 순서대로 보존합니다. 이 목록은 발송자로부터 들어오는 요청을 처리하려고 시도할 것입니다. (우리의 예시에서 발송자는 렌더링 방법입니다.)Reciever1이 요청을 받으면 처리할 수 있는지 여부를 결정합니다.없으면, 다음 프로세서 (그림에 있는 수신기) 에 요청을 전송하는 리셋 프로세서입니다.이것은 수신자가 실제 요청을 처리할 때까지 계속된다.
실현 과정에서 나는 가능한 한 많은 정보를 얻기 위해 ES6 기능을 사용하고 싶다.

솔루션

먼저 실제 처리 프로그램을 만들어서 요청을 처리한 다음에 그것을 연결시키는 메커니즘에 주목하자.
만약 문장이 보이지 않는다면, 우선 요청을 처리하기 위해 프로세서를 작성하고, 보이지 않는다면, 부모 대상을 되돌려 요청을 처리하기만 하면 된다.

import React from 'react';
class InvisibleArticleHandler extends ArticleHandler {
  handleRequest = article => {
    if (!article.visible) {
      return <React.Fragment />;
    }
    return super.handleRequest(article);
  }
}
export default InvisibleArticleHandler;

다음에 글이 불러오고 있으면 요청을 처리하는 프로세서를 만들고, 없으면 부모 대상을 다시 불러와서 요청을 처리합니다.

import React from 'react';
class LoadingArticleHandler extends ArticleHandler {
  handleRequest = article => {
    if (article.loading) {
      return <div className="article skeleton" />;
    }
    return super.handleRequest(article);
  }
}
export default LoadingArticleHandler;

마지막으로, 만약 문장이 완전히 불러왔다면, 요청을 처리하기 위한 처리 프로그램을 작성합니다.

import React from 'react';
class FullArticleHandler extends ArticleHandler {
  handleRequest = article => (
        <div className="article">
          {article.title}
        </div>
  );
}
export default FullArticleHandler;

이제 부류를 작성할 때가 되었다. 이 클래스는 구체적인 처리 프로그램에서 확장되었다.이 종류는 처리 프로그램의 정책을 보류했다.

class ArcticleHandler {

  constructor() {
    this.handlers = [];
    }

  addHandler = handler => { this.handlers.push(handler); }

  empty = () => { this.handlers = []; }

  handleRequest(arcticle) {
    // FIFO - get the first handler from the array of handlers.
    const nextHandler = this.handlers.shift();

    // Pass the list of handlers to the concrete reciever object,
    // as when it is calling into it's parent's method, the call
    // is on that object, not on the original handler!
    nextHandler.handlers = this.handlers;
    return nextHandler.handleRequest(arcticle);
  }
}
export default ArcticleHandler;

이 기능을 통해 우리는 최종적으로 더욱 읽을 수 있는 문장 구성 요소를 얻어 뉴스를 나타낼 수 있다.

import React from 'react';
import ArcticleHandler from './ArcticleHandler';
import InvisibleArticleHandler from './InvisibleArticleHandler';
import LoadingArticleHandler from './LoadingArticleHandler';
import FullArticleHandler from './FullArticleHandler';

class Article extends React.Component {

  constructor(props) {
    super(props);
    this.state = { articles : [] };
  }

  async componentDidMount() {
    const result = await fetch('http://sample.com/');
    const articles = await result.json();
    this.setState({articles: articles});
  }

  render() {
    const articleHandler = new ArticleHandler();
    return this.state.articles.map( article => {
      // Reset the handlers for each article
      articleHandler.empty();
      articleHandler.addHandler(new InvisibleArticleHandler());
      articleHandler.addHandler(new LoadingArticleHandler());
      articleHandler.addHandler(new FullArticleHandler());
      return arcticleHandler.handleRequest(arcticle);
    });
  }
}
export default Article;

책임 체인 모드를 사용하면 분야별 언어로 렌더링 방법을 작성할 수 있습니다. 따라서 다음에 이 방법을 사용하면 설명된 순서에 따라 규칙에 따라 렌더링을 시도할 것입니다.
나는 정말 내가 당신들에게 복잡성과 관련된 문제를 해결하는 데 얻은 견해를 이해할 수 있는 가치를 제공할 수 있기를 바랍니다.나는 계속해서 여기에 나의 다음 발견을 붙여 나의 여정에서 어떻게 정확하게 반응하는지 배울 것이다.
여기나 제 트위터에 어떤 댓글/피드백을 보내주신 것을 환영합니다.
!