programing

RxJ의 파이프란 무엇입니까?

mailnote 2023. 3. 12. 11:01
반응형

RxJ의 파이프란 무엇입니까?

기본 컨셉은 알 것 같은데 뭔가 애매한 게 있어요.

저는 씁니다.Observable:

observable.subscribe(x => {

})

데이터를 필터링하려면 다음을 사용할 수 있습니다.

import { first, last, map, reduce, find, skipWhile } from 'rxjs/operators';
observable.pipe(
    map(x => {return x}),
    first()
    ).subscribe(x => {

})

이것도 할 수 있어요.

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/first';

observable.map(x => {return x}).first().subscribe(x => {

})

그래서 질문하겠습니다.

  1. 뭐가 다른데?
  2. 왜는 '''를 의미합니까?pipe★★★★★★★★★★★★★★★★★★?
  3. 왜 그 기능들에 다른 Import가 필요한가?

"파이프 가능"(이전 "렛테이블") 연산자는 RxJ 5.5 이후 현재 권장되는 연산자 사용 방법입니다.

파이프형 연산자에 대한 공식 문서를 읽을 것을 강력히 권장합니다.

를 쉽게 수 오퍼레이터를 를 깨우칠 수 입니다.Observable서로 다른 두 당사자가 같은 이름의 연산자를 생성하려고 할 경우 충돌이 발생할 수 있는 개체입니다.

' '' 사용import 연산자의 .'rxjs/add/operator/first'작은 앱 번들을 만드는 방법이었다.RxJ 라이브러리 전체가 아니라 필요한 연산자만 Import하면 총 번들 크기를 크게 줄일 수 있습니다.는 Import 여부를 알 수 .'rxjs/add/operator/first'코드에 정말 필요하거나 코드를 리팩터링할 때 삭제하는 것을 잊어버렸기 때문입니다.이것이 사용되지 않은 가져오기가 자동으로 무시되는 파이프형 연산자를 사용하는 장점 중 하나입니다.

파이프 방식

원본 문서에 따라

pipable 연산자는 함수가 관측 가능 데이터를 입력으로 받아들이고 다른 관측 가능 데이터를 반환하는 입니다. 이전 관측 가능 값은 수정되지 않은 상태로 유지됩니다.

pipe(...fns: UnaryFunction<any, any>[]): UnaryFunction<any, any>

오리지널 투고

파이프가 무슨 뜻이죠?

, 이전에 는 모두 , 전, 전, 전, 음, 음, 음, 음, 음, 음, 음, 음, 음의 순수한 함수로 사용할 수 .rxjs/operators이것에 의해, 커스터마이즈 가능한 확장 Observable을 작성하고, 커스텀을 만들기 위해서 리프트를 덮어쓸 필요가 없는, 모든 종류의 프로그래밍 체조에 의존하지 않고, 연산자의 구성이나 재사용이 매우 쉬워집니다.

const { Observable } = require('rxjs/Rx')
const { filter, map, reduce,  } = require('rxjs/operators')
const { pipe } = require('rxjs/Rx')

const filterOutWithEvens = filter(x => x % 2)
const doubleByValue = x => map(value => value * x);
const sumValue = reduce((acc, next) => acc + next, 0);
const source$ = Observable.range(0, 10)

source$.pipe(
  filterOutWithEvens, 
  doubleByValue(2), 
  sumValue)
  .subscribe(console.log); // 50

뭐가 다른데?이 예에서 보듯이 가장 큰 차이점은 소스 코드의 가독성을 향상시키는 것입니다.이 예에서는 두 가지 기능밖에 없는데, 12개의 기능이 있다고 상상해 보세요.그러면 이렇게 될 것이다

function1().function2().function3().function4()

특히 함수 내부를 채우고 있을 때는 보기 어렵고 보기 어려워지고 있습니다.게다가 Visual Studio 코드등의 에디터에서는, 140 행 이상의 길이를 사용할 수 없습니다.다만, 다음과 같습니다.

Observable.pipe(
function1(),
function2(),
function3(),
function4()
)

이것에 의해, 가독성이 큰폭으로 향상됩니다.

차이가 없다면 기능 파이프가 존재하는 이유는 무엇입니까?PIPE() 함수의 목적은 관찰 가능한 모든 함수를 하나로 묶는 입니다.처음에는 관측 가능이 필요하지만, 그 후 pipe() 함수 전체에 걸쳐 관측 가능이 내부에서 사용되는 각 함수에 의해 사용됩니다.

첫 번째 함수는 관찰 가능한 것을 취하여 처리하여 값을 수정하고 다음 함수로 전달합니다.다음 함수는 첫 번째 함수의 관찰 가능한 출력을 취하여 처리한 후 다음 함수로 전달합니다.그리고 pipe() 함수의 모든 함수가 관찰 가능한 것을 사용할 때까지 계속됩니다.마지막에는 관찰 가능한 처리가 완료됩니다.마지막으로 subscribe() 함수를 사용하여 관찰 가능한 값을 추출할 수 있습니다.원래 관측 가능한 값은 변경되지 않습니다.!!

왜 그 기능들에 다른 Import가 필요한가?Import는 rxjs 패키지에서 함수가 지정된 위치에 따라 달라집니다.그건 이런 식이다.모든 모듈은 Angular의 node_modules 폴더에 저장됩니다."class"에서 {class} 가져오기;

다음 코드를 예로 들어 보겠습니다.나는 방금 그것을 스택블리츠로 썼다.따라서 다른 곳에서 자동으로 생성되거나 복사되는 것은 없습니다.rxjs 매뉴얼에 기재되어 있는 것을 당신이 읽을 수 있을 때 복사하는 것은 의미가 없습니다.이 질문을 하신 것은 문서를 이해하지 못하셨기 때문이라고 생각합니다.

  • 각 모듈에서 가져온 파이프, 관측 가능한 지도 클래스가 있습니다. 
  • 클래스 본문에서는 코드와 같이 Pipe() 함수를 사용했습니다. 
  • Of() 함수는 서브스크라이브 시 순차적으로 번호를 방출하는 관찰 가능한 값을 반환합니다.

  • 옵저버블이 아직 구독되지 않았습니다.

  • Observable.pipe()와 같이 사용하면 pipe() 함수는 지정된 Observable을 입력으로 사용합니다.

  • 첫 번째 함수인 map() 함수는 Observable을 사용하여 처리하고 처리된 Observable을 pipe() 함수로 되돌립니다.

  • 처리한 Observatable이 다음 기능이 있는 경우 해당 기능에 부여됩니다.

  • 모든 기능이 옵저버블을 처리할 때까지 계속됩니다.

  • pipe() 함수에 의해 변수에 Observable이 반환되는 예를 다음에 나타냅니다.

옵저버블은 옵저버가 가입하지 않는 한 아무런 가치도 내지 않습니다.subscribe() 함수를 사용하여 이 Observatable에 가입하고, 가입하자마자 가입했습니다.of() 함수는 값 전송을 시작하고 pipe() 함수를 통해 처리되며, 마지막에는 최종 결과가 나타납니다.예를 들어 1은 of() 함수에서 취득되고 1은 map() 함수로 추가되어 반환됩니다.이 값은 subscribe() 함수 내의 인수로 얻을 수 있습니다.

인쇄하는 경우는, 다음과 같이 사용합니다.

subscribe( function (argument) {
    console.log(argument)
   } 
)
    import { Component, OnInit } from '@angular/core';
    import { pipe } from 'rxjs';
    import { Observable, of } from 'rxjs';
    import { map } from 'rxjs/operators';
    
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent implements OnInit  {
    
      obs = of(1,2,3).pipe(
      map(x => x + 1),
      ); 
    
      constructor() { }
    
      ngOnInit(){  
        this.obs.subscribe(value => console.log(value))
      }
    }

https://stackblitz.com/edit/angular-ivy-plifkg

제가 생각해낸 좋은 요약은 다음과 같습니다.

스트리밍 작업(맵, 필터, 축소...)을 핵심 기능(가입, 배관)에서 분리합니다.체인이 아닌 배관 작업을 통해 Observable의 시제품을 오염시키지 않고 나무 흔들기를 쉽게 할 수 있습니다.

https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#why 를 참조해 주세요.

닷 체인용으로 패치가 적용된 연산자의 문제는 다음과 같습니다.

패치 연산자를 가져오는 라이브러리는 해당 라이브러리의 모든 소비자에 대해 Observable.protype을 증가시켜 블라인드 종속성을 생성합니다.라이브러리가 사용내용을 삭제하면 자신도 모르게 다른 모든 사용자를 파괴하게 됩니다.파이프블의 경우 필요한 연산자를 사용하는 각 파일로 가져와야 합니다.

프로토타입에 직접 패치된 작업자는 롤업이나 웹 팩과 같은 도구를 사용하여 "나무 흔들림"이 없습니다.파이프 가능한 연산자는 모듈에서 직접 끌어오는 함수일 뿐입니다.

앱에 Import되고 있는 미사용 연산자는 빌드 툴링이나 보풀 규칙으로 확실하게 검출할 수 없습니다.즉, 스캔을 가져오지만 사용을 중지할 수 있으며 여전히 출력 번들에 추가되고 있습니다.파이프형 오퍼레이터의 경우 사용하지 않을 경우 보풀룰로 픽업할 수 있습니다.

기능적인 구성이 훌륭합니다.독자적인 커스텀 연산자를 구축하는 것이 매우 쉬워져, 현재는 rxj의 다른 연산자와 마찬가지로 기능합니다.더 이상 Observable을 확장하거나 리프트를 오버라이드할 필요가 없습니다.

관찰 가능한 설명은 다음과 같습니다.

기상 상황에 맞는 계획을 세워야 하기 때문에 라디오를 켜고 24시간 기상 상황을 방송하는 기상 채널을 듣는다.이 시나리오에서는 단일 응답을 받는 대신 응답이 진행 중입니다.이 응답은 관찰 가능한 항목에 대한 구독과 같습니다.관측 가능한 것은 "날씨"이며 구독은 "업데이트를 유지하는 라디오 신호"입니다.무선이 켜져 있는 한 모든 업데이트를 수신할 수 있습니다.무선을 끌 때까지 정보가 누락되지 않습니다.

나는 날씨가 관측된다고 말했지만, 너는 날씨가 아니라 라디오를 듣고 있다.그래서 라디오도 관찰할 수 있습니다.일기예보 아나운서가 말하는 것은 기상학자가 그에게 보낸 일기예보의 기능이다.기상학자가 쓰는 것은 기상 관측소에서 나오는 데이터의 함수입니다.기상 관측소에서 나오는 데이터는 기상 관측소에 부착된 모든 계기(기압계, 풍향계, 풍향계)의 기능이며 계측기는 기상 자체의 기능이다.

이 전체 공정에는 최소 5개의 관측 변수가 있습니다.이 공정에는 두 가지 유형의 관측 변수가 있습니다.소스 관측 가능 및 출력 관측 가능.이 예에서 날씨는 "관측 가능한 소스"이고 라디오는 "관측 가능한 출력"입니다.그 사이에 있는 모든 것은PIPE FUNCTION.

파이프 함수는 소스 관측 가능에 대한 연산을 수행하여 관측 가능한 출력을 제공하며 이러한 연산은 모두 내부에서 발생합니다.모든 작전은 관측 가능성과 관련된다.

언급URL : https://stackoverflow.com/questions/48668701/what-is-pipe-for-in-rxjs

반응형