거의 모든 JavaScript UI 라이브러리 &/| 내가 본 프레임워크에는 onmount, willmount, beforemount, aftermount, onunmount, onwhatever와 같은 일종의 수명 주기 후크가 있습니다.

정말 필요합니까? 좋은가요, 나쁜가요? 없이 살 수 있나요?

그렇다면 애초에 이것들은 왜 존재하는 걸까요?

  const oninit = (e: Element) => {
    e.style.prop = value;
    e.addEventListener('mouseover', handler);
    e.setAttribute('data-key', value);
  }

이것은 웹의 많은 구성 요소와 함께 제공되고 활용되는 일반적인 (지루한) 초기화 상용구입니다. HTML과 CSS의 선언적 특성은 의도한 값으로 일부 기능을 사전 설정하는 것이 불가능하지는 않더라도 어려운 경우를 제외하고 이러한 중복성을 만드는 것을 목표로 합니다(disable="${()=>false}"를 생각해 보세요. 예상대로 행동하세요).

그럼 우리는 무엇을 할까요? init 핸들러에 남은 모든 것을 명령적으로 설정하십시오. 그것은 효과가 있고 세상은 앞으로 나아갈 수 있습니다.

하지만 접근 방식에는 중요한 문제가 있습니다. 문제가 발생하면 이벤트 리스너 및 기타 사항이 제대로 정리되었는지 보장하기 어렵습니다. 물론 주어진 프레임워크는 onunmount 후크를 노출할 수 있지만 애플리케이션 로직에 오류가 있으면 버그가 있거나 최악의 경우 메모리 누수가 발생합니다.

명령형 프로그래밍은 이러한 상황에 완전히 노출되는 불행한 프로그래밍 패러다임입니다. 물건을 부수는 것을 포함하여 거의 모든 것을 할 수 있습니다.

이 솔루션은 제어 역전(Inversion of Control) 및 함수형 프로그래밍과 함께 제공됩니다. 이는 HTML 및 JavaScript가 생각된 방식과는 다르지만 좋은 소식이 있습니다. 우리는 여전히 FP의 기본 디자인 패턴 중 일부를 구현하고 제공할 수 있습니다. 문제에 대한 전략적 해결책입니다.

rimmel.js는 Reactive Markup이라고 불리는 HTML의 개념적 상위 집합의 참조 구현입니다. 이는 JavaScript용 TypeScript와 약간 유사하게 작동하지만 HTML과 DOM을 기능적/기능적으로 반응적으로 만드는 것을 목표로 합니다.

이는 모든 것을 스트림으로 처리하여 달성됩니다. 스타일? 스트림입니다. DOM 이벤트? 물론 그들은 스트림입니다. HTML 속성? 스트림도 마찬가지입니다. 값을 내보낼 때마다 설정됩니다.

어떻게 작동하는지 살펴보겠습니다.

  const style = CreateStream({color: 'red'});
  const key = CreateStream('red', value);
  const handler = CreateStream();

  const template = rml`
    

    
  `;

CreateStream은 가상의 스트림 생성 유틸리티일 뿐입니다. 일반적으로 Promise, Observables RxJS 스트리밍은 UI 상호 작용을 가장 잘 모델링하므로 더 일반적으로 사용하는 것이 좋습니다.

코드를 다시 확인하면 onmount 호출이 없다는 것을 곧 알게 될 것입니다. 사실, 이전에 onmount 콜백이 수행하던 모든 작업이 이제 해당 스트림이 방출되자마자 완료되기 때문에 그럴 필요가 없습니다.

특정 프레임워크 또는 UI 라이브러리는 템플릿에 정의되거나 바인딩된 모든 단일 스트림(스타일, 데이터 키, onmouseover)을 마운트 해제하는 역할을 담당합니다. 정리하는 것을 잊어버릴 위험이 없으며 메모리 누수가 발생할 가능성이 크게 줄어듭니다.

함수형 프로그래밍을 처음 접하는 경우 스트림 측면에서 문제를 재구성하는 방법을 이해하는 데 시간을 할애할 것입니다. 그러나 그렇게 하면 그 대가로 훨씬 더 많은 이점이 있을 것입니다. 코드 크기(코드 50% ~ 90% 감소), 테스트 가능성이 훨씬 높고 오류 발생 가능성이 적은 논리 및 구현.

이국적인 경험을 할 준비가 되셨나요? rimmel.js를 확인하세요