material.ioコンポーネントをhyperHTMLで再実装する方法は？私は、コンポーネントをどのように反応するかmaterial.io部品が実装されている/と統合の例を反応させるの本で探しています

Question

：

https://github.com/material-components/material-components-web/blob/master/framework-examples/react/src/Checkbox.js

私はライフサイクルイベントコールが存在しないので、1がhyperHTMLと同じことをやって行くだろうか疑問例えば、またはcomponentWillUnmountのようなhyper.Componentの範囲内である。

私はrender呼び出し後にそれを行うことができると言われましたが、これは通常コンポーネントの外部から呼び出されます。

Answer 1

申し訳ありません申し訳ありません。私は物事のカップルを明確にしたいと思います

：

componentDidMountまたはcomponentWillUnmountなどのhyper.Component内にはライフサイクルイベントの呼び出しはありません。

あなたは最新バージョンを試してみてください、またはのは1.10+を言わせた場合、あなたはあなたのhyper.Componentクラス定義のそれぞれにおけるonconnected(evt) { ... }とondisconnected(evt) { ... }メソッドを定義することができるようになります。

これはかなり最近の機能ですが、残念ながらまだ文書化されていません。カスタム要素connectedCallbackとdisconnectedCallbackのような振る舞いをするのに必要なすべてを提供します（また、実際のカスタム要素を作成するにはHyperHTMLElement projectもあります）。

次は、基本的な例である：

import {Component} from 'hyperhtml'; 

class Clock extends Component { 

    update() { 
    this.time = (new Date).toLocaleTimeString(); 
    this.render(); 
    } 

    // equivalent of Custom Elements connectedCallback 
    onconnected() { 
    console.log('start time'); 
    this.update(); 
    this.timer = setInterval(() => this.update(), 1000); 
    } 

    // equivalent of Custom Elements disconnectedCallback 
    ondisconnected() { 
    console.log('end time'); 
    clearInterval(this.timer); 
    } 

    render() { return this.html` 
    <p 
     onconnected=${this} 
     ondisconnected=${this} 
    > 
     ${this.time} 
    </p>`; 
    } 
} 

私はこれがあなたの材料の例を複製するのに十分な力を与えるだろう願っています。私は明確にしたい

---

他の部分：それは私が後にコールをレンダリングするが、それは通常、コンポーネントの外部から呼び出されることを行うことができますと言われた

。

これは完全ではありません。はい、component.render()が必要に応じて自動的に呼び出されますが、重要なのはあなたが返すものです。あなたが見ることができるように

// same code as before 
    render() { 
    const p = this.html` 
    <p 
     onconnected=${this} 
     ondisconnected=${this} 
    > 
     ${this.time} 
    </p>`; 

    // you have a <p> element here 
    // you can do whatever you want 
    // example: 
    p.addEventListener('click', console.log); 

    // now you should return it 
    return p; 
    } 
// rest of the code 

は、あなたが常にレンダリングノードと対話することができます

私は以前Clock例えば使用したのと同じコードを使用しています。結局のところ、すべてhyperHTMLは、何も書くことはありません。

私はこれらの説明があなたの前進に役立つことを願っています。 ここで、最終的に、他の質問に答える。