preact框架的简单学习
编辑时间:2021-02-07 作者:金满斗 浏览量:2213 来源:原创

校长最近更新了sciter,例子里面用到了preact,当然跟着简单的学习下。

最开始的最简单例子


<html>
    <head>
        <meta charset="UTF-8">
        
    </head>
<body>
    <script type="module">
        import { hComponentrender } from 'https://unpkg.com/preact?module';
      
        // Create your app
        const app = h('h1'null'你好,世界!');
      
        render(appdocument.body);
      </script>
</body>
</html>


哈哈,运行了就直接页面上生成了你好世界的字样,后面再去理解吧。

来第二个例子,哈哈,还是不懂,想搞上再说,好像有点用组件的意思。

<html>
    <head>
        <meta charset="UTF-8">
    </head>
<body>
    <script type="module">
        import { hComponentrender } from 'https://unpkg.com/preact?module';
        import htm from 'https://unpkg.com/htm?module';
        // Initialize htm with Preact
        const html = htm.bind(h);
        function App (props) {
          return html`<p>好用 ${props.name}!</h1>`;
        }
        render(html`<${App} name="聚宝盆记账易小程序" />`document.body);
      </script>
</body>
</html>


来说两句吧