Riot.js에서 순수 구성 요소 사용하기 (riot.pure)

riot.pure

Riot v4.8.0 추가riot.pure,해볼게요.
구성 요소 렌더링을 직접 제어하려면 riot.pure를 사용합니다.js의 내부 논리를 건너뛸 수 있습니다.
내부 논리가 건너뛰었기 때문에 HTML 및 CSS를 사용할 수 없습니다.

기본 동작

riot.pure등록mount,update,unmount 방법의 귀환 대상을 포함하는 모듈을 사용합니다.
pure.riot

<my-pure>
  <script>
  import { pure } from 'riot'

  export default pure(({ slots, attributes, props }) => {
    console.log(slots, attributes, props);
    return {
      el: null,
      mount(el, context) {
        this.el = el;
        console.log("mount", el, context);
        this.el.innerHTML = 'Hello There';
      },
      update(context) {
        console.log("update", context);
      },
      unmount(preserveRoot) {
        console.log("unmount", preserveRoot);
        this.el.parentNode.removeChild(this.el);
      }
    };
  });
  </script>
</my-pure>

pure 수용 가능한 내용은 다음과 같은 3개
1. slots - 어셈블리에서 찾은 slot 목록
2.attributes - 구성 요소의 속성 공식을 평가할 수 있으며 컨텍스트에서 구성 요소의 속성을 추정할 수 있습니다.
3. props - riot.component 호출을 통해서만 설정할 수 있는 초기 구성 요소 사용자 속성
pure 대상의 요소는 마운트할 때만 받을 수 있기 때문에 this.el에 저장됩니다.
pure 구성 요소의 사용은 이런 느낌입니다.
app.riot

<my-app>
  <p>{ props.message }</p>
  <my-pure></my-pure>
  <input type="button" value="update" onclick="{ pre_update }">
  <input type="button" value="unmount" onclick="{ pre_unmount }">

  <script>
    import { unmount } from 'riot'

    export default {
      pre_update(e) {
        this.update();
      },

      pre_unmount(e) {
        unmount('my-pure');
      }
    }
  </script>
</my-app>

index.js

import { component,register } from 'riot'
import App from './app.riot'
import Pure from './pure.riot'

register('my-pure', Pure);

component(App)(document.getElementById('root'), {
  message: 'Hello World'
});

한번... unmount 때 반응이 없나요? -><추기8.7 수정 완료 >

보아하니 unmount의 활동으로서 riot-component가 없으면 unmount라고 부르지 않을 것 같다.
・동작 확인용
https://plnkr.co/edit/sPjH1JE9zeLPErMBysx8?p=preview
그래서 첫 번째 수법을 시도해 봤다.1발의 실수는 비밀이다.
https://github.com/riot/riot/pull/2801
수정된 내용은 간단하니 없으면 가져가라, 이런 정신.
riot/src/core/component.js

  return createCoreAPIMethods(method => (...args) => {
    component[method](...args)
    args[0][IS_PURE_SYMBOL] = component // ここ追加
    return component
  })

riot/src/riot.js

export function unmount(selector, keepRootElement) {
  return $(selector).map(element => {
    if (element[DOM_COMPONENT_INSTANCE_PROPERTY]) {
      element[DOM_COMPONENT_INSTANCE_PROPERTY].unmount(keepRootElement)
    // ↓ ここ追加
    } else if (element[IS_PURE_SYMBOL]) {
      element[IS_PURE_SYMBOL].unmount(keepRootElement)
    }
    return element
  })
}

1/20 추기
답장은 기각되었지만 (수정된 내용은 너무 싸다) 이슈로 수정되었습니다!
https://github.com/riot/riot/issues/2806
v4.8.7 unmount 및 Rio제이스한테 불러도 돼요.

총결산

이것을 사용하면 여러 구성 요소에서 사용할 수 있는 일반적인 처리를 쓸 수 있습니다.