-
Notifications
You must be signed in to change notification settings - Fork 2
/
db.json
1 lines (1 loc) · 376 KB
/
db.json
1
{"meta":{"version":1,"warehouse":"2.2.0"},"models":{"Asset":[{"_id":"themes/book/source/favicon.ico","path":"favicon.ico","modified":1,"renderable":1},{"_id":"themes/book/source/js/book.js","path":"js/book.js","modified":0,"renderable":1},{"_id":"themes/book/source/css/book.scss","path":"css/book.scss","modified":0,"renderable":1},{"_id":"themes/book/source/css/spectre_custom.scss","path":"css/spectre_custom.scss","modified":0,"renderable":1},{"_id":"themes/book/source/js/book-post.js","path":"js/book-post.js","modified":0,"renderable":1},{"_id":"themes/book/source/js/book-sidebar.js","path":"js/book-sidebar.js","modified":0,"renderable":1},{"_id":"source/images/transfer.png","path":"images/transfer.png","modified":0,"renderable":0},{"_id":"source/images/omi-snippets.png","path":"images/omi-snippets.png","modified":0,"renderable":0},{"_id":"source/images/store.cn.jpg","path":"images/store.cn.jpg","modified":0,"renderable":0}],"Cache":[{"_id":"source/.DS_Store","hash":"3f01b8ac2d3dd4ae6aa08b6b836872b379f57988","modified":1562656940575},{"_id":"themes/book/LICENSE","hash":"03157c4b6e91d27f69508dbdc62c09bc38fd78fc","modified":1562578728656},{"_id":"themes/book/README.md","hash":"c71166b97b507753afb3f1db3daea6ddf80d43d4","modified":1563065418342},{"_id":"themes/book/_config.yml","hash":"495aa6d14f02441c1c44998096f1797c50df039d","modified":1562578728656},{"_id":"source/_posts/home.md","hash":"87dcb3b0ffd86bac5f6ba3465008e66fc51de206","modified":1562653707661},{"_id":"source/_posts/install.md","hash":"7a9702dbcaac14238331cd95568099d5e601584e","modified":1562651041663},{"_id":"source/_posts/jsx.md","hash":"6bb106642743c73789470ff658f87aa8a006a25d","modified":1562735199449},{"_id":"source/_posts/menu.md","hash":"9e62e4484fc861dc450b0dccd981ff5b77d2e18a","modified":1563036196476},{"_id":"source/_posts/plugin.md","hash":"023b28efd853dd888c3aa990190b518fba4b6df0","modified":1563016199585},{"_id":"source/_posts/spec.md","hash":"09609a32b84f34cf20d95f4be220eb66b697c7d8","modified":1562735820117},{"_id":"themes/book/.git/HEAD","hash":"acbaef275e46a7f14c1ef456fff2c8bbe8c84724","modified":1562578728650},{"_id":"themes/book/.git/config","hash":"bf0585efe2c72dda5ea40642ca96651fd2b5ec99","modified":1562578728651},{"_id":"themes/book/.git/description","hash":"9635f1b7e12c045212819dd934d809ef07efa2f4","modified":1562578725057},{"_id":"themes/book/.git/index","hash":"1b6c928685483eb402e2d057a8eae9b8a8ab9b19","modified":1562579975051},{"_id":"themes/book/.git/packed-refs","hash":"9f35439c95afa3368f2ebaec32599497bf002fec","modified":1562578728648},{"_id":"themes/book/languages/en.yml","hash":"a2c496b7c08eda315eed8ab10878abcb863a836c","modified":1562578728656},{"_id":"themes/book/layout/archive.ejs","hash":"7e27d4f1adb04ae4e145f2a8769aaef24da9a63a","modified":1562578728657},{"_id":"themes/book/layout/categories.ejs","hash":"e3e1aa97b9a21f5bd85c4f0c56d79e7096eda48c","modified":1562578728658},{"_id":"themes/book/layout/index.ejs","hash":"ce0892216ca0cd664796c873190d26f2430e4959","modified":1562578728658},{"_id":"themes/book/layout/layout.ejs","hash":"63616f8e33a63befd67a62c07bb714a8243d9365","modified":1562578728658},{"_id":"themes/book/layout/page.ejs","hash":"2e53811dda487a8faf75b3c3372fc8b8726d1f55","modified":1562578728658},{"_id":"themes/book/layout/post.ejs","hash":"4f6d69ef59eaba99b34388a4b5250d4edcf8c8c1","modified":1562578728658},{"_id":"themes/book/layout/tags.ejs","hash":"f2744252f6de3451c19d695f8f518c5a054f58b7","modified":1562578728659},{"_id":"themes/book/scripts/1-merge-configs.js","hash":"73d4d9c35cedfe4ed99c849c73fcee4012738a1c","modified":1562578728659},{"_id":"themes/book/scripts/2-render-home.js","hash":"fa58d86ee5bb5c4bc72725e2763a5d11a09651ec","modified":1562578728659},{"_id":"themes/book/scripts/3-render-menu.js","hash":"dabc0dfec7bb0b4135ad5e3d36a30784206aac1d","modified":1562578728660},{"_id":"themes/book/source/favicon.ico","hash":"f8460b5bb1b8e585123f4b0e91f41e8c57c42db5","modified":1563188502096},{"_id":"themes/book/source/js/book.js","hash":"da39a3ee5e6b4b0d3255bfef95601890afd80709","modified":1562578728662},{"_id":"themes/book/.git/hooks/applypatch-msg.sample","hash":"4de88eb95a5e93fd27e78b5fb3b5231a8d8917dd","modified":1562578725058},{"_id":"themes/book/.git/hooks/commit-msg.sample","hash":"ee1ed5aad98a435f2020b6de35c173b75d9affac","modified":1562578725057},{"_id":"themes/book/.git/hooks/fsmonitor-watchman.sample","hash":"f7c0aa40cb0d620ff0bca3efe3521ec79e5d7156","modified":1562578725058},{"_id":"themes/book/.git/hooks/post-update.sample","hash":"b614c2f63da7dca9f1db2e7ade61ef30448fc96c","modified":1562578725059},{"_id":"themes/book/.git/hooks/pre-applypatch.sample","hash":"f208287c1a92525de9f5462e905a9d31de1e2d75","modified":1562578725059},{"_id":"themes/book/.git/hooks/pre-commit.sample","hash":"33729ad4ce51acda35094e581e4088f3167a0af8","modified":1562578725058},{"_id":"themes/book/.git/hooks/pre-push.sample","hash":"5c8518bfd1d1d3d2c1a7194994c0a16d8a313a41","modified":1562578725060},{"_id":"themes/book/.git/hooks/pre-rebase.sample","hash":"288efdc0027db4cfd8b7c47c4aeddba09b6ded12","modified":1562578725058},{"_id":"themes/book/.git/hooks/pre-receive.sample","hash":"705a17d259e7896f0082fe2e9f2c0c3b127be5ac","modified":1562578725059},{"_id":"themes/book/.git/hooks/prepare-commit-msg.sample","hash":"2584806ba147152ae005cb675aa4f01d5d068456","modified":1562578725059},{"_id":"themes/book/.git/hooks/update.sample","hash":"e729cd61b27c128951d139de8e7c63d1a3758dde","modified":1562578725060},{"_id":"themes/book/.git/info/exclude","hash":"c879df015d97615050afa7b9641e3352a1e701ac","modified":1562578725057},{"_id":"themes/book/.git/logs/HEAD","hash":"0b340ee329a5e8f2edace035dc334aac6f725ed3","modified":1562578728650},{"_id":"themes/book/layout/_partials/comments.ejs","hash":"fcb3b37f27e2be1dc10b04821fe81ab02ddde5ec","modified":1562578728656},{"_id":"themes/book/layout/_partials/head.ejs","hash":"ec6e5f5f6271d86f695d6c2b154345d1887d53c1","modified":1562578728656},{"_id":"themes/book/layout/_partials/navbar.ejs","hash":"c28301eb0135e756e8a2c4ebe38bbd7c1dcafc33","modified":1562578728657},{"_id":"themes/book/layout/_partials/sidebar.ejs","hash":"f752715f357077d0c958520531ca6acb34be32d7","modified":1562578728657},{"_id":"themes/book/layout/_partials/toc.ejs","hash":"f7dedaf4dc919dbb7f615a3184e6713e5b123c8d","modified":1562578728657},{"_id":"themes/book/source/css/_variables.scss","hash":"72658b1f25d42e2bf3bec7f421a4f42e03622210","modified":1562578728660},{"_id":"themes/book/source/css/book.scss","hash":"2b68c8c7698d385f11d3b6d2af9d699cf0ce556c","modified":1562578728661},{"_id":"themes/book/source/css/spectre_custom.scss","hash":"19a4d4b5c5e5ddf8149bc48013c3e16d70f93c9e","modified":1562578728661},{"_id":"themes/book/source/js/book-post.js","hash":"4dc75d8859c39d0b053e2c21584ecfa45d4d6f68","modified":1562578728662},{"_id":"themes/book/source/js/book-sidebar.js","hash":"60f7d92287a572ac2666f45281e714224be9b66a","modified":1562578728662},{"_id":"source/images/transfer.png","hash":"ea1236c80bb8241d0ea879734c84f1e8bdc0c510","modified":1562652590641},{"_id":"themes/book/.git/objects/pack/pack-ad792678951d89b887333e523b2c98f5ee82e0cd.idx","hash":"5dd1cb3a9c98d8d386f458a8c901e332204e4106","modified":1562578728643},{"_id":"themes/book/.git/refs/heads/master","hash":"6541e2c94cbfd8ac9eca74c041cf33dfaa2a8d26","modified":1562578728650},{"_id":"themes/book/source/css/_partial/highlight.scss","hash":"795b32e87ac4e2ebc8d1b3cf3f174c5a02af12b8","modified":1562578728660},{"_id":"themes/book/.git/objects/pack/pack-ad792678951d89b887333e523b2c98f5ee82e0cd.pack","hash":"39663174bfd4e30d667bc9362549f8e31c5ec5ac","modified":1562578728643},{"_id":"themes/book/.git/logs/refs/heads/master","hash":"0b340ee329a5e8f2edace035dc334aac6f725ed3","modified":1562578728651},{"_id":"themes/book/.git/refs/remotes/origin/HEAD","hash":"d9427cda09aba1cdde5c69c2b13c905bddb0bc51","modified":1562578728649},{"_id":"themes/book/.git/logs/refs/remotes/origin/HEAD","hash":"0b340ee329a5e8f2edace035dc334aac6f725ed3","modified":1562578728649},{"_id":"source/images/omi-snippets.png","hash":"b6fa4a1e02e77f5b8b9cc09ee1e264fcfbec503a","modified":1562650618114},{"_id":"public/plugin/index.html","hash":"9fde16843525551b461f850b2901b1c7f52461f9","modified":1563197976296},{"_id":"public/install/index.html","hash":"50e6ca0b76db68e00a1f958ab797b6f3129e9f08","modified":1563197976296},{"_id":"public/home/index.html","hash":"dca483463e68b4ae216a6e3620123ff4eea3e540","modified":1563197976296},{"_id":"public/menu/index.html","hash":"b7f3f0f953c0a5f4d3f10c57b1cefadb65aba90f","modified":1563197976296},{"_id":"public/archives/index.html","hash":"1e724c803464928e96285fe2afacf7eb89969ec1","modified":1563197976296},{"_id":"public/archives/2019/index.html","hash":"1e724c803464928e96285fe2afacf7eb89969ec1","modified":1563197976296},{"_id":"public/archives/2019/07/index.html","hash":"1e724c803464928e96285fe2afacf7eb89969ec1","modified":1563197976297},{"_id":"public/index.html","hash":"dca483463e68b4ae216a6e3620123ff4eea3e540","modified":1563197976296},{"_id":"public/jsx/index.html","hash":"085ac9d57c9b6778f40f2cf784af729f1a8ba30e","modified":1563197976297},{"_id":"public/spec/index.html","hash":"8b03afe194086ed0be7716d3f783a909c4131d55","modified":1563197976297},{"_id":"public/favicon.ico","hash":"f8460b5bb1b8e585123f4b0e91f41e8c57c42db5","modified":1563197976304},{"_id":"public/js/book.js","hash":"da39a3ee5e6b4b0d3255bfef95601890afd80709","modified":1563197976311},{"_id":"public/js/book-post.js","hash":"4dc75d8859c39d0b053e2c21584ecfa45d4d6f68","modified":1563197976311},{"_id":"public/js/book-sidebar.js","hash":"60f7d92287a572ac2666f45281e714224be9b66a","modified":1563197976311},{"_id":"public/css/spectre_custom.css","hash":"96e2fa9ba55fc22d8d5324925681edd299fae0e6","modified":1563197976319},{"_id":"public/images/transfer.png","hash":"ea1236c80bb8241d0ea879734c84f1e8bdc0c510","modified":1563197976319},{"_id":"public/images/omi-snippets.png","hash":"b6fa4a1e02e77f5b8b9cc09ee1e264fcfbec503a","modified":1563197976323},{"_id":"public/css/book.css","hash":"3057ef09d3a13d13b7728ad1381004837adec415","modified":1563197976326},{"_id":"public/./index.html","hash":"086c64b2c15b7bf76a53401f0c24d74d362ef215","modified":1562755216403},{"_id":"source/_posts/props.md","hash":"ddcc9921d423a1350f97741723380a22a1e37068","modified":1562767498871},{"_id":"source/_posts/event.md","hash":"596adf344b9fe18f441ba4d8c8d9becc71e073ad","modified":1562770680833},{"_id":"source/_posts/hoc.md","hash":"831757c8be8fba5a3726898f21df07b194fae862","modified":1563030909649},{"_id":"source/_posts/css.md","hash":"598be1588895f6495f8cbd51e105e63d82d1cd3c","modified":1562808437763},{"_id":"source/_posts/class.md","hash":"02f841d29b6c0d6be0a0e0635a06579ee62d7506","modified":1562807813183},{"_id":"source/_posts/lifecycle.md","hash":"70cfecc184c4a157959c1ef9236222667cac1231","modified":1562771378119},{"_id":"source/_posts/react.md","hash":"2c5aaf938afb78c745cf8f797386e3d4d80b0286","modified":1563026704240},{"_id":"source/_posts/ref.md","hash":"494053349ee80982bc9052b91ac2a2d024f9be89","modified":1562807157041},{"_id":"source/_posts/store.md","hash":"d08f35b3cb24028c7cfe2d68cfd40d65cce207b0","modified":1563015338959},{"_id":"source/images/store.cn.jpg","hash":"ef91ae3e6fd076b1780a981865441d0cbd191f98","modified":1562808743743},{"_id":"source/_posts/update.md","hash":"6648b3ee457902e9a1da836577200d6c9e7a1436","modified":1562806451157},{"_id":"public/hoc/index.html","hash":"bce972e19a175507e69a2a067c41c483b480aa0d","modified":1563197976295},{"_id":"public/react/index.html","hash":"a07e3204b443c9f026b8aba302cb5750c7a0b31e","modified":1563197976295},{"_id":"public/css/index.html","hash":"b03a3a31245d90ac3f73f4c4c4fab1d60c9ba1b5","modified":1563197976296},{"_id":"public/class/index.html","hash":"801751693b043a5f2adff15226695ea667236391","modified":1563197976296},{"_id":"public/ref/index.html","hash":"cfb3bd9a7ca7905ba909d116bd99bd6bbdca9dd7","modified":1563197976296},{"_id":"public/update/index.html","hash":"9863f3bbeabcc0b49f3cdbdd7f1cf85686cf4863","modified":1563197976296},{"_id":"public/lifecycle/index.html","hash":"aca5962c393e94c837099803a29132ad87878b93","modified":1563197976296},{"_id":"public/event/index.html","hash":"9bb4ba4f9e0fe9dc27748b1c8799ed197a68d118","modified":1563197976296},{"_id":"public/props/index.html","hash":"195feda4ffc964971a355b973a671f763ff9da35","modified":1563197976296},{"_id":"public/archives/page/2/index.html","hash":"1e724c803464928e96285fe2afacf7eb89969ec1","modified":1563197976296},{"_id":"public/archives/2019/page/2/index.html","hash":"1e724c803464928e96285fe2afacf7eb89969ec1","modified":1563197976297},{"_id":"public/archives/2019/07/page/2/index.html","hash":"1e724c803464928e96285fe2afacf7eb89969ec1","modified":1563197976297},{"_id":"public/page/2/index.html","hash":"fe330300686bc20efdff2e118d5130149f91d75e","modified":1563197976296},{"_id":"public/store/index.html","hash":"4b749286a26e76c2f2e70159ef78a78a11a55205","modified":1563197976297},{"_id":"public/images/store.cn.jpg","hash":"ef91ae3e6fd076b1780a981865441d0cbd191f98","modified":1563197976299},{"_id":"themes/book/.DS_Store","hash":"df2fbeb1400acda0909a32c1cf6bf492f1121e07","modified":1563065397636}],"Category":[],"Data":[],"Page":[],"Post":[{"_content":"# Omil 是什么？\n`omil`是一个 webpack 的 loader，它允许你以一种名为单文件组件`(SFCs)`的格式撰写 Omi 组件：\n\n```html\n<template lang=\"html\" name=\"component-name\">\n <header onClick=\"${this.test}\">${this.data.title}</header>\n</template>\n<script>\nexport default class {\n test(){ console.log('Hello Eno!') }\n install() {\n this.data = { title: 'Omi' }\n }\n}\n</script>\n<style>\nheader { color: #58bc58; }\n</style>\n```\n\nOmil 还提供了很多酷炫的特性：\n\n- 允许为 Omi 组件的每个部分使用其它的 webpack loader，例如在`<style>`的部分使用 Sass 和在`<template>`的部分使用 jsx；\n- 允许在一个 .omi 文件中使用自定义块，并对其运用自定义的 loader 链；\n- 使用 webpack loader 将`<style>`和`<template>`中引用的资源当作模块依赖来处理；\n- 在开发过程中使用热重载来保持状态。\n\n简而言之，webpack 和 Omi Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Omi.js 应用。\n\n","source":"_posts/home.md","raw":"# Omil 是什么？\n`omil`是一个 webpack 的 loader，它允许你以一种名为单文件组件`(SFCs)`的格式撰写 Omi 组件：\n\n```html\n<template lang=\"html\" name=\"component-name\">\n <header onClick=\"${this.test}\">${this.data.title}</header>\n</template>\n<script>\nexport default class {\n test(){ console.log('Hello Eno!') }\n install() {\n this.data = { title: 'Omi' }\n }\n}\n</script>\n<style>\nheader { color: #58bc58; }\n</style>\n```\n\nOmil 还提供了很多酷炫的特性：\n\n- 允许为 Omi 组件的每个部分使用其它的 webpack loader，例如在`<style>`的部分使用 Sass 和在`<template>`的部分使用 jsx；\n- 允许在一个 .omi 文件中使用自定义块，并对其运用自定义的 loader 链；\n- 使用 webpack loader 将`<style>`和`<template>`中引用的资源当作模块依赖来处理；\n- 在开发过程中使用热重载来保持状态。\n\n简而言之，webpack 和 Omi Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Omi.js 应用。\n\n","slug":"home","published":1,"date":"2019-07-08T09:56:58.251Z","updated":"2019-07-09T06:28:27.661Z","title":"","comments":1,"layout":"post","photos":[],"link":"","_id":"cjxwy8x8u0000sp6tl2egxhrx","content":"<h1 id=\"Omil-是什么？\"><a href=\"#Omil-是什么？\" class=\"headerlink\" title=\"Omil 是什么？\"></a>Omil 是什么？</h1><p><code>omil</code>是一个 webpack 的 loader，它允许你以一种名为单文件组件<code>(SFCs)</code>的格式撰写 Omi 组件：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">lang</span>=<span class=\"string\">\"html\"</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">header</span> <span class=\"attr\">onClick</span>=<span class=\"string\">\"${this.test}\"</span>></span>${this.data.title}<span class=\"tag\"></<span class=\"name\">header</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\">export default class {</span><br><span class=\"line\"> test(){ console.log('Hello Eno!') }</span><br><span class=\"line\"> install() {</span><br><span class=\"line\"> this.data = { title: 'Omi' }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span>></span></span><br><span class=\"line\">header { color: #58bc58; }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>Omil 还提供了很多酷炫的特性：</p>\n<ul>\n<li>允许为 Omi 组件的每个部分使用其它的 webpack loader，例如在<code><style></code>的部分使用 Sass 和在<code><template></code>的部分使用 jsx；</li>\n<li>允许在一个 .omi 文件中使用自定义块，并对其运用自定义的 loader 链；</li>\n<li>使用 webpack loader 将<code><style></code>和<code><template></code>中引用的资源当作模块依赖来处理；</li>\n<li>在开发过程中使用热重载来保持状态。</li>\n</ul>\n<p>简而言之，webpack 和 Omi Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Omi.js 应用。</p>\n","site":{"data":{}},"excerpt":"","more":"<h1 id=\"Omil-是什么？\"><a href=\"#Omil-是什么？\" class=\"headerlink\" title=\"Omil 是什么？\"></a>Omil 是什么？</h1><p><code>omil</code>是一个 webpack 的 loader，它允许你以一种名为单文件组件<code>(SFCs)</code>的格式撰写 Omi 组件：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">lang</span>=<span class=\"string\">\"html\"</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">header</span> <span class=\"attr\">onClick</span>=<span class=\"string\">\"${this.test}\"</span>></span>${this.data.title}<span class=\"tag\"></<span class=\"name\">header</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\">export default class {</span><br><span class=\"line\"> test(){ console.log('Hello Eno!') }</span><br><span class=\"line\"> install() {</span><br><span class=\"line\"> this.data = { title: 'Omi' }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span>></span></span><br><span class=\"line\">header { color: #58bc58; }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>Omil 还提供了很多酷炫的特性：</p>\n<ul>\n<li>允许为 Omi 组件的每个部分使用其它的 webpack loader，例如在<code><style></code>的部分使用 Sass 和在<code><template></code>的部分使用 jsx；</li>\n<li>允许在一个 .omi 文件中使用自定义块，并对其运用自定义的 loader 链；</li>\n<li>使用 webpack loader 将<code><style></code>和<code><template></code>中引用的资源当作模块依赖来处理；</li>\n<li>在开发过程中使用热重载来保持状态。</li>\n</ul>\n<p>简而言之，webpack 和 Omi Loader 的结合为你提供了一个现代、灵活且极其强大的前端工作流，来帮助撰写 Omi.js 应用。</p>\n"},{"_content":"# JSX 简介\n\n观察下面这段代码模板：\n```html\n<template name=\"component-name\">\n <header onClick={this.test}>{this.data.title}</header>\n</template>\n```\n这个有趣的标签语法既不是字符串也不是 HTML。\n\n它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 Omi 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。\n\n上面的代码事实上会自动编译为下面这份 js 代码\n```js\nimport { WeElement, define, h } from \"omi\";\nclass ComponentName extends WeElement {\n render() {\n return h(\n \"div\",\n {\n onClick: this.testClick\n },\n this.data.title\n );\n }\n}\ndefine(\"component-name\", ComponentName);\n```\n\n## 为什么使用 JSX？\n\nOmi 和 React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。\n\n# Omi 和 React 在使用 Omil 和 Omi Snippets 的区别\n\nOmil和Omi Snippets都支持编译Omi和React，编译的区别取决于`<template>`的`name`属性值，React的组件名必须首字母大写，Omi的组件首字母不能大写，并且名字中间必须有`-`符号连接。\n\n|React|Omi|\n|-|-|\n|`<template name=\"ComponentName\">`|`<template name=\"component-name\">`|\n|组件名必须首字母大写|组件首字母不能大写，并且名字中间必须有`-`符号连接|\n\n## 在 JSX 中嵌入表达式\n\n在下面的例子中，我们声明了一个名为 title 的变量，然后在 JSX 中使用它，并将它包裹在大括号中：\n```html\n<template name=\"component-name\">\n <div>\n {this.data.title}\n </div>\n</template>\n<script>\n export default class {\n install() {\n this.data = {\n title: \"Eno Yao !\"\n }\n }\n }\n</script>\n```\n\n在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。\n\n```html\n<template name=\"component-name\">\n <div>\n <p>Name: {this.formatName(user)}</p>\n <p>Age: {9+9}</p>\n </div>\n</template>\n<script>\n const user = {\n firstName: 'Eno',\n lastName: 'Yao'\n };\n export default class {\n formatName(user) {\n return user.firstName + ' ' + user.lastName;\n }\n }\n</script>\n```\n\n二元和三元表达式\n\n```html\n<template name=\"component-name\">\n <div>\n { !0 ? '真' : <p>假</p> }\n <h1>{ user.age > 18 && <div>成年</div> }<h1></h1>\n </div>\n</template>\n```\n\n数组渲染成列表\n```html\n<template name=\"component-name\">\n <ul>\n {\n ['a','b','c'].map((item,index) => {\n return <li key={index}>{item}</li>\n })\n }\n </ul>\n</template>\n```\n\n\n## JSX 也是一个表达式\n\n在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。\n\n也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：\n\n```html\n<template name=\"component-name\">\n <div>\n <p>{this.getGreeting(user)}</p>\n <p>{this.getGreeting()}</p>\n </div>\n</template>\n<script>\n const user = {\n firstName: 'Eno',\n lastName: 'Yao'\n };\n export default class {\n formatName(user) {\n return user.firstName + ' ' + user.lastName;\n }\n getGreeting(user) {\n if (user) {\n return <h1>Hello, {this.formatName(user)}!</h1>;\n }\n return <h1>Hello, Stranger.</h1>;\n }\n }\n</script>\n```\n\n## JSX 特定属性\n\n你可以通过使用引号，来将属性值指定为字符串字面量\n```html\n<template name=\"component-name\">\n <div tabIndex=\"0\"></div>\n</template>\n```\n\n也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：\n\n```html\n<template name=\"component-name\">\n <div tabIndex=\"0\">\n <img src={this.data.avatarUrl} />\n </div>\n</template>\n<script>\n export default class {\n install() {\n this.data = {\n avatarUrl: 'https://avatars1.githubusercontent.com/u/17243165?s=460&v=4'\n }\n }\n }\n</script>\n```\n\nHTML 和 JSX 的一些区别\n\n|HTML|JSX|\n|-|-|\n|`<div class>`|`<div className>`|\n|`<label for>`|`<label htmlFor>`|\n|`<div tabindex>`|`<div tabIndex>`|\n\n\n在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。\n\n> 警告：\n\n> 因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。\n\n> 例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。\n\n\n## 使用 JSX 指定子元素\n\n假如一个标签里面没有内容，你可以使用 `/>` 来闭合标签，就像 XML 语法一样：\n\n```html\n<img src={this.data.avatarUrl} />\n<input onChange={this.getInputValue.bind(this)} />\n```\nJSX 标签里能够包含很多子元素:\n\n```html\n<template name=\"component-name\">\n <div>{this.data.element}</div>\n</template>\n<script>\n export default class {\n install() {\n this.data = {\n element: (\n <div>\n <h1>Hello!</h1>\n <h2>Good to see you here.</h2>\n </div>\n )\n }\n }\n }\n</script>\n```\n\n## JSX 表示对象\n\nBabel 会把 JSX 转译成一个名为 `h()` 函数调用。\n\n以下两种示例代码完全等效：\n```js\nconst element = <div>\n <h1 className=\"greeting\">\n Hello, world!\n </h1>\n</div>\n```\n```js\nconst element = h(\n \"div\",\n null,\n h(\n \"h1\",\n {\n className: \"greeting\"\n },\n \"Hello, world!\"\n )\n);\n```\n\n`h()` 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：\n\n```js\n// 注意：这是简化过的结构\nconst element = {\n children: [{\n attributes: {className: \"greeting\"},\n children: [\"Hello, world!\"],\n nodeName: \"h1\",\n }],\n nodeName: \"div\"\n}\n```\n\n这些对象它们描述了你希望在屏幕上看到的内容。Omi 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。","source":"_posts/jsx.md","raw":"# JSX 简介\n\n观察下面这段代码模板：\n```html\n<template name=\"component-name\">\n <header onClick={this.test}>{this.data.title}</header>\n</template>\n```\n这个有趣的标签语法既不是字符串也不是 HTML。\n\n它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 Omi 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。\n\n上面的代码事实上会自动编译为下面这份 js 代码\n```js\nimport { WeElement, define, h } from \"omi\";\nclass ComponentName extends WeElement {\n render() {\n return h(\n \"div\",\n {\n onClick: this.testClick\n },\n this.data.title\n );\n }\n}\ndefine(\"component-name\", ComponentName);\n```\n\n## 为什么使用 JSX？\n\nOmi 和 React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。\n\n# Omi 和 React 在使用 Omil 和 Omi Snippets 的区别\n\nOmil和Omi Snippets都支持编译Omi和React，编译的区别取决于`<template>`的`name`属性值，React的组件名必须首字母大写，Omi的组件首字母不能大写，并且名字中间必须有`-`符号连接。\n\n|React|Omi|\n|-|-|\n|`<template name=\"ComponentName\">`|`<template name=\"component-name\">`|\n|组件名必须首字母大写|组件首字母不能大写，并且名字中间必须有`-`符号连接|\n\n## 在 JSX 中嵌入表达式\n\n在下面的例子中，我们声明了一个名为 title 的变量，然后在 JSX 中使用它，并将它包裹在大括号中：\n```html\n<template name=\"component-name\">\n <div>\n {this.data.title}\n </div>\n</template>\n<script>\n export default class {\n install() {\n this.data = {\n title: \"Eno Yao !\"\n }\n }\n }\n</script>\n```\n\n在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。\n\n```html\n<template name=\"component-name\">\n <div>\n <p>Name: {this.formatName(user)}</p>\n <p>Age: {9+9}</p>\n </div>\n</template>\n<script>\n const user = {\n firstName: 'Eno',\n lastName: 'Yao'\n };\n export default class {\n formatName(user) {\n return user.firstName + ' ' + user.lastName;\n }\n }\n</script>\n```\n\n二元和三元表达式\n\n```html\n<template name=\"component-name\">\n <div>\n { !0 ? '真' : <p>假</p> }\n <h1>{ user.age > 18 && <div>成年</div> }<h1></h1>\n </div>\n</template>\n```\n\n数组渲染成列表\n```html\n<template name=\"component-name\">\n <ul>\n {\n ['a','b','c'].map((item,index) => {\n return <li key={index}>{item}</li>\n })\n }\n </ul>\n</template>\n```\n\n\n## JSX 也是一个表达式\n\n在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。\n\n也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：\n\n```html\n<template name=\"component-name\">\n <div>\n <p>{this.getGreeting(user)}</p>\n <p>{this.getGreeting()}</p>\n </div>\n</template>\n<script>\n const user = {\n firstName: 'Eno',\n lastName: 'Yao'\n };\n export default class {\n formatName(user) {\n return user.firstName + ' ' + user.lastName;\n }\n getGreeting(user) {\n if (user) {\n return <h1>Hello, {this.formatName(user)}!</h1>;\n }\n return <h1>Hello, Stranger.</h1>;\n }\n }\n</script>\n```\n\n## JSX 特定属性\n\n你可以通过使用引号，来将属性值指定为字符串字面量\n```html\n<template name=\"component-name\">\n <div tabIndex=\"0\"></div>\n</template>\n```\n\n也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：\n\n```html\n<template name=\"component-name\">\n <div tabIndex=\"0\">\n <img src={this.data.avatarUrl} />\n </div>\n</template>\n<script>\n export default class {\n install() {\n this.data = {\n avatarUrl: 'https://avatars1.githubusercontent.com/u/17243165?s=460&v=4'\n }\n }\n }\n</script>\n```\n\nHTML 和 JSX 的一些区别\n\n|HTML|JSX|\n|-|-|\n|`<div class>`|`<div className>`|\n|`<label for>`|`<label htmlFor>`|\n|`<div tabindex>`|`<div tabIndex>`|\n\n\n在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。\n\n> 警告：\n\n> 因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。\n\n> 例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。\n\n\n## 使用 JSX 指定子元素\n\n假如一个标签里面没有内容，你可以使用 `/>` 来闭合标签，就像 XML 语法一样：\n\n```html\n<img src={this.data.avatarUrl} />\n<input onChange={this.getInputValue.bind(this)} />\n```\nJSX 标签里能够包含很多子元素:\n\n```html\n<template name=\"component-name\">\n <div>{this.data.element}</div>\n</template>\n<script>\n export default class {\n install() {\n this.data = {\n element: (\n <div>\n <h1>Hello!</h1>\n <h2>Good to see you here.</h2>\n </div>\n )\n }\n }\n }\n</script>\n```\n\n## JSX 表示对象\n\nBabel 会把 JSX 转译成一个名为 `h()` 函数调用。\n\n以下两种示例代码完全等效：\n```js\nconst element = <div>\n <h1 className=\"greeting\">\n Hello, world!\n </h1>\n</div>\n```\n```js\nconst element = h(\n \"div\",\n null,\n h(\n \"h1\",\n {\n className: \"greeting\"\n },\n \"Hello, world!\"\n )\n);\n```\n\n`h()` 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：\n\n```js\n// 注意：这是简化过的结构\nconst element = {\n children: [{\n attributes: {className: \"greeting\"},\n children: [\"Hello, world!\"],\n nodeName: \"h1\",\n }],\n nodeName: \"div\"\n}\n```\n\n这些对象它们描述了你希望在屏幕上看到的内容。Omi 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。","slug":"jsx","published":1,"date":"2019-07-09T11:26:08.113Z","updated":"2019-07-10T05:06:39.449Z","title":"","comments":1,"layout":"post","photos":[],"link":"","_id":"cjxwy8x8y0001sp6t01wngbyt","content":"<h1 id=\"JSX-简介\"><a href=\"#JSX-简介\" class=\"headerlink\" title=\"JSX 简介\"></a>JSX 简介</h1><p>观察下面这段代码模板：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">header</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.test}</span>></span>{this.data.title}<span class=\"tag\"></<span class=\"name\">header</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>这个有趣的标签语法既不是字符串也不是 HTML。</p>\n<p>它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 Omi 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。</p>\n<p>上面的代码事实上会自动编译为下面这份 js 代码</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> { WeElement, define, h } <span class=\"keyword\">from</span> <span class=\"string\">\"omi\"</span>;</span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">ComponentName</span> <span class=\"keyword\">extends</span> <span class=\"title\">WeElement</span> </span>{</span><br><span class=\"line\"> render() {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> h(</span><br><span class=\"line\"> <span class=\"string\">\"div\"</span>,</span><br><span class=\"line\"> {</span><br><span class=\"line\"> onClick: <span class=\"keyword\">this</span>.testClick</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"keyword\">this</span>.data.title</span><br><span class=\"line\"> );</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\">define(<span class=\"string\">\"component-name\"</span>, ComponentName);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"为什么使用-JSX？\"><a href=\"#为什么使用-JSX？\" class=\"headerlink\" title=\"为什么使用 JSX？\"></a>为什么使用 JSX？</h2><p>Omi 和 React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。</p>\n<h1 id=\"Omi-和-React-在使用-Omil-和-Omi-Snippets-的区别\"><a href=\"#Omi-和-React-在使用-Omil-和-Omi-Snippets-的区别\" class=\"headerlink\" title=\"Omi 和 React 在使用 Omil 和 Omi Snippets 的区别\"></a>Omi 和 React 在使用 Omil 和 Omi Snippets 的区别</h1><p>Omil和Omi Snippets都支持编译Omi和React，编译的区别取决于<code><template></code>的<code>name</code>属性值，React的组件名必须首字母大写，Omi的组件首字母不能大写，并且名字中间必须有<code>-</code>符号连接。</p>\n<table>\n<thead>\n<tr>\n<th>React</th>\n<th>Omi</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code><template name="ComponentName"></code></td>\n<td><code><template name="component-name"></code></td>\n</tr>\n<tr>\n<td>组件名必须首字母大写</td>\n<td>组件首字母不能大写，并且名字中间必须有<code>-</code>符号连接</td>\n</tr>\n</tbody></table>\n<h2 id=\"在-JSX-中嵌入表达式\"><a href=\"#在-JSX-中嵌入表达式\" class=\"headerlink\" title=\"在 JSX 中嵌入表达式\"></a>在 JSX 中嵌入表达式</h2><p>在下面的例子中，我们声明了一个名为 title 的变量，然后在 JSX 中使用它，并将它包裹在大括号中：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> {this.data.title}</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> title: <span class=\"string\">\"Eno Yao !\"</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>Name: {this.formatName(user)}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>Age: {9+9}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">const</span> user = {</span></span><br><span class=\"line\"><span class=\"javascript\"> firstName: <span class=\"string\">'Eno'</span>,</span></span><br><span class=\"line\"><span class=\"javascript\"> lastName: <span class=\"string\">'Yao'</span></span></span><br><span class=\"line\"> };</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> formatName(user) {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> user.firstName + <span class=\"string\">' '</span> + user.lastName;</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>二元和三元表达式</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> { !0 ? '真' : <span class=\"tag\"><<span class=\"name\">p</span>></span>假<span class=\"tag\"></<span class=\"name\">p</span>></span> }</span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">h1</span>></span>{ user.age > 18 && <span class=\"tag\"><<span class=\"name\">div</span>></span>成年<span class=\"tag\"></<span class=\"name\">div</span>></span> }<span class=\"tag\"><<span class=\"name\">h1</span>></span><span class=\"tag\"></<span class=\"name\">h1</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>数组渲染成列表</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">ul</span>></span></span><br><span class=\"line\"> {</span><br><span class=\"line\"> ['a','b','c'].map((item,index) => {</span><br><span class=\"line\"> return <span class=\"tag\"><<span class=\"name\">li</span> <span class=\"attr\">key</span>=<span class=\"string\">{index}</span>></span>{item}<span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"> })</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">ul</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"JSX-也是一个表达式\"><a href=\"#JSX-也是一个表达式\" class=\"headerlink\" title=\"JSX 也是一个表达式\"></a>JSX 也是一个表达式</h2><p>在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。</p>\n<p>也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>{this.getGreeting(user)}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>{this.getGreeting()}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">const</span> user = {</span></span><br><span class=\"line\"><span class=\"javascript\"> firstName: <span class=\"string\">'Eno'</span>,</span></span><br><span class=\"line\"><span class=\"javascript\"> lastName: <span class=\"string\">'Yao'</span></span></span><br><span class=\"line\"> };</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> formatName(user) {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> user.firstName + <span class=\"string\">' '</span> + user.lastName;</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> getGreeting(user) {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">if</span> (user) {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> <span class=\"xml\"><span class=\"tag\"><<span class=\"name\">h1</span>></span>Hello, {this.formatName(user)}!<span class=\"tag\"></<span class=\"name\">h1</span>></span></span>;</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> <span class=\"xml\"><span class=\"tag\"><<span class=\"name\">h1</span>></span>Hello, Stranger.<span class=\"tag\"></<span class=\"name\">h1</span>></span></span>;</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"JSX-特定属性\"><a href=\"#JSX-特定属性\" class=\"headerlink\" title=\"JSX 特定属性\"></a>JSX 特定属性</h2><p>你可以通过使用引号，来将属性值指定为字符串字面量</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">tabIndex</span>=<span class=\"string\">\"0\"</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">tabIndex</span>=<span class=\"string\">\"0\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">img</span> <span class=\"attr\">src</span>=<span class=\"string\">{this.data.avatarUrl}</span> /></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> avatarUrl: <span class=\"string\">'https://avatars1.githubusercontent.com/u/17243165?s=460&v=4'</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>HTML 和 JSX 的一些区别</p>\n<table>\n<thead>\n<tr>\n<th>HTML</th>\n<th>JSX</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code><div class></code></td>\n<td><code><div className></code></td>\n</tr>\n<tr>\n<td><code><label for></code></td>\n<td><code><label htmlFor></code></td>\n</tr>\n<tr>\n<td><code><div tabindex></code></td>\n<td><code><div tabIndex></code></td>\n</tr>\n</tbody></table>\n<p>在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。</p>\n<blockquote>\n<p>警告：</p>\n</blockquote>\n<blockquote>\n<p>因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。</p>\n</blockquote>\n<blockquote>\n<p>例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。</p>\n</blockquote>\n<h2 id=\"使用-JSX-指定子元素\"><a href=\"#使用-JSX-指定子元素\" class=\"headerlink\" title=\"使用 JSX 指定子元素\"></a>使用 JSX 指定子元素</h2><p>假如一个标签里面没有内容，你可以使用 <code>/></code> 来闭合标签，就像 XML 语法一样：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">img</span> <span class=\"attr\">src</span>=<span class=\"string\">{this.data.avatarUrl}</span> /></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">input</span> <span class=\"attr\">onChange</span>=<span class=\"string\">{this.getInputValue.bind(this)}</span> /></span></span><br></pre></td></tr></table></figure>\n\n<p>JSX 标签里能够包含很多子元素:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span>{this.data.element}<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"> element: (</span><br><span class=\"line\"><span class=\"xml\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span></span><br><span class=\"line\"><span class=\"xml\"> <span class=\"tag\"><<span class=\"name\">h1</span>></span>Hello!<span class=\"tag\"></<span class=\"name\">h1</span>></span></span></span><br><span class=\"line\"><span class=\"xml\"> <span class=\"tag\"><<span class=\"name\">h2</span>></span>Good to see you here.<span class=\"tag\"></<span class=\"name\">h2</span>></span></span></span><br><span class=\"line\"><span class=\"xml\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span></span><br><span class=\"line\"> )</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"JSX-表示对象\"><a href=\"#JSX-表示对象\" class=\"headerlink\" title=\"JSX 表示对象\"></a>JSX 表示对象</h2><p>Babel 会把 JSX 转译成一个名为 <code>h()</code> 函数调用。</p>\n<p>以下两种示例代码完全等效：</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> element = <span class=\"xml\"><span class=\"tag\"><<span class=\"name\">div</span>></span></span></span><br><span class=\"line\"> <h1 className=\"greeting\"></span><br><span class=\"line\"> Hello, world!</span><br><span class=\"line\"><span class=\"xml\"> <span class=\"tag\"></<span class=\"name\">h1</span>></span></span></span><br><span class=\"line\"><span class=\"xml\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span></span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> element = h(</span><br><span class=\"line\"> <span class=\"string\">\"div\"</span>,</span><br><span class=\"line\"> <span class=\"literal\">null</span>,</span><br><span class=\"line\"> h(</span><br><span class=\"line\"> <span class=\"string\">\"h1\"</span>,</span><br><span class=\"line\"> {</span><br><span class=\"line\"> className: <span class=\"string\">\"greeting\"</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"string\">\"Hello, world!\"</span></span><br><span class=\"line\"> )</span><br><span class=\"line\">);</span><br></pre></td></tr></table></figure>\n\n<p><code>h()</code> 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 注意：这是简化过的结构</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> element = {</span><br><span class=\"line\"> children: [{</span><br><span class=\"line\"> attributes: {<span class=\"attr\">className</span>: <span class=\"string\">\"greeting\"</span>},</span><br><span class=\"line\"> children: [<span class=\"string\">\"Hello, world!\"</span>],</span><br><span class=\"line\"> nodeName: <span class=\"string\">\"h1\"</span>,</span><br><span class=\"line\"> }],</span><br><span class=\"line\"> nodeName: <span class=\"string\">\"div\"</span></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>这些对象它们描述了你希望在屏幕上看到的内容。Omi 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。</p>\n","site":{"data":{}},"excerpt":"","more":"<h1 id=\"JSX-简介\"><a href=\"#JSX-简介\" class=\"headerlink\" title=\"JSX 简介\"></a>JSX 简介</h1><p>观察下面这段代码模板：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">header</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.test}</span>></span>{this.data.title}<span class=\"tag\"></<span class=\"name\">header</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>这个有趣的标签语法既不是字符串也不是 HTML。</p>\n<p>它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 Omi 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。</p>\n<p>上面的代码事实上会自动编译为下面这份 js 代码</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> { WeElement, define, h } <span class=\"keyword\">from</span> <span class=\"string\">\"omi\"</span>;</span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">ComponentName</span> <span class=\"keyword\">extends</span> <span class=\"title\">WeElement</span> </span>{</span><br><span class=\"line\"> render() {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> h(</span><br><span class=\"line\"> <span class=\"string\">\"div\"</span>,</span><br><span class=\"line\"> {</span><br><span class=\"line\"> onClick: <span class=\"keyword\">this</span>.testClick</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"keyword\">this</span>.data.title</span><br><span class=\"line\"> );</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\">define(<span class=\"string\">\"component-name\"</span>, ComponentName);</span><br></pre></td></tr></table></figure>\n\n<h2 id=\"为什么使用-JSX？\"><a href=\"#为什么使用-JSX？\" class=\"headerlink\" title=\"为什么使用 JSX？\"></a>为什么使用 JSX？</h2><p>Omi 和 React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。</p>\n<h1 id=\"Omi-和-React-在使用-Omil-和-Omi-Snippets-的区别\"><a href=\"#Omi-和-React-在使用-Omil-和-Omi-Snippets-的区别\" class=\"headerlink\" title=\"Omi 和 React 在使用 Omil 和 Omi Snippets 的区别\"></a>Omi 和 React 在使用 Omil 和 Omi Snippets 的区别</h1><p>Omil和Omi Snippets都支持编译Omi和React，编译的区别取决于<code><template></code>的<code>name</code>属性值，React的组件名必须首字母大写，Omi的组件首字母不能大写，并且名字中间必须有<code>-</code>符号连接。</p>\n<table>\n<thead>\n<tr>\n<th>React</th>\n<th>Omi</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code><template name="ComponentName"></code></td>\n<td><code><template name="component-name"></code></td>\n</tr>\n<tr>\n<td>组件名必须首字母大写</td>\n<td>组件首字母不能大写，并且名字中间必须有<code>-</code>符号连接</td>\n</tr>\n</tbody></table>\n<h2 id=\"在-JSX-中嵌入表达式\"><a href=\"#在-JSX-中嵌入表达式\" class=\"headerlink\" title=\"在 JSX 中嵌入表达式\"></a>在 JSX 中嵌入表达式</h2><p>在下面的例子中，我们声明了一个名为 title 的变量，然后在 JSX 中使用它，并将它包裹在大括号中：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> {this.data.title}</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> title: <span class=\"string\">\"Eno Yao !\"</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>Name: {this.formatName(user)}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>Age: {9+9}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">const</span> user = {</span></span><br><span class=\"line\"><span class=\"javascript\"> firstName: <span class=\"string\">'Eno'</span>,</span></span><br><span class=\"line\"><span class=\"javascript\"> lastName: <span class=\"string\">'Yao'</span></span></span><br><span class=\"line\"> };</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> formatName(user) {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> user.firstName + <span class=\"string\">' '</span> + user.lastName;</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>二元和三元表达式</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> { !0 ? '真' : <span class=\"tag\"><<span class=\"name\">p</span>></span>假<span class=\"tag\"></<span class=\"name\">p</span>></span> }</span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">h1</span>></span>{ user.age > 18 && <span class=\"tag\"><<span class=\"name\">div</span>></span>成年<span class=\"tag\"></<span class=\"name\">div</span>></span> }<span class=\"tag\"><<span class=\"name\">h1</span>></span><span class=\"tag\"></<span class=\"name\">h1</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>数组渲染成列表</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">ul</span>></span></span><br><span class=\"line\"> {</span><br><span class=\"line\"> ['a','b','c'].map((item,index) => {</span><br><span class=\"line\"> return <span class=\"tag\"><<span class=\"name\">li</span> <span class=\"attr\">key</span>=<span class=\"string\">{index}</span>></span>{item}<span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"> })</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">ul</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"JSX-也是一个表达式\"><a href=\"#JSX-也是一个表达式\" class=\"headerlink\" title=\"JSX 也是一个表达式\"></a>JSX 也是一个表达式</h2><p>在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。</p>\n<p>也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>{this.getGreeting(user)}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>{this.getGreeting()}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">const</span> user = {</span></span><br><span class=\"line\"><span class=\"javascript\"> firstName: <span class=\"string\">'Eno'</span>,</span></span><br><span class=\"line\"><span class=\"javascript\"> lastName: <span class=\"string\">'Yao'</span></span></span><br><span class=\"line\"> };</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> formatName(user) {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> user.firstName + <span class=\"string\">' '</span> + user.lastName;</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> getGreeting(user) {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">if</span> (user) {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> <span class=\"xml\"><span class=\"tag\"><<span class=\"name\">h1</span>></span>Hello, {this.formatName(user)}!<span class=\"tag\"></<span class=\"name\">h1</span>></span></span>;</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> <span class=\"xml\"><span class=\"tag\"><<span class=\"name\">h1</span>></span>Hello, Stranger.<span class=\"tag\"></<span class=\"name\">h1</span>></span></span>;</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"JSX-特定属性\"><a href=\"#JSX-特定属性\" class=\"headerlink\" title=\"JSX 特定属性\"></a>JSX 特定属性</h2><p>你可以通过使用引号，来将属性值指定为字符串字面量</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">tabIndex</span>=<span class=\"string\">\"0\"</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">tabIndex</span>=<span class=\"string\">\"0\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">img</span> <span class=\"attr\">src</span>=<span class=\"string\">{this.data.avatarUrl}</span> /></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> avatarUrl: <span class=\"string\">'https://avatars1.githubusercontent.com/u/17243165?s=460&v=4'</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>HTML 和 JSX 的一些区别</p>\n<table>\n<thead>\n<tr>\n<th>HTML</th>\n<th>JSX</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code><div class></code></td>\n<td><code><div className></code></td>\n</tr>\n<tr>\n<td><code><label for></code></td>\n<td><code><label htmlFor></code></td>\n</tr>\n<tr>\n<td><code><div tabindex></code></td>\n<td><code><div tabIndex></code></td>\n</tr>\n</tbody></table>\n<p>在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。</p>\n<blockquote>\n<p>警告：</p>\n</blockquote>\n<blockquote>\n<p>因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。</p>\n</blockquote>\n<blockquote>\n<p>例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。</p>\n</blockquote>\n<h2 id=\"使用-JSX-指定子元素\"><a href=\"#使用-JSX-指定子元素\" class=\"headerlink\" title=\"使用 JSX 指定子元素\"></a>使用 JSX 指定子元素</h2><p>假如一个标签里面没有内容，你可以使用 <code>/></code> 来闭合标签，就像 XML 语法一样：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">img</span> <span class=\"attr\">src</span>=<span class=\"string\">{this.data.avatarUrl}</span> /></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">input</span> <span class=\"attr\">onChange</span>=<span class=\"string\">{this.getInputValue.bind(this)}</span> /></span></span><br></pre></td></tr></table></figure>\n\n<p>JSX 标签里能够包含很多子元素:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span>{this.data.element}<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"> element: (</span><br><span class=\"line\"><span class=\"xml\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span></span><br><span class=\"line\"><span class=\"xml\"> <span class=\"tag\"><<span class=\"name\">h1</span>></span>Hello!<span class=\"tag\"></<span class=\"name\">h1</span>></span></span></span><br><span class=\"line\"><span class=\"xml\"> <span class=\"tag\"><<span class=\"name\">h2</span>></span>Good to see you here.<span class=\"tag\"></<span class=\"name\">h2</span>></span></span></span><br><span class=\"line\"><span class=\"xml\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span></span><br><span class=\"line\"> )</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"JSX-表示对象\"><a href=\"#JSX-表示对象\" class=\"headerlink\" title=\"JSX 表示对象\"></a>JSX 表示对象</h2><p>Babel 会把 JSX 转译成一个名为 <code>h()</code> 函数调用。</p>\n<p>以下两种示例代码完全等效：</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> element = <span class=\"xml\"><span class=\"tag\"><<span class=\"name\">div</span>></span></span></span><br><span class=\"line\"> <h1 className=\"greeting\"></span><br><span class=\"line\"> Hello, world!</span><br><span class=\"line\"><span class=\"xml\"> <span class=\"tag\"></<span class=\"name\">h1</span>></span></span></span><br><span class=\"line\"><span class=\"xml\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span></span><br></pre></td></tr></table></figure>\n\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> element = h(</span><br><span class=\"line\"> <span class=\"string\">\"div\"</span>,</span><br><span class=\"line\"> <span class=\"literal\">null</span>,</span><br><span class=\"line\"> h(</span><br><span class=\"line\"> <span class=\"string\">\"h1\"</span>,</span><br><span class=\"line\"> {</span><br><span class=\"line\"> className: <span class=\"string\">\"greeting\"</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"string\">\"Hello, world!\"</span></span><br><span class=\"line\"> )</span><br><span class=\"line\">);</span><br></pre></td></tr></table></figure>\n\n<p><code>h()</code> 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 注意：这是简化过的结构</span></span><br><span class=\"line\"><span class=\"keyword\">const</span> element = {</span><br><span class=\"line\"> children: [{</span><br><span class=\"line\"> attributes: {<span class=\"attr\">className</span>: <span class=\"string\">\"greeting\"</span>},</span><br><span class=\"line\"> children: [<span class=\"string\">\"Hello, world!\"</span>],</span><br><span class=\"line\"> nodeName: <span class=\"string\">\"h1\"</span>,</span><br><span class=\"line\"> }],</span><br><span class=\"line\"> nodeName: <span class=\"string\">\"div\"</span></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>这些对象它们描述了你希望在屏幕上看到的内容。Omi 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。</p>\n"},{"_content":"<!-- * [介绍](/)\n* [安装](/install)\n* [配合Omi Snippets插件](/plugin)\n* [配合React开发](/react)\n* [语言块规范](/spec)\n* [JSX](/jsx)\n* [Props](/props)\n* [事件处理](/event)\n* [生命周期](/lifecycle)\n* [Update](/update)\n* [Ref](/ref)\n* [Store](/store)\n* [CSS](/css)\n* [高阶组件](/hoc) -->\n\n\n* [介绍](../home)\n* [安装](../install/)\n* [配合Omi Snippets插件](../plugin)\n* [配合React开发](../react)\n* [语言块规范](../spec)\n* [JSX](../jsx)\n* [Props](../props)\n* [事件处理](../event)\n* [生命周期](../lifecycle)\n* [Update](../update)\n* [Ref](../ref)\n* [Store](../store)\n* [CSS](../css)\n* [高阶组件](../hoc)","source":"_posts/menu.md","raw":"<!-- * [介绍](/)\n* [安装](/install)\n* [配合Omi Snippets插件](/plugin)\n* [配合React开发](/react)\n* [语言块规范](/spec)\n* [JSX](/jsx)\n* [Props](/props)\n* [事件处理](/event)\n* [生命周期](/lifecycle)\n* [Update](/update)\n* [Ref](/ref)\n* [Store](/store)\n* [CSS](/css)\n* [高阶组件](/hoc) -->\n\n\n* [介绍](../home)\n* [安装](../install/)\n* [配合Omi Snippets插件](../plugin)\n* [配合React开发](../react)\n* [语言块规范](../spec)\n* [JSX](../jsx)\n* [Props](../props)\n* [事件处理](../event)\n* [生命周期](../lifecycle)\n* [Update](../update)\n* [Ref](../ref)\n* [Store](../store)\n* [CSS](../css)\n* [高阶组件](../hoc)","slug":"menu","published":1,"date":"2019-07-08T09:58:10.423Z","updated":"2019-07-13T16:43:16.476Z","_id":"cjxwy8x900002sp6t8h6iyjb9","title":"","comments":1,"layout":"post","photos":[],"link":"","content":"<!-- * [介绍](/)\n* [安装](/install)\n* [配合Omi Snippets插件](/plugin)\n* [配合React开发](/react)\n* [语言块规范](/spec)\n* [JSX](/jsx)\n* [Props](/props)\n* [事件处理](/event)\n* [生命周期](/lifecycle)\n* [Update](/update)\n* [Ref](/ref)\n* [Store](/store)\n* [CSS](/css)\n* [高阶组件](/hoc) -->\n\n\n<ul>\n<li><a href=\"../home\">介绍</a></li>\n<li><a href=\"../install/\">安装</a></li>\n<li><a href=\"../plugin\">配合Omi Snippets插件</a></li>\n<li><a href=\"../react\">配合React开发</a></li>\n<li><a href=\"../spec\">语言块规范</a></li>\n<li><a href=\"../jsx\">JSX</a></li>\n<li><a href=\"../props\">Props</a></li>\n<li><a href=\"../event\">事件处理</a></li>\n<li><a href=\"../lifecycle\">生命周期</a></li>\n<li><a href=\"../update\">Update</a></li>\n<li><a href=\"../ref\">Ref</a></li>\n<li><a href=\"../store\">Store</a></li>\n<li><a href=\"../css\">CSS</a></li>\n<li><a href=\"../hoc\">高阶组件</a></li>\n</ul>\n","site":{"data":{}},"excerpt":"","more":"<!-- * [介绍](/)\n* [安装](/install)\n* [配合Omi Snippets插件](/plugin)\n* [配合React开发](/react)\n* [语言块规范](/spec)\n* [JSX](/jsx)\n* [Props](/props)\n* [事件处理](/event)\n* [生命周期](/lifecycle)\n* [Update](/update)\n* [Ref](/ref)\n* [Store](/store)\n* [CSS](/css)\n* [高阶组件](/hoc) -->\n\n\n<ul>\n<li><a href=\"../home\">介绍</a></li>\n<li><a href=\"../install/\">安装</a></li>\n<li><a href=\"../plugin\">配合Omi Snippets插件</a></li>\n<li><a href=\"../react\">配合React开发</a></li>\n<li><a href=\"../spec\">语言块规范</a></li>\n<li><a href=\"../jsx\">JSX</a></li>\n<li><a href=\"../props\">Props</a></li>\n<li><a href=\"../event\">事件处理</a></li>\n<li><a href=\"../lifecycle\">生命周期</a></li>\n<li><a href=\"../update\">Update</a></li>\n<li><a href=\"../ref\">Ref</a></li>\n<li><a href=\"../store\">Store</a></li>\n<li><a href=\"../css\">CSS</a></li>\n<li><a href=\"../hoc\">高阶组件</a></li>\n</ul>\n"},{"_content":"# Omi Snippets\n\n在配置完 Omil 之后，我们可以在 VS Code 上同时安装好 [Omi Snippets](https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets) 扩展，这个插件可以方便的让你把 .omi 和 .eno 后缀文件在未经过 webpack 处理前转化为 .js 文件，让你可以直观了解到单文件组件经过 omil 转化后的 JS 文件内容，这相当于局部编译减轻 webpack 处理单文件时候的不必要消耗。\n\n## 目录结构\n\n例如你在 webpack 的入口文件夹中有一个 .omi 的后缀文件，当你新建并经过编辑保存之后，Omi Snippets扩展会在同级目录下新建一份同名但不同后缀的 .js 文件\n\n- src\n - Hello.omi\n - Hello.js\n\n|Hello.omi|开发中你需要编写的单文件组件|\n|-|-|\n|Hello.js|修改或者保存文件`Hello.omi`后经过插件转化的js文件|\n\n如下图，左边的代码是我们编写的 .omi 后缀的单文件组件，右边是经过 Omi Snippets 生成的 .js 后缀文件。\n\n<img src=\"../images/transfer.png\" />\n\n\n## 示例代码\n\n上图的示例代码如下\n\n- `<template>` 标签负责放 JSX 的内容，属性`name=\"my-test\"`为该组件的名字，后面可以在 JSX 中用`<my-text>`使用该组件;\n- `<script>` 标签负责放入组件的逻辑文件，固定的结构为 `export default class { // 你的代码 }`或者为`export default HOC(class { // 你的代码 })`两种形式，第一种是定义类组件，第二种用来定义高阶组件，你的代码部分可以放入生命周期，函数等;\n- `<style>` 标签负责定义该组件的局部样式\n\n```html\n<template name=\"my-test\">\n <div class=\"example\">\n { this.data.msg }\n </div>\n</template>\n\n<script>\nexport default class {\n install () {\n this.data = {\n msg: 'Hello world!'\n }\n }\n}\n</script>\n\n<style>\n.example {\n color: red;\n}\n</style>\n```\n以下代码就是经过 Omi Snippets 生成的 .js 后缀文件，可以用于在你没有 omil 模块下，主逻辑文件或者其他组件引入调用。\n```js\nimport { WeElement, define, h } from \"omi\";\nclass MyTest extends WeElement {\n render() {\n return h(\n \"div\",\n {\n class: \"example\"\n },\n this.data.msg\n );\n }\n install() {\n this.data = {\n msg: \"Hello world!\"\n };\n }\n}\nMyTest.css = `\n.example {\n color: red;\n}\n`;\ndefine(\"my-test\", MyTest);\n```","source":"_posts/plugin.md","raw":"# Omi Snippets\n\n在配置完 Omil 之后，我们可以在 VS Code 上同时安装好 [Omi Snippets](https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets) 扩展，这个插件可以方便的让你把 .omi 和 .eno 后缀文件在未经过 webpack 处理前转化为 .js 文件，让你可以直观了解到单文件组件经过 omil 转化后的 JS 文件内容，这相当于局部编译减轻 webpack 处理单文件时候的不必要消耗。\n\n## 目录结构\n\n例如你在 webpack 的入口文件夹中有一个 .omi 的后缀文件，当你新建并经过编辑保存之后，Omi Snippets扩展会在同级目录下新建一份同名但不同后缀的 .js 文件\n\n- src\n - Hello.omi\n - Hello.js\n\n|Hello.omi|开发中你需要编写的单文件组件|\n|-|-|\n|Hello.js|修改或者保存文件`Hello.omi`后经过插件转化的js文件|\n\n如下图，左边的代码是我们编写的 .omi 后缀的单文件组件，右边是经过 Omi Snippets 生成的 .js 后缀文件。\n\n<img src=\"../images/transfer.png\" />\n\n\n## 示例代码\n\n上图的示例代码如下\n\n- `<template>` 标签负责放 JSX 的内容，属性`name=\"my-test\"`为该组件的名字，后面可以在 JSX 中用`<my-text>`使用该组件;\n- `<script>` 标签负责放入组件的逻辑文件，固定的结构为 `export default class { // 你的代码 }`或者为`export default HOC(class { // 你的代码 })`两种形式，第一种是定义类组件，第二种用来定义高阶组件，你的代码部分可以放入生命周期，函数等;\n- `<style>` 标签负责定义该组件的局部样式\n\n```html\n<template name=\"my-test\">\n <div class=\"example\">\n { this.data.msg }\n </div>\n</template>\n\n<script>\nexport default class {\n install () {\n this.data = {\n msg: 'Hello world!'\n }\n }\n}\n</script>\n\n<style>\n.example {\n color: red;\n}\n</style>\n```\n以下代码就是经过 Omi Snippets 生成的 .js 后缀文件，可以用于在你没有 omil 模块下，主逻辑文件或者其他组件引入调用。\n```js\nimport { WeElement, define, h } from \"omi\";\nclass MyTest extends WeElement {\n render() {\n return h(\n \"div\",\n {\n class: \"example\"\n },\n this.data.msg\n );\n }\n install() {\n this.data = {\n msg: \"Hello world!\"\n };\n }\n}\nMyTest.css = `\n.example {\n color: red;\n}\n`;\ndefine(\"my-test\", MyTest);\n```","slug":"plugin","published":1,"date":"2019-07-09T05:42:19.340Z","updated":"2019-07-13T11:09:59.585Z","_id":"cjxwy8x910003sp6t4py9msas","title":"","comments":1,"layout":"post","photos":[],"link":"","content":"<h1 id=\"Omi-Snippets\"><a href=\"#Omi-Snippets\" class=\"headerlink\" title=\"Omi Snippets\"></a>Omi Snippets</h1><p>在配置完 Omil 之后，我们可以在 VS Code 上同时安装好 <a href=\"https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets\" target=\"_blank\" rel=\"noopener\">Omi Snippets</a> 扩展，这个插件可以方便的让你把 .omi 和 .eno 后缀文件在未经过 webpack 处理前转化为 .js 文件，让你可以直观了解到单文件组件经过 omil 转化后的 JS 文件内容，这相当于局部编译减轻 webpack 处理单文件时候的不必要消耗。</p>\n<h2 id=\"目录结构\"><a href=\"#目录结构\" class=\"headerlink\" title=\"目录结构\"></a>目录结构</h2><p>例如你在 webpack 的入口文件夹中有一个 .omi 的后缀文件，当你新建并经过编辑保存之后，Omi Snippets扩展会在同级目录下新建一份同名但不同后缀的 .js 文件</p>\n<ul>\n<li>src<ul>\n<li>Hello.omi</li>\n<li>Hello.js</li>\n</ul>\n</li>\n</ul>\n<table>\n<thead>\n<tr>\n<th>Hello.omi</th>\n<th>开发中你需要编写的单文件组件</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Hello.js</td>\n<td>修改或者保存文件<code>Hello.omi</code>后经过插件转化的js文件</td>\n</tr>\n</tbody></table>\n<p>如下图，左边的代码是我们编写的 .omi 后缀的单文件组件，右边是经过 Omi Snippets 生成的 .js 后缀文件。</p>\n<img src=\"../images/transfer.png\">\n\n\n<h2 id=\"示例代码\"><a href=\"#示例代码\" class=\"headerlink\" title=\"示例代码\"></a>示例代码</h2><p>上图的示例代码如下</p>\n<ul>\n<li><code><template></code> 标签负责放 JSX 的内容，属性<code>name="my-test"</code>为该组件的名字，后面可以在 JSX 中用<code><my-text></code>使用该组件;</li>\n<li><code><script></code> 标签负责放入组件的逻辑文件，固定的结构为 <code>export default class { // 你的代码 }</code>或者为<code>export default HOC(class { // 你的代码 })</code>两种形式，第一种是定义类组件，第二种用来定义高阶组件，你的代码部分可以放入生命周期，函数等;</li>\n<li><code><style></code> 标签负责定义该组件的局部样式</li>\n</ul>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"my-test\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">\"example\"</span>></span></span><br><span class=\"line\"> { this.data.msg }</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\">export default class {</span><br><span class=\"line\"> install () {</span><br><span class=\"line\"> this.data = {</span><br><span class=\"line\"> msg: 'Hello world!'</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span>></span></span><br><span class=\"line\">.example {</span><br><span class=\"line\"> color: red;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>以下代码就是经过 Omi Snippets 生成的 .js 后缀文件，可以用于在你没有 omil 模块下，主逻辑文件或者其他组件引入调用。</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> { WeElement, define, h } <span class=\"keyword\">from</span> <span class=\"string\">\"omi\"</span>;</span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">MyTest</span> <span class=\"keyword\">extends</span> <span class=\"title\">WeElement</span> </span>{</span><br><span class=\"line\"> render() {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> h(</span><br><span class=\"line\"> <span class=\"string\">\"div\"</span>,</span><br><span class=\"line\"> {</span><br><span class=\"line\"> class: \"example\"</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"keyword\">this</span>.data.msg</span><br><span class=\"line\"> );</span><br><span class=\"line\"> }</span><br><span class=\"line\"> install() {</span><br><span class=\"line\"> <span class=\"keyword\">this</span>.data = {</span><br><span class=\"line\"> msg: <span class=\"string\">\"Hello world!\"</span></span><br><span class=\"line\"> };</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\">MyTest.css = <span class=\"string\">`</span></span><br><span class=\"line\"><span class=\"string\">.example {</span></span><br><span class=\"line\"><span class=\"string\"> color: red;</span></span><br><span class=\"line\"><span class=\"string\">}</span></span><br><span class=\"line\"><span class=\"string\">`</span>;</span><br><span class=\"line\">define(<span class=\"string\">\"my-test\"</span>, MyTest);</span><br></pre></td></tr></table></figure>","site":{"data":{}},"excerpt":"","more":"<h1 id=\"Omi-Snippets\"><a href=\"#Omi-Snippets\" class=\"headerlink\" title=\"Omi Snippets\"></a>Omi Snippets</h1><p>在配置完 Omil 之后，我们可以在 VS Code 上同时安装好 <a href=\"https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets\" target=\"_blank\" rel=\"noopener\">Omi Snippets</a> 扩展，这个插件可以方便的让你把 .omi 和 .eno 后缀文件在未经过 webpack 处理前转化为 .js 文件，让你可以直观了解到单文件组件经过 omil 转化后的 JS 文件内容，这相当于局部编译减轻 webpack 处理单文件时候的不必要消耗。</p>\n<h2 id=\"目录结构\"><a href=\"#目录结构\" class=\"headerlink\" title=\"目录结构\"></a>目录结构</h2><p>例如你在 webpack 的入口文件夹中有一个 .omi 的后缀文件，当你新建并经过编辑保存之后，Omi Snippets扩展会在同级目录下新建一份同名但不同后缀的 .js 文件</p>\n<ul>\n<li>src<ul>\n<li>Hello.omi</li>\n<li>Hello.js</li>\n</ul>\n</li>\n</ul>\n<table>\n<thead>\n<tr>\n<th>Hello.omi</th>\n<th>开发中你需要编写的单文件组件</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Hello.js</td>\n<td>修改或者保存文件<code>Hello.omi</code>后经过插件转化的js文件</td>\n</tr>\n</tbody></table>\n<p>如下图，左边的代码是我们编写的 .omi 后缀的单文件组件，右边是经过 Omi Snippets 生成的 .js 后缀文件。</p>\n<img src=\"../images/transfer.png\">\n\n\n<h2 id=\"示例代码\"><a href=\"#示例代码\" class=\"headerlink\" title=\"示例代码\"></a>示例代码</h2><p>上图的示例代码如下</p>\n<ul>\n<li><code><template></code> 标签负责放 JSX 的内容，属性<code>name="my-test"</code>为该组件的名字，后面可以在 JSX 中用<code><my-text></code>使用该组件;</li>\n<li><code><script></code> 标签负责放入组件的逻辑文件，固定的结构为 <code>export default class { // 你的代码 }</code>或者为<code>export default HOC(class { // 你的代码 })</code>两种形式，第一种是定义类组件，第二种用来定义高阶组件，你的代码部分可以放入生命周期，函数等;</li>\n<li><code><style></code> 标签负责定义该组件的局部样式</li>\n</ul>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"my-test\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">\"example\"</span>></span></span><br><span class=\"line\"> { this.data.msg }</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\">export default class {</span><br><span class=\"line\"> install () {</span><br><span class=\"line\"> this.data = {</span><br><span class=\"line\"> msg: 'Hello world!'</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span>></span></span><br><span class=\"line\">.example {</span><br><span class=\"line\"> color: red;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>以下代码就是经过 Omi Snippets 生成的 .js 后缀文件，可以用于在你没有 omil 模块下，主逻辑文件或者其他组件引入调用。</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> { WeElement, define, h } <span class=\"keyword\">from</span> <span class=\"string\">\"omi\"</span>;</span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">MyTest</span> <span class=\"keyword\">extends</span> <span class=\"title\">WeElement</span> </span>{</span><br><span class=\"line\"> render() {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> h(</span><br><span class=\"line\"> <span class=\"string\">\"div\"</span>,</span><br><span class=\"line\"> {</span><br><span class=\"line\"> class: \"example\"</span><br><span class=\"line\"> },</span><br><span class=\"line\"> <span class=\"keyword\">this</span>.data.msg</span><br><span class=\"line\"> );</span><br><span class=\"line\"> }</span><br><span class=\"line\"> install() {</span><br><span class=\"line\"> <span class=\"keyword\">this</span>.data = {</span><br><span class=\"line\"> msg: <span class=\"string\">\"Hello world!\"</span></span><br><span class=\"line\"> };</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\">MyTest.css = <span class=\"string\">`</span></span><br><span class=\"line\"><span class=\"string\">.example {</span></span><br><span class=\"line\"><span class=\"string\"> color: red;</span></span><br><span class=\"line\"><span class=\"string\">}</span></span><br><span class=\"line\"><span class=\"string\">`</span>;</span><br><span class=\"line\">define(<span class=\"string\">\"my-test\"</span>, MyTest);</span><br></pre></td></tr></table></figure>"},{"_content":"# 起步\n\n## Omi CLI\n如果你不想手动设置 webpack，我们推荐使用 [Omi CLI](https://github.com/Tencent/omi/tree/master/packages/omi-cli) 直接创建一个项目的脚手架。通过 Omi CLI 创建的项目会针对多数常见的开发需求进行预先配置，做到开箱即用。\n\n如果`Omi CLI`提供的内建没有满足你的需求，或者你乐于从零开始创建你自己的 webpack 配置，那么请继续阅读这篇指南。\n\n# 手动设置\n## 安装\n\n首先先安装好`Omil`\n```bash\nnpm install -D omil\n```\n如果你使用的是 [Visual Studio Code](https://code.visualstudio.com/) 进行开发，强烈建议下载 [Omi Snippets](https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets) 扩展，它会提供给你语法高亮，局部编译等功能。您可以在 VSC 扩展界面里面搜索 omi 这个关键词出现`Omi Snippets`点击安装即可，稍等片刻，当它安装成功后会提醒你需要重新加载编辑工具，点击重新加载即可使用。\n\n<img src=\"../images/omi-snippets.png\">\n\n每个`Omil`包的新版本发布时，一个相应版本的`Omi Snippets`也会随之发布。\n\n## webpack 配置\n\nOmi Loader 的配置和其它的 loader 基本一样。\n```js\n// webpack.config.js\nmodule.exports = {\n module: {\n rules: [\n // ... 其它规则\n {\n test: /\\.omi|eno$/,\n loader: 'omil'\n }\n ]\n }\n}\n```\n一个更完整的 webpack 配置示例看起来像这样：\n```js\nmodule.exports = {\n mode: 'development',\n module: {\n rules: [{\n test: /\\.omi|eno$/,\n use: [{\n loader: require.resolve('omil'),\n options: {\n // Use in development, You should remove in production\n sourceMaps: 'both',\n // Config babel plugins for async, await and other many features\n plugins: [\n [\n \"@babel/plugin-transform-runtime\",\n {\n \"absoluteRuntime\": false,\n \"corejs\": false,\n \"helpers\": true,\n \"regenerator\": true,\n \"useESModules\": false\n }\n ]\n ]\n }\n }],\n // Or you can use eno-loader or omil directly\n // use: ['eno-loader']\n // use: ['omil']\n }]\n }\n}\n```","source":"_posts/install.md","raw":"# 起步\n\n## Omi CLI\n如果你不想手动设置 webpack，我们推荐使用 [Omi CLI](https://github.com/Tencent/omi/tree/master/packages/omi-cli) 直接创建一个项目的脚手架。通过 Omi CLI 创建的项目会针对多数常见的开发需求进行预先配置，做到开箱即用。\n\n如果`Omi CLI`提供的内建没有满足你的需求，或者你乐于从零开始创建你自己的 webpack 配置，那么请继续阅读这篇指南。\n\n# 手动设置\n## 安装\n\n首先先安装好`Omil`\n```bash\nnpm install -D omil\n```\n如果你使用的是 [Visual Studio Code](https://code.visualstudio.com/) 进行开发，强烈建议下载 [Omi Snippets](https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets) 扩展，它会提供给你语法高亮，局部编译等功能。您可以在 VSC 扩展界面里面搜索 omi 这个关键词出现`Omi Snippets`点击安装即可，稍等片刻，当它安装成功后会提醒你需要重新加载编辑工具，点击重新加载即可使用。\n\n<img src=\"../images/omi-snippets.png\">\n\n每个`Omil`包的新版本发布时，一个相应版本的`Omi Snippets`也会随之发布。\n\n## webpack 配置\n\nOmi Loader 的配置和其它的 loader 基本一样。\n```js\n// webpack.config.js\nmodule.exports = {\n module: {\n rules: [\n // ... 其它规则\n {\n test: /\\.omi|eno$/,\n loader: 'omil'\n }\n ]\n }\n}\n```\n一个更完整的 webpack 配置示例看起来像这样：\n```js\nmodule.exports = {\n mode: 'development',\n module: {\n rules: [{\n test: /\\.omi|eno$/,\n use: [{\n loader: require.resolve('omil'),\n options: {\n // Use in development, You should remove in production\n sourceMaps: 'both',\n // Config babel plugins for async, await and other many features\n plugins: [\n [\n \"@babel/plugin-transform-runtime\",\n {\n \"absoluteRuntime\": false,\n \"corejs\": false,\n \"helpers\": true,\n \"regenerator\": true,\n \"useESModules\": false\n }\n ]\n ]\n }\n }],\n // Or you can use eno-loader or omil directly\n // use: ['eno-loader']\n // use: ['omil']\n }]\n }\n}\n```","slug":"install","published":1,"date":"2019-07-09T05:22:44.847Z","updated":"2019-07-09T05:44:01.663Z","title":"","comments":1,"layout":"post","photos":[],"link":"","_id":"cjxwy8x920004sp6td0vl690x","content":"<h1 id=\"起步\"><a href=\"#起步\" class=\"headerlink\" title=\"起步\"></a>起步</h1><h2 id=\"Omi-CLI\"><a href=\"#Omi-CLI\" class=\"headerlink\" title=\"Omi CLI\"></a>Omi CLI</h2><p>如果你不想手动设置 webpack，我们推荐使用 <a href=\"https://github.com/Tencent/omi/tree/master/packages/omi-cli\" target=\"_blank\" rel=\"noopener\">Omi CLI</a> 直接创建一个项目的脚手架。通过 Omi CLI 创建的项目会针对多数常见的开发需求进行预先配置，做到开箱即用。</p>\n<p>如果<code>Omi CLI</code>提供的内建没有满足你的需求，或者你乐于从零开始创建你自己的 webpack 配置，那么请继续阅读这篇指南。</p>\n<h1 id=\"手动设置\"><a href=\"#手动设置\" class=\"headerlink\" title=\"手动设置\"></a>手动设置</h1><h2 id=\"安装\"><a href=\"#安装\" class=\"headerlink\" title=\"安装\"></a>安装</h2><p>首先先安装好<code>Omil</code></p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install -D omil</span><br></pre></td></tr></table></figure>\n\n<p>如果你使用的是 <a href=\"https://code.visualstudio.com/\" target=\"_blank\" rel=\"noopener\">Visual Studio Code</a> 进行开发，强烈建议下载 <a href=\"https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets\" target=\"_blank\" rel=\"noopener\">Omi Snippets</a> 扩展，它会提供给你语法高亮，局部编译等功能。您可以在 VSC 扩展界面里面搜索 omi 这个关键词出现<code>Omi Snippets</code>点击安装即可，稍等片刻，当它安装成功后会提醒你需要重新加载编辑工具，点击重新加载即可使用。</p>\n<img src=\"../images/omi-snippets.png\">\n\n<p>每个<code>Omil</code>包的新版本发布时，一个相应版本的<code>Omi Snippets</code>也会随之发布。</p>\n<h2 id=\"webpack-配置\"><a href=\"#webpack-配置\" class=\"headerlink\" title=\"webpack 配置\"></a>webpack 配置</h2><p>Omi Loader 的配置和其它的 loader 基本一样。</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// webpack.config.js</span></span><br><span class=\"line\"><span class=\"built_in\">module</span>.exports = {</span><br><span class=\"line\"> <span class=\"built_in\">module</span>: {</span><br><span class=\"line\"> rules: [</span><br><span class=\"line\"> <span class=\"comment\">// ... 其它规则</span></span><br><span class=\"line\"> {</span><br><span class=\"line\"> test: <span class=\"regexp\">/\\.omi|eno$/</span>,</span><br><span class=\"line\"> loader: <span class=\"string\">'omil'</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> ]</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>一个更完整的 webpack 配置示例看起来像这样：</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br><span class=\"line\">24</span><br><span class=\"line\">25</span><br><span class=\"line\">26</span><br><span class=\"line\">27</span><br><span class=\"line\">28</span><br><span class=\"line\">29</span><br><span class=\"line\">30</span><br><span class=\"line\">31</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">module</span>.exports = {</span><br><span class=\"line\"> mode: <span class=\"string\">'development'</span>,</span><br><span class=\"line\"> <span class=\"built_in\">module</span>: {</span><br><span class=\"line\"> rules: [{</span><br><span class=\"line\"> test: <span class=\"regexp\">/\\.omi|eno$/</span>,</span><br><span class=\"line\"> use: [{</span><br><span class=\"line\"> loader: <span class=\"built_in\">require</span>.resolve(<span class=\"string\">'omil'</span>),</span><br><span class=\"line\"> options: {</span><br><span class=\"line\"> <span class=\"comment\">// Use in development, You should remove in production</span></span><br><span class=\"line\"> sourceMaps: <span class=\"string\">'both'</span>,</span><br><span class=\"line\"> <span class=\"comment\">// Config babel plugins for async, await and other many features</span></span><br><span class=\"line\"> plugins: [</span><br><span class=\"line\"> [</span><br><span class=\"line\"> <span class=\"string\">\"@babel/plugin-transform-runtime\"</span>,</span><br><span class=\"line\"> {</span><br><span class=\"line\"> <span class=\"string\">\"absoluteRuntime\"</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\"> <span class=\"string\">\"corejs\"</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\"> <span class=\"string\">\"helpers\"</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\"> <span class=\"string\">\"regenerator\"</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\"> <span class=\"string\">\"useESModules\"</span>: <span class=\"literal\">false</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> ]</span><br><span class=\"line\"> ]</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }],</span><br><span class=\"line\"> <span class=\"comment\">// Or you can use eno-loader or omil directly</span></span><br><span class=\"line\"> <span class=\"comment\">// use: ['eno-loader']</span></span><br><span class=\"line\"> <span class=\"comment\">// use: ['omil']</span></span><br><span class=\"line\"> }]</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>","site":{"data":{}},"excerpt":"","more":"<h1 id=\"起步\"><a href=\"#起步\" class=\"headerlink\" title=\"起步\"></a>起步</h1><h2 id=\"Omi-CLI\"><a href=\"#Omi-CLI\" class=\"headerlink\" title=\"Omi CLI\"></a>Omi CLI</h2><p>如果你不想手动设置 webpack，我们推荐使用 <a href=\"https://github.com/Tencent/omi/tree/master/packages/omi-cli\" target=\"_blank\" rel=\"noopener\">Omi CLI</a> 直接创建一个项目的脚手架。通过 Omi CLI 创建的项目会针对多数常见的开发需求进行预先配置，做到开箱即用。</p>\n<p>如果<code>Omi CLI</code>提供的内建没有满足你的需求，或者你乐于从零开始创建你自己的 webpack 配置，那么请继续阅读这篇指南。</p>\n<h1 id=\"手动设置\"><a href=\"#手动设置\" class=\"headerlink\" title=\"手动设置\"></a>手动设置</h1><h2 id=\"安装\"><a href=\"#安装\" class=\"headerlink\" title=\"安装\"></a>安装</h2><p>首先先安装好<code>Omil</code></p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install -D omil</span><br></pre></td></tr></table></figure>\n\n<p>如果你使用的是 <a href=\"https://code.visualstudio.com/\" target=\"_blank\" rel=\"noopener\">Visual Studio Code</a> 进行开发，强烈建议下载 <a href=\"https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets\" target=\"_blank\" rel=\"noopener\">Omi Snippets</a> 扩展，它会提供给你语法高亮，局部编译等功能。您可以在 VSC 扩展界面里面搜索 omi 这个关键词出现<code>Omi Snippets</code>点击安装即可，稍等片刻，当它安装成功后会提醒你需要重新加载编辑工具，点击重新加载即可使用。</p>\n<img src=\"../images/omi-snippets.png\">\n\n<p>每个<code>Omil</code>包的新版本发布时，一个相应版本的<code>Omi Snippets</code>也会随之发布。</p>\n<h2 id=\"webpack-配置\"><a href=\"#webpack-配置\" class=\"headerlink\" title=\"webpack 配置\"></a>webpack 配置</h2><p>Omi Loader 的配置和其它的 loader 基本一样。</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// webpack.config.js</span></span><br><span class=\"line\"><span class=\"built_in\">module</span>.exports = {</span><br><span class=\"line\"> <span class=\"built_in\">module</span>: {</span><br><span class=\"line\"> rules: [</span><br><span class=\"line\"> <span class=\"comment\">// ... 其它规则</span></span><br><span class=\"line\"> {</span><br><span class=\"line\"> test: <span class=\"regexp\">/\\.omi|eno$/</span>,</span><br><span class=\"line\"> loader: <span class=\"string\">'omil'</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> ]</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>一个更完整的 webpack 配置示例看起来像这样：</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br><span class=\"line\">24</span><br><span class=\"line\">25</span><br><span class=\"line\">26</span><br><span class=\"line\">27</span><br><span class=\"line\">28</span><br><span class=\"line\">29</span><br><span class=\"line\">30</span><br><span class=\"line\">31</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">module</span>.exports = {</span><br><span class=\"line\"> mode: <span class=\"string\">'development'</span>,</span><br><span class=\"line\"> <span class=\"built_in\">module</span>: {</span><br><span class=\"line\"> rules: [{</span><br><span class=\"line\"> test: <span class=\"regexp\">/\\.omi|eno$/</span>,</span><br><span class=\"line\"> use: [{</span><br><span class=\"line\"> loader: <span class=\"built_in\">require</span>.resolve(<span class=\"string\">'omil'</span>),</span><br><span class=\"line\"> options: {</span><br><span class=\"line\"> <span class=\"comment\">// Use in development, You should remove in production</span></span><br><span class=\"line\"> sourceMaps: <span class=\"string\">'both'</span>,</span><br><span class=\"line\"> <span class=\"comment\">// Config babel plugins for async, await and other many features</span></span><br><span class=\"line\"> plugins: [</span><br><span class=\"line\"> [</span><br><span class=\"line\"> <span class=\"string\">\"@babel/plugin-transform-runtime\"</span>,</span><br><span class=\"line\"> {</span><br><span class=\"line\"> <span class=\"string\">\"absoluteRuntime\"</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\"> <span class=\"string\">\"corejs\"</span>: <span class=\"literal\">false</span>,</span><br><span class=\"line\"> <span class=\"string\">\"helpers\"</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\"> <span class=\"string\">\"regenerator\"</span>: <span class=\"literal\">true</span>,</span><br><span class=\"line\"> <span class=\"string\">\"useESModules\"</span>: <span class=\"literal\">false</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> ]</span><br><span class=\"line\"> ]</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }],</span><br><span class=\"line\"> <span class=\"comment\">// Or you can use eno-loader or omil directly</span></span><br><span class=\"line\"> <span class=\"comment\">// use: ['eno-loader']</span></span><br><span class=\"line\"> <span class=\"comment\">// use: ['omil']</span></span><br><span class=\"line\"> }]</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>"},{"_content":"# 语言块规范\n\n## 简介\n\n.omi 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Omi 组件。每个 .omi 文件包含三种类型的顶级语言块 `<template>`、`<script>` 和 `<style>`:\n\n```html\n<template name=\"my-test\">\n <div class=\"example\">\n { this.data.msg }\n </div>\n</template>\n\n<script>\nexport default class {\n install () {\n this.data = {\n msg: 'Hello world!'\n }\n }\n}\n</script>\n\n<style>\n.example {\n color: red;\n}\n</style>\n```\n\nOmil 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Omi.js 组件定义好的自定义标签对象。\n\nOmil 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。例如，你可以像下面这样使用 Sass 语法编写样式：\n\n```html\n<style lang=\"sass\">\n /* write Sass! */\n</style>\n```\n\n# 语言块\n\n## `<template>`模板\n\n每个 .omi 文件最多包含一个 `<template>` 块。\n\n内容将被提取，如果是 JSX 会编译为函数片段，如果为 html 会编译为字符串，并最终注入到从`<script>`导出的组件 render 函数中。\n\n### 属性`name = \"xxx-xxx\"`(Omi组件)\n\n定义`name=\"xxx-xxx\"`可以给组件定义一个名字，这个名字会自动调用 omi 框架的 `define('xxx-xxx', xxxXxx)` 方法来注册组件，你就可以在页面中用这个属性名`<xxx-xxx></xxx-xxx>`来使用该组件\n\n**注意：** \n- name属性值是组件名要满足 omi 框架的组件名字定义规范，首字母不能用大写字母，并且中间必须有`-`字符;\n- `<template>`模板中不能有`<script>`和`<style>`代码片段。\n\n```html\n<template name=\"my-test\">\n <div class=\"example\">\n { this.data.msg }\n </div>\n</template>\n```\n在页面容器中如此使用\n```html\n<my-test/>\n<my-test></my-test>\n```\n\n### 属性`name = \"XxxXxx\"`(React组件)\n\n定义`name=\"XxxXxx\"`可以给组件定义一个名字，这个名字会自动调用 React 框架的 `React.Component` 方法来定义类组件，你就可以在页面中用这个属性名`<XxxXxx></XxxXxx>`来使用该组件\n\n**注意：** \n- name属性值是组件名要满足 React 框架的组件名字定义规范，首字母必须大写字母;\n- `<template>`模板中不能有`<script>`和`<style>`代码片段。\n\n```html\n<template name=\"MyTest\">\n <div class=\"example\">\n { this.data.msg }\n </div>\n</template>\n```\n在页面容器中如此使用\n```html\n<MyTest/>\n<MyTest></MyTest>\n```\n\n### 属性`lang = \"html\"`(仅支持Omi)\n\n默认情况下，我们的`<template>`模板是使用 JSX 语法，如果我们增加属性`lang = \"html\"`，就可以支持编写html格式的字符串模板，你可以使用 ES6 的语法来编写 html 模板`<div>${ this.data.msg }<div>`，Omil 和 Omi-Snippets 会自动帮你引入`Omi.html()`方法帮你在客户端进行处理，会有一定的性能损耗，一般情况下不建议使用。\n\n```html\n<template name=\"my-test\" lang=\"html\">\n <div class=\"example\">\n ${ this.data.msg }\n </div>\n</template>\n```\n\n## `<script>`脚本\n\n每个 .omi 文件最多包含一个 `<script>` 块。\n\n### 类组件\n\n如果我们使用过 react 我们会了解到组件通常有两种定义方式，一种是函数组件，一种是类组件，Omil 默认是帮你创建类组件，我们在`export default class { // 你的代码 }`或者`module.exports = class { // 你的代码 }`片段中写入你的组件逻辑代码，\n\n**注意：** \n- 定义类组件必须是`export default class { // 你的代码 }`这种写法，`class MyText {} ; export default MyText`这种写法不可以，因为 Omil 和 Omil Snippets 只识别连续的`export default class`这段字符串\n\n\n|`export default class { // 你的代码 }`|可以|建议使用|\n|-|-|-|\n|`module.exports = class { // 你的代码 }`|可以|支持|\n|`class MyText { // 你的代码 }`<br/>`export default MyText`|不可以|不支持|\n|`class MyText { // 你的代码 }`<br/>`module.export = MyText`|不可以|不支持|\n\n```html\n<script>\nexport default class {\n install () {\n this.data = {\n msg: 'Hello world!'\n }\n }\n}\n</script>\n```\n\n### 高阶组件(仅支持React)\n\n有时候我们可以使用高阶组件拓展组件本身的一些功能，高阶组件跟类组件一样，只支持下面规定的写法。\n\n|`export default HOC(class { // 你的代码 })`|可以|建议使用|\n|-|-|-|\n|`module.exports = HOC(class { // 你的代码 })`|可以|支持|\n|`class MyText { // 你的代码 }`<br/>`export default HOC(MyText)`|不可以|不支持|\n|`class MyText { // 你的代码 }`<br/>`module.export = HOC(MyText)`|不可以|不支持|\n\n```html\n<script>\nexport default HOC(class {\n install () {\n this.data = {\n msg: 'Hello world!'\n }\n }\n})\n</script>\n```\n下面是一个高阶组件的详细参考例子\n```html\n<template name=\"MyTest\">\n <div><p>{this.state.title}</p></div>\n</template>\n<script>\n// 高阶函数\nconst HOC = (props) => {\n return (WraooedComponent) => {\n return class HOC extends WeElement {\n render() {\n return (<div><WraooedComponent name={{ ...this.props }} /></div>)\n }\n }\n }\n}\nexport default HOC({\n age: 18\n})(class {\n install () {\n this.data = {\n msg: 'Hello world!'\n }\n }\n})\n</script>\n<style lang=\"scss\">\np { color: #58bc58; }\n</style>\n```\n或者你可以这样写\n```html\n<template name=\"MyTest\">\n {HOC(<div><p>{this.state.title}</p></div>)}\n</template>\n<script>\n// 高阶函数\nconst HOC = (props) => {\n return (WraooedComponent) => {\n return class HOC extends WeElement {\n render() {\n return (<div><WraooedComponent name={{ ...this.props }} /></div>)\n }\n }\n }\n}\nexport default class {\n install () {\n this.data = {\n msg: 'Hello world!'\n }\n }\n}\n</script>\n<style lang=\"scss\">\np { color: #58bc58; }\n</style>\n```\n\n### 属性`type=\"text/babel\"`\n\n通常情况下，你可以在代码中使用ES6的语法，甚至一些新特性，例如：`static`，某些情况下我们需要转化为ES5做兼容，我们可以添加属性`type=\"text/babel\"`\n```html\n<script>\nexport default class {\n static name = 'Eno Yao'\n install () {\n this.data = {\n msg: 'Hello world!'\n }\n }\n}\n</script>\n```\n\n## `<style>`样式\n\n一个 .omi 文件可以包含一个`<style>`标签。\n\n`<style>`标签的样式本身具有局部样式的特性，这取决于 Omi 的设计是 Web Components，这有点类似于 Vue 的 scoped 属性。\n\n```html\n<style>\n.example {\n color: red;\n}\n</style>\n```\n\n### 属性`lang = \"scss\"`\n\n我们还可以使用`lang = \"scss\"`来书写 scss 样式，它会自动帮我们编译为 css 格式内容\n\n```html\n<style lang = \"scss\">\n$color: red;\n.example {\n color: $color;\n}\n</style>\n```\n\n# 语法高亮\n\n建议使用 VS Code 配合 Omi Snippets （该扩展支持语法高亮）扩展开发 Omi 项目，当然你可以把 .omi 文件当作 HTML 对待。\n\n# 注释\n\n在语言块中使用该语言块对应的注释语法 (HTML、CSS、JavaScript 等)。\n\n|JSX 注释语法|`{/* comment contents here */}`|\n|-|-|\n|HTML 注释语法|`<!-- comment contents here -->`|","source":"_posts/spec.md","raw":"# 语言块规范\n\n## 简介\n\n.omi 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Omi 组件。每个 .omi 文件包含三种类型的顶级语言块 `<template>`、`<script>` 和 `<style>`:\n\n```html\n<template name=\"my-test\">\n <div class=\"example\">\n { this.data.msg }\n </div>\n</template>\n\n<script>\nexport default class {\n install () {\n this.data = {\n msg: 'Hello world!'\n }\n }\n}\n</script>\n\n<style>\n.example {\n color: red;\n}\n</style>\n```\n\nOmil 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Omi.js 组件定义好的自定义标签对象。\n\nOmil 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。例如，你可以像下面这样使用 Sass 语法编写样式：\n\n```html\n<style lang=\"sass\">\n /* write Sass! */\n</style>\n```\n\n# 语言块\n\n## `<template>`模板\n\n每个 .omi 文件最多包含一个 `<template>` 块。\n\n内容将被提取，如果是 JSX 会编译为函数片段，如果为 html 会编译为字符串，并最终注入到从`<script>`导出的组件 render 函数中。\n\n### 属性`name = \"xxx-xxx\"`(Omi组件)\n\n定义`name=\"xxx-xxx\"`可以给组件定义一个名字，这个名字会自动调用 omi 框架的 `define('xxx-xxx', xxxXxx)` 方法来注册组件，你就可以在页面中用这个属性名`<xxx-xxx></xxx-xxx>`来使用该组件\n\n**注意：** \n- name属性值是组件名要满足 omi 框架的组件名字定义规范，首字母不能用大写字母，并且中间必须有`-`字符;\n- `<template>`模板中不能有`<script>`和`<style>`代码片段。\n\n```html\n<template name=\"my-test\">\n <div class=\"example\">\n { this.data.msg }\n </div>\n</template>\n```\n在页面容器中如此使用\n```html\n<my-test/>\n<my-test></my-test>\n```\n\n### 属性`name = \"XxxXxx\"`(React组件)\n\n定义`name=\"XxxXxx\"`可以给组件定义一个名字，这个名字会自动调用 React 框架的 `React.Component` 方法来定义类组件，你就可以在页面中用这个属性名`<XxxXxx></XxxXxx>`来使用该组件\n\n**注意：** \n- name属性值是组件名要满足 React 框架的组件名字定义规范，首字母必须大写字母;\n- `<template>`模板中不能有`<script>`和`<style>`代码片段。\n\n```html\n<template name=\"MyTest\">\n <div class=\"example\">\n { this.data.msg }\n </div>\n</template>\n```\n在页面容器中如此使用\n```html\n<MyTest/>\n<MyTest></MyTest>\n```\n\n### 属性`lang = \"html\"`(仅支持Omi)\n\n默认情况下，我们的`<template>`模板是使用 JSX 语法，如果我们增加属性`lang = \"html\"`，就可以支持编写html格式的字符串模板，你可以使用 ES6 的语法来编写 html 模板`<div>${ this.data.msg }<div>`，Omil 和 Omi-Snippets 会自动帮你引入`Omi.html()`方法帮你在客户端进行处理，会有一定的性能损耗，一般情况下不建议使用。\n\n```html\n<template name=\"my-test\" lang=\"html\">\n <div class=\"example\">\n ${ this.data.msg }\n </div>\n</template>\n```\n\n## `<script>`脚本\n\n每个 .omi 文件最多包含一个 `<script>` 块。\n\n### 类组件\n\n如果我们使用过 react 我们会了解到组件通常有两种定义方式，一种是函数组件，一种是类组件，Omil 默认是帮你创建类组件，我们在`export default class { // 你的代码 }`或者`module.exports = class { // 你的代码 }`片段中写入你的组件逻辑代码，\n\n**注意：** \n- 定义类组件必须是`export default class { // 你的代码 }`这种写法，`class MyText {} ; export default MyText`这种写法不可以，因为 Omil 和 Omil Snippets 只识别连续的`export default class`这段字符串\n\n\n|`export default class { // 你的代码 }`|可以|建议使用|\n|-|-|-|\n|`module.exports = class { // 你的代码 }`|可以|支持|\n|`class MyText { // 你的代码 }`<br/>`export default MyText`|不可以|不支持|\n|`class MyText { // 你的代码 }`<br/>`module.export = MyText`|不可以|不支持|\n\n```html\n<script>\nexport default class {\n install () {\n this.data = {\n msg: 'Hello world!'\n }\n }\n}\n</script>\n```\n\n### 高阶组件(仅支持React)\n\n有时候我们可以使用高阶组件拓展组件本身的一些功能，高阶组件跟类组件一样，只支持下面规定的写法。\n\n|`export default HOC(class { // 你的代码 })`|可以|建议使用|\n|-|-|-|\n|`module.exports = HOC(class { // 你的代码 })`|可以|支持|\n|`class MyText { // 你的代码 }`<br/>`export default HOC(MyText)`|不可以|不支持|\n|`class MyText { // 你的代码 }`<br/>`module.export = HOC(MyText)`|不可以|不支持|\n\n```html\n<script>\nexport default HOC(class {\n install () {\n this.data = {\n msg: 'Hello world!'\n }\n }\n})\n</script>\n```\n下面是一个高阶组件的详细参考例子\n```html\n<template name=\"MyTest\">\n <div><p>{this.state.title}</p></div>\n</template>\n<script>\n// 高阶函数\nconst HOC = (props) => {\n return (WraooedComponent) => {\n return class HOC extends WeElement {\n render() {\n return (<div><WraooedComponent name={{ ...this.props }} /></div>)\n }\n }\n }\n}\nexport default HOC({\n age: 18\n})(class {\n install () {\n this.data = {\n msg: 'Hello world!'\n }\n }\n})\n</script>\n<style lang=\"scss\">\np { color: #58bc58; }\n</style>\n```\n或者你可以这样写\n```html\n<template name=\"MyTest\">\n {HOC(<div><p>{this.state.title}</p></div>)}\n</template>\n<script>\n// 高阶函数\nconst HOC = (props) => {\n return (WraooedComponent) => {\n return class HOC extends WeElement {\n render() {\n return (<div><WraooedComponent name={{ ...this.props }} /></div>)\n }\n }\n }\n}\nexport default class {\n install () {\n this.data = {\n msg: 'Hello world!'\n }\n }\n}\n</script>\n<style lang=\"scss\">\np { color: #58bc58; }\n</style>\n```\n\n### 属性`type=\"text/babel\"`\n\n通常情况下，你可以在代码中使用ES6的语法，甚至一些新特性，例如：`static`，某些情况下我们需要转化为ES5做兼容，我们可以添加属性`type=\"text/babel\"`\n```html\n<script>\nexport default class {\n static name = 'Eno Yao'\n install () {\n this.data = {\n msg: 'Hello world!'\n }\n }\n}\n</script>\n```\n\n## `<style>`样式\n\n一个 .omi 文件可以包含一个`<style>`标签。\n\n`<style>`标签的样式本身具有局部样式的特性，这取决于 Omi 的设计是 Web Components，这有点类似于 Vue 的 scoped 属性。\n\n```html\n<style>\n.example {\n color: red;\n}\n</style>\n```\n\n### 属性`lang = \"scss\"`\n\n我们还可以使用`lang = \"scss\"`来书写 scss 样式，它会自动帮我们编译为 css 格式内容\n\n```html\n<style lang = \"scss\">\n$color: red;\n.example {\n color: $color;\n}\n</style>\n```\n\n# 语法高亮\n\n建议使用 VS Code 配合 Omi Snippets （该扩展支持语法高亮）扩展开发 Omi 项目，当然你可以把 .omi 文件当作 HTML 对待。\n\n# 注释\n\n在语言块中使用该语言块对应的注释语法 (HTML、CSS、JavaScript 等)。\n\n|JSX 注释语法|`{/* comment contents here */}`|\n|-|-|\n|HTML 注释语法|`<!-- comment contents here -->`|","slug":"spec","published":1,"date":"2019-07-09T06:25:26.043Z","updated":"2019-07-10T05:17:00.117Z","title":"","comments":1,"layout":"post","photos":[],"link":"","_id":"cjxwy8x930005sp6txa2qbtyy","content":"<h1 id=\"语言块规范\"><a href=\"#语言块规范\" class=\"headerlink\" title=\"语言块规范\"></a>语言块规范</h1><h2 id=\"简介\"><a href=\"#简介\" class=\"headerlink\" title=\"简介\"></a>简介</h2><p>.omi 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Omi 组件。每个 .omi 文件包含三种类型的顶级语言块 <code><template></code>、<code><script></code> 和 <code><style></code>:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"my-test\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">\"example\"</span>></span></span><br><span class=\"line\"> { this.data.msg }</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install () {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> msg: <span class=\"string\">'Hello world!'</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span>></span></span><br><span class=\"line\">.example {</span><br><span class=\"line\"> color: red;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>Omil 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Omi.js 组件定义好的自定义标签对象。</p>\n<p>Omil 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。例如，你可以像下面这样使用 Sass 语法编写样式：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span> <span class=\"attr\">lang</span>=<span class=\"string\">\"sass\"</span>></span></span><br><span class=\"line\"> /* write Sass! */</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<h1 id=\"语言块\"><a href=\"#语言块\" class=\"headerlink\" title=\"语言块\"></a>语言块</h1><h2 id=\"lt-template-gt-模板\"><a href=\"#lt-template-gt-模板\" class=\"headerlink\" title=\"<template>模板\"></a><code><template></code>模板</h2><p>每个 .omi 文件最多包含一个 <code><template></code> 块。</p>\n<p>内容将被提取，如果是 JSX 会编译为函数片段，如果为 html 会编译为字符串，并最终注入到从<code><script></code>导出的组件 render 函数中。</p>\n<h3 id=\"属性name-quot-xxx-xxx-quot-Omi组件\"><a href=\"#属性name-quot-xxx-xxx-quot-Omi组件\" class=\"headerlink\" title=\"属性name = "xxx-xxx"(Omi组件)\"></a>属性<code>name = "xxx-xxx"</code>(Omi组件)</h3><p>定义<code>name="xxx-xxx"</code>可以给组件定义一个名字，这个名字会自动调用 omi 框架的 <code>define('xxx-xxx', xxxXxx)</code> 方法来注册组件，你就可以在页面中用这个属性名<code><xxx-xxx></xxx-xxx></code>来使用该组件</p>\n<p><strong>注意：</strong> </p>\n<ul>\n<li>name属性值是组件名要满足 omi 框架的组件名字定义规范，首字母不能用大写字母，并且中间必须有<code>-</code>字符;</li>\n<li><code><template></code>模板中不能有<code><script></code>和<code><style></code>代码片段。</li>\n</ul>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"my-test\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">\"example\"</span>></span></span><br><span class=\"line\"> { this.data.msg }</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>在页面容器中如此使用</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">my-test</span>/></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">my-test</span>></span><span class=\"tag\"></<span class=\"name\">my-test</span>></span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"属性name-quot-XxxXxx-quot-React组件\"><a href=\"#属性name-quot-XxxXxx-quot-React组件\" class=\"headerlink\" title=\"属性name = "XxxXxx"(React组件)\"></a>属性<code>name = "XxxXxx"</code>(React组件)</h3><p>定义<code>name="XxxXxx"</code>可以给组件定义一个名字，这个名字会自动调用 React 框架的 <code>React.Component</code> 方法来定义类组件，你就可以在页面中用这个属性名<code><XxxXxx></XxxXxx></code>来使用该组件</p>\n<p><strong>注意：</strong> </p>\n<ul>\n<li>name属性值是组件名要满足 React 框架的组件名字定义规范，首字母必须大写字母;</li>\n<li><code><template></code>模板中不能有<code><script></code>和<code><style></code>代码片段。</li>\n</ul>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"MyTest\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">\"example\"</span>></span></span><br><span class=\"line\"> { this.data.msg }</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>在页面容器中如此使用</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">MyTest</span>/></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">MyTest</span>></span><span class=\"tag\"></<span class=\"name\">MyTest</span>></span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"属性lang-quot-html-quot-仅支持Omi\"><a href=\"#属性lang-quot-html-quot-仅支持Omi\" class=\"headerlink\" title=\"属性lang = "html"(仅支持Omi)\"></a>属性<code>lang = "html"</code>(仅支持Omi)</h3><p>默认情况下，我们的<code><template></code>模板是使用 JSX 语法，如果我们增加属性<code>lang = "html"</code>，就可以支持编写html格式的字符串模板，你可以使用 ES6 的语法来编写 html 模板<code><div>${ this.data.msg }<div></code>，Omil 和 Omi-Snippets 会自动帮你引入<code>Omi.html()</code>方法帮你在客户端进行处理，会有一定的性能损耗，一般情况下不建议使用。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"my-test\"</span> <span class=\"attr\">lang</span>=<span class=\"string\">\"html\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">\"example\"</span>></span></span><br><span class=\"line\"> ${ this.data.msg }</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"lt-script-gt-脚本\"><a href=\"#lt-script-gt-脚本\" class=\"headerlink\" title=\"<script>脚本\"></a><code><script></code>脚本</h2><p>每个 .omi 文件最多包含一个 <code><script></code> 块。</p>\n<h3 id=\"类组件\"><a href=\"#类组件\" class=\"headerlink\" title=\"类组件\"></a>类组件</h3><p>如果我们使用过 react 我们会了解到组件通常有两种定义方式，一种是函数组件，一种是类组件，Omil 默认是帮你创建类组件，我们在<code>export default class { // 你的代码 }</code>或者<code>module.exports = class { // 你的代码 }</code>片段中写入你的组件逻辑代码，</p>\n<p><strong>注意：</strong> </p>\n<ul>\n<li>定义类组件必须是<code>export default class { // 你的代码 }</code>这种写法，<code>class MyText {} ; export default MyText</code>这种写法不可以，因为 Omil 和 Omil Snippets 只识别连续的<code>export default class</code>这段字符串</li>\n</ul>\n<table>\n<thead>\n<tr>\n<th><code>export default class { // 你的代码 }</code></th>\n<th>可以</th>\n<th>建议使用</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>module.exports = class { // 你的代码 }</code></td>\n<td>可以</td>\n<td>支持</td>\n</tr>\n<tr>\n<td><code>class MyText { // 你的代码 }</code><br><code>export default MyText</code></td>\n<td>不可以</td>\n<td>不支持</td>\n</tr>\n<tr>\n<td><code>class MyText { // 你的代码 }</code><br><code>module.export = MyText</code></td>\n<td>不可以</td>\n<td>不支持</td>\n</tr>\n</tbody></table>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install () {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> msg: <span class=\"string\">'Hello world!'</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"高阶组件-仅支持React\"><a href=\"#高阶组件-仅支持React\" class=\"headerlink\" title=\"高阶组件(仅支持React)\"></a>高阶组件(仅支持React)</h3><p>有时候我们可以使用高阶组件拓展组件本身的一些功能，高阶组件跟类组件一样，只支持下面规定的写法。</p>\n<table>\n<thead>\n<tr>\n<th><code>export default HOC(class { // 你的代码 })</code></th>\n<th>可以</th>\n<th>建议使用</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>module.exports = HOC(class { // 你的代码 })</code></td>\n<td>可以</td>\n<td>支持</td>\n</tr>\n<tr>\n<td><code>class MyText { // 你的代码 }</code><br><code>export default HOC(MyText)</code></td>\n<td>不可以</td>\n<td>不支持</td>\n</tr>\n<tr>\n<td><code>class MyText { // 你的代码 }</code><br><code>module.export = HOC(MyText)</code></td>\n<td>不可以</td>\n<td>不支持</td>\n</tr>\n</tbody></table>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> HOC(<span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install () {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> msg: <span class=\"string\">'Hello world!'</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">})</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>下面是一个高阶组件的详细参考例子</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br><span class=\"line\">24</span><br><span class=\"line\">25</span><br><span class=\"line\">26</span><br><span class=\"line\">27</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"MyTest\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span><span class=\"tag\"><<span class=\"name\">p</span>></span>{this.state.title}<span class=\"tag\"></<span class=\"name\">p</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"comment\">// 高阶函数</span></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">const</span> HOC = <span class=\"function\">(<span class=\"params\">props</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> <span class=\"function\">(<span class=\"params\">WraooedComponent</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> <span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">HOC</span> <span class=\"keyword\">extends</span> <span class=\"title\">WeElement</span> </span>{</span></span><br><span class=\"line\"> render() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> (<span class=\"xml\"><span class=\"tag\"><<span class=\"name\">div</span>></span><span class=\"tag\"><<span class=\"name\">WraooedComponent</span> <span class=\"attr\">name</span>=<span class=\"string\">{{</span> <span class=\"attr\">...this.props</span> }} /></span><span class=\"tag\"></<span class=\"name\">div</span>></span>)</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> HOC({</span></span><br><span class=\"line\"> age: 18</span><br><span class=\"line\"><span class=\"javascript\">})(<span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install () {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> msg: <span class=\"string\">'Hello world!'</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">})</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span> <span class=\"attr\">lang</span>=<span class=\"string\">\"scss\"</span>></span></span><br><span class=\"line\">p { color: #58bc58; }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>或者你可以这样写</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br><span class=\"line\">24</span><br><span class=\"line\">25</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"MyTest\"</span>></span></span><br><span class=\"line\"> {HOC(<span class=\"tag\"><<span class=\"name\">div</span>></span><span class=\"tag\"><<span class=\"name\">p</span>></span>{this.state.title}<span class=\"tag\"></<span class=\"name\">p</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span>)}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"comment\">// 高阶函数</span></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">const</span> HOC = <span class=\"function\">(<span class=\"params\">props</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> <span class=\"function\">(<span class=\"params\">WraooedComponent</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> <span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">HOC</span> <span class=\"keyword\">extends</span> <span class=\"title\">WeElement</span> </span>{</span></span><br><span class=\"line\"> render() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> (<span class=\"xml\"><span class=\"tag\"><<span class=\"name\">div</span>></span><span class=\"tag\"><<span class=\"name\">WraooedComponent</span> <span class=\"attr\">name</span>=<span class=\"string\">{{</span> <span class=\"attr\">...this.props</span> }} /></span><span class=\"tag\"></<span class=\"name\">div</span>></span>)</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install () {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> msg: <span class=\"string\">'Hello world!'</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span> <span class=\"attr\">lang</span>=<span class=\"string\">\"scss\"</span>></span></span><br><span class=\"line\">p { color: #58bc58; }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"属性type-quot-text-babel-quot\"><a href=\"#属性type-quot-text-babel-quot\" class=\"headerlink\" title=\"属性type="text/babel"\"></a>属性<code>type="text/babel"</code></h3><p>通常情况下，你可以在代码中使用ES6的语法，甚至一些新特性，例如：<code>static</code>，某些情况下我们需要转化为ES5做兼容，我们可以添加属性<code>type="text/babel"</code></p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">static</span> name = <span class=\"string\">'Eno Yao'</span></span></span><br><span class=\"line\"> install () {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> msg: <span class=\"string\">'Hello world!'</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"lt-style-gt-样式\"><a href=\"#lt-style-gt-样式\" class=\"headerlink\" title=\"<style>样式\"></a><code><style></code>样式</h2><p>一个 .omi 文件可以包含一个<code><style></code>标签。</p>\n<p><code><style></code>标签的样式本身具有局部样式的特性，这取决于 Omi 的设计是 Web Components，这有点类似于 Vue 的 scoped 属性。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span>></span></span><br><span class=\"line\">.example {</span><br><span class=\"line\"> color: red;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"属性lang-quot-scss-quot\"><a href=\"#属性lang-quot-scss-quot\" class=\"headerlink\" title=\"属性lang = "scss"\"></a>属性<code>lang = "scss"</code></h3><p>我们还可以使用<code>lang = "scss"</code>来书写 scss 样式，它会自动帮我们编译为 css 格式内容</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span> <span class=\"attr\">lang</span> = <span class=\"string\">\"scss\"</span>></span></span><br><span class=\"line\">$color: red;</span><br><span class=\"line\">.example {</span><br><span class=\"line\"> color: $color;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<h1 id=\"语法高亮\"><a href=\"#语法高亮\" class=\"headerlink\" title=\"语法高亮\"></a>语法高亮</h1><p>建议使用 VS Code 配合 Omi Snippets （该扩展支持语法高亮）扩展开发 Omi 项目，当然你可以把 .omi 文件当作 HTML 对待。</p>\n<h1 id=\"注释\"><a href=\"#注释\" class=\"headerlink\" title=\"注释\"></a>注释</h1><p>在语言块中使用该语言块对应的注释语法 (HTML、CSS、JavaScript 等)。</p>\n<table>\n<thead>\n<tr>\n<th>JSX 注释语法</th>\n<th><code>{/* comment contents here */}</code></th>\n</tr>\n</thead>\n<tbody><tr>\n<td>HTML 注释语法</td>\n<td><code><!-- comment contents here --></code></td>\n</tr>\n</tbody></table>\n","site":{"data":{}},"excerpt":"","more":"<h1 id=\"语言块规范\"><a href=\"#语言块规范\" class=\"headerlink\" title=\"语言块规范\"></a>语言块规范</h1><h2 id=\"简介\"><a href=\"#简介\" class=\"headerlink\" title=\"简介\"></a>简介</h2><p>.omi 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Omi 组件。每个 .omi 文件包含三种类型的顶级语言块 <code><template></code>、<code><script></code> 和 <code><style></code>:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"my-test\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">\"example\"</span>></span></span><br><span class=\"line\"> { this.data.msg }</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install () {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> msg: <span class=\"string\">'Hello world!'</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span>></span></span><br><span class=\"line\">.example {</span><br><span class=\"line\"> color: red;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>Omil 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Omi.js 组件定义好的自定义标签对象。</p>\n<p>Omil 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 lang 属性。例如，你可以像下面这样使用 Sass 语法编写样式：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span> <span class=\"attr\">lang</span>=<span class=\"string\">\"sass\"</span>></span></span><br><span class=\"line\"> /* write Sass! */</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<h1 id=\"语言块\"><a href=\"#语言块\" class=\"headerlink\" title=\"语言块\"></a>语言块</h1><h2 id=\"lt-template-gt-模板\"><a href=\"#lt-template-gt-模板\" class=\"headerlink\" title=\"<template>模板\"></a><code><template></code>模板</h2><p>每个 .omi 文件最多包含一个 <code><template></code> 块。</p>\n<p>内容将被提取，如果是 JSX 会编译为函数片段，如果为 html 会编译为字符串，并最终注入到从<code><script></code>导出的组件 render 函数中。</p>\n<h3 id=\"属性name-quot-xxx-xxx-quot-Omi组件\"><a href=\"#属性name-quot-xxx-xxx-quot-Omi组件\" class=\"headerlink\" title=\"属性name = "xxx-xxx"(Omi组件)\"></a>属性<code>name = "xxx-xxx"</code>(Omi组件)</h3><p>定义<code>name="xxx-xxx"</code>可以给组件定义一个名字，这个名字会自动调用 omi 框架的 <code>define('xxx-xxx', xxxXxx)</code> 方法来注册组件，你就可以在页面中用这个属性名<code><xxx-xxx></xxx-xxx></code>来使用该组件</p>\n<p><strong>注意：</strong> </p>\n<ul>\n<li>name属性值是组件名要满足 omi 框架的组件名字定义规范，首字母不能用大写字母，并且中间必须有<code>-</code>字符;</li>\n<li><code><template></code>模板中不能有<code><script></code>和<code><style></code>代码片段。</li>\n</ul>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"my-test\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">\"example\"</span>></span></span><br><span class=\"line\"> { this.data.msg }</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>在页面容器中如此使用</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">my-test</span>/></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">my-test</span>></span><span class=\"tag\"></<span class=\"name\">my-test</span>></span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"属性name-quot-XxxXxx-quot-React组件\"><a href=\"#属性name-quot-XxxXxx-quot-React组件\" class=\"headerlink\" title=\"属性name = "XxxXxx"(React组件)\"></a>属性<code>name = "XxxXxx"</code>(React组件)</h3><p>定义<code>name="XxxXxx"</code>可以给组件定义一个名字，这个名字会自动调用 React 框架的 <code>React.Component</code> 方法来定义类组件，你就可以在页面中用这个属性名<code><XxxXxx></XxxXxx></code>来使用该组件</p>\n<p><strong>注意：</strong> </p>\n<ul>\n<li>name属性值是组件名要满足 React 框架的组件名字定义规范，首字母必须大写字母;</li>\n<li><code><template></code>模板中不能有<code><script></code>和<code><style></code>代码片段。</li>\n</ul>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"MyTest\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">\"example\"</span>></span></span><br><span class=\"line\"> { this.data.msg }</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>在页面容器中如此使用</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">MyTest</span>/></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">MyTest</span>></span><span class=\"tag\"></<span class=\"name\">MyTest</span>></span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"属性lang-quot-html-quot-仅支持Omi\"><a href=\"#属性lang-quot-html-quot-仅支持Omi\" class=\"headerlink\" title=\"属性lang = "html"(仅支持Omi)\"></a>属性<code>lang = "html"</code>(仅支持Omi)</h3><p>默认情况下，我们的<code><template></code>模板是使用 JSX 语法，如果我们增加属性<code>lang = "html"</code>，就可以支持编写html格式的字符串模板，你可以使用 ES6 的语法来编写 html 模板<code><div>${ this.data.msg }<div></code>，Omil 和 Omi-Snippets 会自动帮你引入<code>Omi.html()</code>方法帮你在客户端进行处理，会有一定的性能损耗，一般情况下不建议使用。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"my-test\"</span> <span class=\"attr\">lang</span>=<span class=\"string\">\"html\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">\"example\"</span>></span></span><br><span class=\"line\"> ${ this.data.msg }</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"lt-script-gt-脚本\"><a href=\"#lt-script-gt-脚本\" class=\"headerlink\" title=\"<script>脚本\"></a><code><script></code>脚本</h2><p>每个 .omi 文件最多包含一个 <code><script></code> 块。</p>\n<h3 id=\"类组件\"><a href=\"#类组件\" class=\"headerlink\" title=\"类组件\"></a>类组件</h3><p>如果我们使用过 react 我们会了解到组件通常有两种定义方式，一种是函数组件，一种是类组件，Omil 默认是帮你创建类组件，我们在<code>export default class { // 你的代码 }</code>或者<code>module.exports = class { // 你的代码 }</code>片段中写入你的组件逻辑代码，</p>\n<p><strong>注意：</strong> </p>\n<ul>\n<li>定义类组件必须是<code>export default class { // 你的代码 }</code>这种写法，<code>class MyText {} ; export default MyText</code>这种写法不可以，因为 Omil 和 Omil Snippets 只识别连续的<code>export default class</code>这段字符串</li>\n</ul>\n<table>\n<thead>\n<tr>\n<th><code>export default class { // 你的代码 }</code></th>\n<th>可以</th>\n<th>建议使用</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>module.exports = class { // 你的代码 }</code></td>\n<td>可以</td>\n<td>支持</td>\n</tr>\n<tr>\n<td><code>class MyText { // 你的代码 }</code><br><code>export default MyText</code></td>\n<td>不可以</td>\n<td>不支持</td>\n</tr>\n<tr>\n<td><code>class MyText { // 你的代码 }</code><br><code>module.export = MyText</code></td>\n<td>不可以</td>\n<td>不支持</td>\n</tr>\n</tbody></table>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install () {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> msg: <span class=\"string\">'Hello world!'</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"高阶组件-仅支持React\"><a href=\"#高阶组件-仅支持React\" class=\"headerlink\" title=\"高阶组件(仅支持React)\"></a>高阶组件(仅支持React)</h3><p>有时候我们可以使用高阶组件拓展组件本身的一些功能，高阶组件跟类组件一样，只支持下面规定的写法。</p>\n<table>\n<thead>\n<tr>\n<th><code>export default HOC(class { // 你的代码 })</code></th>\n<th>可以</th>\n<th>建议使用</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><code>module.exports = HOC(class { // 你的代码 })</code></td>\n<td>可以</td>\n<td>支持</td>\n</tr>\n<tr>\n<td><code>class MyText { // 你的代码 }</code><br><code>export default HOC(MyText)</code></td>\n<td>不可以</td>\n<td>不支持</td>\n</tr>\n<tr>\n<td><code>class MyText { // 你的代码 }</code><br><code>module.export = HOC(MyText)</code></td>\n<td>不可以</td>\n<td>不支持</td>\n</tr>\n</tbody></table>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> HOC(<span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install () {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> msg: <span class=\"string\">'Hello world!'</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">})</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>下面是一个高阶组件的详细参考例子</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br><span class=\"line\">24</span><br><span class=\"line\">25</span><br><span class=\"line\">26</span><br><span class=\"line\">27</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"MyTest\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span><span class=\"tag\"><<span class=\"name\">p</span>></span>{this.state.title}<span class=\"tag\"></<span class=\"name\">p</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"comment\">// 高阶函数</span></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">const</span> HOC = <span class=\"function\">(<span class=\"params\">props</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> <span class=\"function\">(<span class=\"params\">WraooedComponent</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> <span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">HOC</span> <span class=\"keyword\">extends</span> <span class=\"title\">WeElement</span> </span>{</span></span><br><span class=\"line\"> render() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> (<span class=\"xml\"><span class=\"tag\"><<span class=\"name\">div</span>></span><span class=\"tag\"><<span class=\"name\">WraooedComponent</span> <span class=\"attr\">name</span>=<span class=\"string\">{{</span> <span class=\"attr\">...this.props</span> }} /></span><span class=\"tag\"></<span class=\"name\">div</span>></span>)</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> HOC({</span></span><br><span class=\"line\"> age: 18</span><br><span class=\"line\"><span class=\"javascript\">})(<span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install () {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> msg: <span class=\"string\">'Hello world!'</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">})</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span> <span class=\"attr\">lang</span>=<span class=\"string\">\"scss\"</span>></span></span><br><span class=\"line\">p { color: #58bc58; }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>或者你可以这样写</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br><span class=\"line\">24</span><br><span class=\"line\">25</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"MyTest\"</span>></span></span><br><span class=\"line\"> {HOC(<span class=\"tag\"><<span class=\"name\">div</span>></span><span class=\"tag\"><<span class=\"name\">p</span>></span>{this.state.title}<span class=\"tag\"></<span class=\"name\">p</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span>)}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"comment\">// 高阶函数</span></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">const</span> HOC = <span class=\"function\">(<span class=\"params\">props</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> <span class=\"function\">(<span class=\"params\">WraooedComponent</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> <span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">HOC</span> <span class=\"keyword\">extends</span> <span class=\"title\">WeElement</span> </span>{</span></span><br><span class=\"line\"> render() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> (<span class=\"xml\"><span class=\"tag\"><<span class=\"name\">div</span>></span><span class=\"tag\"><<span class=\"name\">WraooedComponent</span> <span class=\"attr\">name</span>=<span class=\"string\">{{</span> <span class=\"attr\">...this.props</span> }} /></span><span class=\"tag\"></<span class=\"name\">div</span>></span>)</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install () {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> msg: <span class=\"string\">'Hello world!'</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span> <span class=\"attr\">lang</span>=<span class=\"string\">\"scss\"</span>></span></span><br><span class=\"line\">p { color: #58bc58; }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"属性type-quot-text-babel-quot\"><a href=\"#属性type-quot-text-babel-quot\" class=\"headerlink\" title=\"属性type="text/babel"\"></a>属性<code>type="text/babel"</code></h3><p>通常情况下，你可以在代码中使用ES6的语法，甚至一些新特性，例如：<code>static</code>，某些情况下我们需要转化为ES5做兼容，我们可以添加属性<code>type="text/babel"</code></p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">static</span> name = <span class=\"string\">'Eno Yao'</span></span></span><br><span class=\"line\"> install () {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = {</span></span><br><span class=\"line\"><span class=\"javascript\"> msg: <span class=\"string\">'Hello world!'</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"lt-style-gt-样式\"><a href=\"#lt-style-gt-样式\" class=\"headerlink\" title=\"<style>样式\"></a><code><style></code>样式</h2><p>一个 .omi 文件可以包含一个<code><style></code>标签。</p>\n<p><code><style></code>标签的样式本身具有局部样式的特性，这取决于 Omi 的设计是 Web Components，这有点类似于 Vue 的 scoped 属性。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span>></span></span><br><span class=\"line\">.example {</span><br><span class=\"line\"> color: red;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<h3 id=\"属性lang-quot-scss-quot\"><a href=\"#属性lang-quot-scss-quot\" class=\"headerlink\" title=\"属性lang = "scss"\"></a>属性<code>lang = "scss"</code></h3><p>我们还可以使用<code>lang = "scss"</code>来书写 scss 样式，它会自动帮我们编译为 css 格式内容</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span> <span class=\"attr\">lang</span> = <span class=\"string\">\"scss\"</span>></span></span><br><span class=\"line\">$color: red;</span><br><span class=\"line\">.example {</span><br><span class=\"line\"> color: $color;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<h1 id=\"语法高亮\"><a href=\"#语法高亮\" class=\"headerlink\" title=\"语法高亮\"></a>语法高亮</h1><p>建议使用 VS Code 配合 Omi Snippets （该扩展支持语法高亮）扩展开发 Omi 项目，当然你可以把 .omi 文件当作 HTML 对待。</p>\n<h1 id=\"注释\"><a href=\"#注释\" class=\"headerlink\" title=\"注释\"></a>注释</h1><p>在语言块中使用该语言块对应的注释语法 (HTML、CSS、JavaScript 等)。</p>\n<table>\n<thead>\n<tr>\n<th>JSX 注释语法</th>\n<th><code>{/* comment contents here */}</code></th>\n</tr>\n</thead>\n<tbody><tr>\n<td>HTML 注释语法</td>\n<td><code><!-- comment contents here --></code></td>\n</tr>\n</tbody></table>\n"},{"_content":"# Props\n\n我们可以在组件的属性上传入属性值，通过传入属性值让组件接受外部的数据而更改自身的状态。\n\n```html\n<component-name myObj={{ name: 'Eno Yao' }} />\n```\n\n组件内部通过props接受即可：\n\n```html\n<template name=\"component-name\">\n <p>{props.myObj.name}</p>\n</template>\n```\n\n我们还可以通过`static defaultProps`设置默认的props值和通过`static propTypes`设置默认的props类型。\n\n```html\n<template name=\"component-name\">\n <div>\n <p>{props.name}</p>\n <p>{props.age}</p>\n </div>\n</template>\n<script>\n export default class {\n static defaultProps = {\n name: 'Omi',\n age: 18\n }\n\n static propTypes = {\n name: String,\n age: Number\n }\n }\n</script>\n```","source":"_posts/props.md","raw":"# Props\n\n我们可以在组件的属性上传入属性值，通过传入属性值让组件接受外部的数据而更改自身的状态。\n\n```html\n<component-name myObj={{ name: 'Eno Yao' }} />\n```\n\n组件内部通过props接受即可：\n\n```html\n<template name=\"component-name\">\n <p>{props.myObj.name}</p>\n</template>\n```\n\n我们还可以通过`static defaultProps`设置默认的props值和通过`static propTypes`设置默认的props类型。\n\n```html\n<template name=\"component-name\">\n <div>\n <p>{props.name}</p>\n <p>{props.age}</p>\n </div>\n</template>\n<script>\n export default class {\n static defaultProps = {\n name: 'Omi',\n age: 18\n }\n\n static propTypes = {\n name: String,\n age: Number\n }\n }\n</script>\n```","slug":"props","published":1,"date":"2019-07-10T10:58:14.819Z","updated":"2019-07-10T14:04:58.871Z","_id":"cjxxbe2bm00000z6tljdskqoy","title":"","comments":1,"layout":"post","photos":[],"link":"","content":"<h1 id=\"Props\"><a href=\"#Props\" class=\"headerlink\" title=\"Props\"></a>Props</h1><p>我们可以在组件的属性上传入属性值，通过传入属性值让组件接受外部的数据而更改自身的状态。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">component-name</span> <span class=\"attr\">myObj</span>=<span class=\"string\">{{</span> <span class=\"attr\">name:</span> '<span class=\"attr\">Eno</span> <span class=\"attr\">Yao</span>' }} /></span></span><br></pre></td></tr></table></figure>\n\n<p>组件内部通过props接受即可：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>{props.myObj.name}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>我们还可以通过<code>static defaultProps</code>设置默认的props值和通过<code>static propTypes</code>设置默认的props类型。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>{props.name}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>{props.age}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"> export default class {</span><br><span class=\"line\"> static defaultProps = {</span><br><span class=\"line\"> name: 'Omi',</span><br><span class=\"line\"> age: 18</span><br><span class=\"line\"> }</span><br><span class=\"line\"></span><br><span class=\"line\"> static propTypes = {</span><br><span class=\"line\"> name: String,</span><br><span class=\"line\"> age: Number</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>","site":{"data":{}},"excerpt":"","more":"<h1 id=\"Props\"><a href=\"#Props\" class=\"headerlink\" title=\"Props\"></a>Props</h1><p>我们可以在组件的属性上传入属性值，通过传入属性值让组件接受外部的数据而更改自身的状态。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">component-name</span> <span class=\"attr\">myObj</span>=<span class=\"string\">{{</span> <span class=\"attr\">name:</span> '<span class=\"attr\">Eno</span> <span class=\"attr\">Yao</span>' }} /></span></span><br></pre></td></tr></table></figure>\n\n<p>组件内部通过props接受即可：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>{props.myObj.name}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>我们还可以通过<code>static defaultProps</code>设置默认的props值和通过<code>static propTypes</code>设置默认的props类型。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>{props.name}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>{props.age}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"> export default class {</span><br><span class=\"line\"> static defaultProps = {</span><br><span class=\"line\"> name: 'Omi',</span><br><span class=\"line\"> age: 18</span><br><span class=\"line\"> }</span><br><span class=\"line\"></span><br><span class=\"line\"> static propTypes = {</span><br><span class=\"line\"> name: String,</span><br><span class=\"line\"> age: Number</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>"},{"_content":"# 事件处理\n\nOmi 元素的事件处理和 React 一样和 DOM 元素的很相似，但是有一点语法上的不同:\n\n- Omi 事件的命名采用小驼峰式（camelCase），而不是纯小写。\n- 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。\n\n```html\n<template name=\"component-name\">\n <div>\n <button onClick={this.onClick}>Hello Omi!</button>\n <button onClick={(evt)=> {alert('Hello Omi!')}}>Hello Omi!</button>\n <button onClick={onClick}>Hello Omi!</button>\n </div>\n</template>\n<script>\n const onClick = (evt) => {\n alert('Hello Omi!')\n }\n export default class {\n onClick(evt) {\n alert('Hello Omi!')\n }\n }\n</script>\n```\n\n## 事件中的this\n\n你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。\n\n这并不是 React 特有的行为；这其实与 JavaScript 函数工作原理有关。通常情况下，如果你没有在方法后面添加 ()，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。\n\n```html\n<template name=\"component-name\">\n <div>\n <button onClick={this.onClick.bind(this)}>{this.data.title}</button>\n </div>\n</template>\n<script>\n export default class {\n install() {\n this.data = { title: 'Hello Omi!' }\n }\n onClick() {\n this.data.title = 'Hi Eno!'\n this.update()\n }\n }\n</script>\n```\n\n## 向事件处理程序传递参数\n\n在循环中，通常我们会为事件处理函数传递额外的参数。例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数：\n\n```html\n<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>\n<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>\n```\n\n上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。\n\n在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。","source":"_posts/event.md","raw":"# 事件处理\n\nOmi 元素的事件处理和 React 一样和 DOM 元素的很相似，但是有一点语法上的不同:\n\n- Omi 事件的命名采用小驼峰式（camelCase），而不是纯小写。\n- 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。\n\n```html\n<template name=\"component-name\">\n <div>\n <button onClick={this.onClick}>Hello Omi!</button>\n <button onClick={(evt)=> {alert('Hello Omi!')}}>Hello Omi!</button>\n <button onClick={onClick}>Hello Omi!</button>\n </div>\n</template>\n<script>\n const onClick = (evt) => {\n alert('Hello Omi!')\n }\n export default class {\n onClick(evt) {\n alert('Hello Omi!')\n }\n }\n</script>\n```\n\n## 事件中的this\n\n你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。\n\n这并不是 React 特有的行为；这其实与 JavaScript 函数工作原理有关。通常情况下，如果你没有在方法后面添加 ()，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。\n\n```html\n<template name=\"component-name\">\n <div>\n <button onClick={this.onClick.bind(this)}>{this.data.title}</button>\n </div>\n</template>\n<script>\n export default class {\n install() {\n this.data = { title: 'Hello Omi!' }\n }\n onClick() {\n this.data.title = 'Hi Eno!'\n this.update()\n }\n }\n</script>\n```\n\n## 向事件处理程序传递参数\n\n在循环中，通常我们会为事件处理函数传递额外的参数。例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数：\n\n```html\n<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>\n<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>\n```\n\n上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。\n\n在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。","slug":"event","published":1,"date":"2019-07-10T14:06:33.579Z","updated":"2019-07-10T14:58:00.833Z","_id":"cjxxbh4nu00010z6t9xpyzv47","title":"","comments":1,"layout":"post","photos":[],"link":"","content":"<h1 id=\"事件处理\"><a href=\"#事件处理\" class=\"headerlink\" title=\"事件处理\"></a>事件处理</h1><p>Omi 元素的事件处理和 React 一样和 DOM 元素的很相似，但是有一点语法上的不同:</p>\n<ul>\n<li>Omi 事件的命名采用小驼峰式（camelCase），而不是纯小写。</li>\n<li>使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。</li>\n</ul>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.onClick}</span>></span>Hello Omi!<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{(evt)</span>=></span> {alert('Hello Omi!')}}>Hello Omi!<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{onClick}</span>></span>Hello Omi!<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">const</span> onClick = <span class=\"function\">(<span class=\"params\">evt</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> alert(<span class=\"string\">'Hello Omi!'</span>)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> onClick(evt) {</span><br><span class=\"line\"><span class=\"javascript\"> alert(<span class=\"string\">'Hello Omi!'</span>)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"事件中的this\"><a href=\"#事件中的this\" class=\"headerlink\" title=\"事件中的this\"></a>事件中的this</h2><p>你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。</p>\n<p>这并不是 React 特有的行为；这其实与 JavaScript 函数工作原理有关。通常情况下，如果你没有在方法后面添加 ()，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.onClick.bind(this)}</span>></span>{this.data.title}<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = { <span class=\"attr\">title</span>: <span class=\"string\">'Hello Omi!'</span> }</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> onClick() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data.title = <span class=\"string\">'Hi Eno!'</span></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.update()</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"向事件处理程序传递参数\"><a href=\"#向事件处理程序传递参数\" class=\"headerlink\" title=\"向事件处理程序传递参数\"></a>向事件处理程序传递参数</h2><p>在循环中，通常我们会为事件处理函数传递额外的参数。例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{(e)</span> =></span> this.deleteRow(id, e)}>Delete Row<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.deleteRow.bind(this,</span> <span class=\"attr\">id</span>)}></span>Delete Row<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。</p>\n<p>在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。</p>\n","site":{"data":{}},"excerpt":"","more":"<h1 id=\"事件处理\"><a href=\"#事件处理\" class=\"headerlink\" title=\"事件处理\"></a>事件处理</h1><p>Omi 元素的事件处理和 React 一样和 DOM 元素的很相似，但是有一点语法上的不同:</p>\n<ul>\n<li>Omi 事件的命名采用小驼峰式（camelCase），而不是纯小写。</li>\n<li>使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。</li>\n</ul>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.onClick}</span>></span>Hello Omi!<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{(evt)</span>=></span> {alert('Hello Omi!')}}>Hello Omi!<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{onClick}</span>></span>Hello Omi!<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">const</span> onClick = <span class=\"function\">(<span class=\"params\">evt</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> alert(<span class=\"string\">'Hello Omi!'</span>)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> onClick(evt) {</span><br><span class=\"line\"><span class=\"javascript\"> alert(<span class=\"string\">'Hello Omi!'</span>)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"事件中的this\"><a href=\"#事件中的this\" class=\"headerlink\" title=\"事件中的this\"></a>事件中的this</h2><p>你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。</p>\n<p>这并不是 React 特有的行为；这其实与 JavaScript 函数工作原理有关。通常情况下，如果你没有在方法后面添加 ()，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.onClick.bind(this)}</span>></span>{this.data.title}<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> install() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data = { <span class=\"attr\">title</span>: <span class=\"string\">'Hello Omi!'</span> }</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> onClick() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data.title = <span class=\"string\">'Hi Eno!'</span></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.update()</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"向事件处理程序传递参数\"><a href=\"#向事件处理程序传递参数\" class=\"headerlink\" title=\"向事件处理程序传递参数\"></a>向事件处理程序传递参数</h2><p>在循环中，通常我们会为事件处理函数传递额外的参数。例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{(e)</span> =></span> this.deleteRow(id, e)}>Delete Row<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.deleteRow.bind(this,</span> <span class=\"attr\">id</span>)}></span>Delete Row<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。</p>\n<p>在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。</p>\n"},{"_content":"# 高阶组件\n\n如果您用过 React，相信对高阶组件肯定不陌生，高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。\n\n具体而言，高阶组件是参数为组件，返回值为新组件的函数。\n```js\nconst EnhancedComponent = higherOrderComponent(WrappedComponent);\n```\n组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。\n\nHOC 在 React 的第三方库中很常见，例如 Redux 的 connect。\n\n下面这个例子是是在组件中使用 Redux 高阶组件\n```html\n<template name=\"Component-name\">\n <div><p>{this.state.title}</p></div>\n</template>\n<script>\n import { connect } from 'react-redux';\n export default connect((state) => {\n return state\n })(class {\n constructor(props) {\n super(props)\n this.state = {\n title: \"react\"\n }\n }\n })\n</script>\n<style>\n p {color: #58bc58;}\n</style>\n```","source":"_posts/hoc.md","raw":"# 高阶组件\n\n如果您用过 React，相信对高阶组件肯定不陌生，高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。\n\n具体而言，高阶组件是参数为组件，返回值为新组件的函数。\n```js\nconst EnhancedComponent = higherOrderComponent(WrappedComponent);\n```\n组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。\n\nHOC 在 React 的第三方库中很常见，例如 Redux 的 connect。\n\n下面这个例子是是在组件中使用 Redux 高阶组件\n```html\n<template name=\"Component-name\">\n <div><p>{this.state.title}</p></div>\n</template>\n<script>\n import { connect } from 'react-redux';\n export default connect((state) => {\n return state\n })(class {\n constructor(props) {\n super(props)\n this.state = {\n title: \"react\"\n }\n }\n })\n</script>\n<style>\n p {color: #58bc58;}\n</style>\n```","slug":"hoc","published":1,"date":"2019-07-13T12:41:35.608Z","updated":"2019-07-13T15:15:09.649Z","title":"","comments":1,"layout":"post","photos":[],"link":"","_id":"cjy1oeggg0000eq0zccmcix76","content":"<h1 id=\"高阶组件\"><a href=\"#高阶组件\" class=\"headerlink\" title=\"高阶组件\"></a>高阶组件</h1><p>如果您用过 React，相信对高阶组件肯定不陌生，高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。</p>\n<p>具体而言，高阶组件是参数为组件，返回值为新组件的函数。</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> EnhancedComponent = higherOrderComponent(WrappedComponent);</span><br></pre></td></tr></table></figure>\n\n<p>组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。</p>\n<p>HOC 在 React 的第三方库中很常见，例如 Redux 的 connect。</p>\n<p>下面这个例子是是在组件中使用 Redux 高阶组件</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"Component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span><span class=\"tag\"><<span class=\"name\">p</span>></span>{this.state.title}<span class=\"tag\"></<span class=\"name\">p</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">import</span> { connect } <span class=\"keyword\">from</span> <span class=\"string\">'react-redux'</span>;</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> connect(<span class=\"function\">(<span class=\"params\">state</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> state</span></span><br><span class=\"line\"><span class=\"javascript\"> })(<span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">constructor</span>(props) {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">super</span>(props)</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.state = {</span></span><br><span class=\"line\"><span class=\"javascript\"> title: <span class=\"string\">\"react\"</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> })</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span>></span></span><br><span class=\"line\"> p {color: #58bc58;}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>","site":{"data":{}},"excerpt":"","more":"<h1 id=\"高阶组件\"><a href=\"#高阶组件\" class=\"headerlink\" title=\"高阶组件\"></a>高阶组件</h1><p>如果您用过 React，相信对高阶组件肯定不陌生，高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。</p>\n<p>具体而言，高阶组件是参数为组件，返回值为新组件的函数。</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">const</span> EnhancedComponent = higherOrderComponent(WrappedComponent);</span><br></pre></td></tr></table></figure>\n\n<p>组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。</p>\n<p>HOC 在 React 的第三方库中很常见，例如 Redux 的 connect。</p>\n<p>下面这个例子是是在组件中使用 Redux 高阶组件</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"Component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span><span class=\"tag\"><<span class=\"name\">p</span>></span>{this.state.title}<span class=\"tag\"></<span class=\"name\">p</span>></span><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">import</span> { connect } <span class=\"keyword\">from</span> <span class=\"string\">'react-redux'</span>;</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> connect(<span class=\"function\">(<span class=\"params\">state</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">return</span> state</span></span><br><span class=\"line\"><span class=\"javascript\"> })(<span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">constructor</span>(props) {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">super</span>(props)</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.state = {</span></span><br><span class=\"line\"><span class=\"javascript\"> title: <span class=\"string\">\"react\"</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> })</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span>></span></span><br><span class=\"line\"> p {color: #58bc58;}</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>"},{"_content":"# CSS\n\n这里说的是 props 的 css，而不是 static css，它提供了修改 shadow dom 内部 scoped style 的能力。\n\n```html\n<template name=\"component-name\">\n <div>\n <h1>Look at my color!</h1>\n </div>\n</template>\n<script>\n export default class {\n static css = `h1{\n color: red;\n }`\n }\n</script>\n```\n\n上面的 `my-element` 的 h1 标签颜色是红色。有什么办法修改吗？\n\n```html\n<template name=\"component-name\">\n <div onClick={this.onClick}>\n <my-element css={this.myCSS} />\n </div>\n</template>\n<script>\n export default class {\n myCSS = `\n h1{\n color: green;\n }\n `\n onClick = () => {\n //动态修改\n this.myCSS = `\n h1{\n color: blue;\n }\n `\n this.update()\n }\n }\n</script>\n```\n\n而且还可以通过下面的方式保证一定能够修改：\n\n```css\ncolor: blue!important;\n```","source":"_posts/css.md","raw":"# CSS\n\n这里说的是 props 的 css，而不是 static css，它提供了修改 shadow dom 内部 scoped style 的能力。\n\n```html\n<template name=\"component-name\">\n <div>\n <h1>Look at my color!</h1>\n </div>\n</template>\n<script>\n export default class {\n static css = `h1{\n color: red;\n }`\n }\n</script>\n```\n\n上面的 `my-element` 的 h1 标签颜色是红色。有什么办法修改吗？\n\n```html\n<template name=\"component-name\">\n <div onClick={this.onClick}>\n <my-element css={this.myCSS} />\n </div>\n</template>\n<script>\n export default class {\n myCSS = `\n h1{\n color: green;\n }\n `\n onClick = () => {\n //动态修改\n this.myCSS = `\n h1{\n color: blue;\n }\n `\n this.update()\n }\n }\n</script>\n```\n\n而且还可以通过下面的方式保证一定能够修改：\n\n```css\ncolor: blue!important;\n```","slug":"css","published":1,"date":"2019-07-11T01:18:26.036Z","updated":"2019-07-11T01:27:17.763Z","title":"","comments":1,"layout":"post","photos":[],"link":"","_id":"cjy1oeggj0001eq0zdbhlo7iw","content":"<h1 id=\"CSS\"><a href=\"#CSS\" class=\"headerlink\" title=\"CSS\"></a>CSS</h1><p>这里说的是 props 的 css，而不是 static css，它提供了修改 shadow dom 内部 scoped style 的能力。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">h1</span>></span>Look at my color!<span class=\"tag\"></<span class=\"name\">h1</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">static</span> css = <span class=\"string\">`h1{</span></span></span><br><span class=\"line\"> color: red;</span><br><span class=\"line\"> }`</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>上面的 <code>my-element</code> 的 h1 标签颜色是红色。有什么办法修改吗？</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.onClick}</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">my-element</span> <span class=\"attr\">css</span>=<span class=\"string\">{this.myCSS}</span> /></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> myCSS = `</span><br><span class=\"line\"> h1{</span><br><span class=\"line\"> color: green;</span><br><span class=\"line\"> }</span><br><span class=\"line\"> `</span><br><span class=\"line\"><span class=\"javascript\"> onClick = <span class=\"function\"><span class=\"params\">()</span> =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"comment\">//动态修改</span></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.myCSS = <span class=\"string\">`</span></span></span><br><span class=\"line\"> h1{</span><br><span class=\"line\"> color: blue;</span><br><span class=\"line\"> }</span><br><span class=\"line\"> `</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.update()</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>而且还可以通过下面的方式保证一定能够修改：</p>\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">color</span>: <span class=\"selector-tag\">blue</span>!<span class=\"selector-tag\">important</span>;</span><br></pre></td></tr></table></figure>","site":{"data":{}},"excerpt":"","more":"<h1 id=\"CSS\"><a href=\"#CSS\" class=\"headerlink\" title=\"CSS\"></a>CSS</h1><p>这里说的是 props 的 css，而不是 static css，它提供了修改 shadow dom 内部 scoped style 的能力。</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">h1</span>></span>Look at my color!<span class=\"tag\"></<span class=\"name\">h1</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">static</span> css = <span class=\"string\">`h1{</span></span></span><br><span class=\"line\"> color: red;</span><br><span class=\"line\"> }`</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>上面的 <code>my-element</code> 的 h1 标签颜色是红色。有什么办法修改吗？</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.onClick}</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">my-element</span> <span class=\"attr\">css</span>=<span class=\"string\">{this.myCSS}</span> /></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> myCSS = `</span><br><span class=\"line\"> h1{</span><br><span class=\"line\"> color: green;</span><br><span class=\"line\"> }</span><br><span class=\"line\"> `</span><br><span class=\"line\"><span class=\"javascript\"> onClick = <span class=\"function\"><span class=\"params\">()</span> =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"comment\">//动态修改</span></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.myCSS = <span class=\"string\">`</span></span></span><br><span class=\"line\"> h1{</span><br><span class=\"line\"> color: blue;</span><br><span class=\"line\"> }</span><br><span class=\"line\"> `</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.update()</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>而且还可以通过下面的方式保证一定能够修改：</p>\n<figure class=\"highlight css\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">color</span>: <span class=\"selector-tag\">blue</span>!<span class=\"selector-tag\">important</span>;</span><br></pre></td></tr></table></figure>"},{"_content":"# Class\n\nOmi 有内置的两个 class 方法 `classNames` 和 `extractClass`：\n\n```html\n<template name=\"component-name\">\n <div {...this.cls}>\n Test\n </div>\n</template>\n<script>\n import { classNames, extractClass } from 'omi'\n //extractClass 会取出 props 的 class 或 className 属性并与其他 classNames 合并在一起\n export default class {\n cls = extractClass(this.props, 'o-my-class', {\n 'other-class': true,\n 'other-class-b': this.xxx === 1\n })\n }\n</script>\n```\n\n上面的 classNames 和 npm 上的 classNames 是一样的。","source":"_posts/class.md","raw":"# Class\n\nOmi 有内置的两个 class 方法 `classNames` 和 `extractClass`：\n\n```html\n<template name=\"component-name\">\n <div {...this.cls}>\n Test\n </div>\n</template>\n<script>\n import { classNames, extractClass } from 'omi'\n //extractClass 会取出 props 的 class 或 className 属性并与其他 classNames 合并在一起\n export default class {\n cls = extractClass(this.props, 'o-my-class', {\n 'other-class': true,\n 'other-class-b': this.xxx === 1\n })\n }\n</script>\n```\n\n上面的 classNames 和 npm 上的 classNames 是一样的。","slug":"class","published":1,"date":"2019-07-11T01:06:27.291Z","updated":"2019-07-11T01:16:53.183Z","title":"","comments":1,"layout":"post","photos":[],"link":"","_id":"cjy1oeggl0002eq0ztmi17mol","content":"<h1 id=\"Class\"><a href=\"#Class\" class=\"headerlink\" title=\"Class\"></a>Class</h1><p>Omi 有内置的两个 class 方法 <code>classNames</code> 和 <code>extractClass</code>：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> {<span class=\"attr\">...this.cls</span>}></span></span><br><span class=\"line\"> Test</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">import</span> { classNames, extractClass } <span class=\"keyword\">from</span> <span class=\"string\">'omi'</span></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"comment\">//extractClass 会取出 props 的 class 或 className 属性并与其他 classNames 合并在一起</span></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> cls = extractClass(<span class=\"keyword\">this</span>.props, <span class=\"string\">'o-my-class'</span>, {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"string\">'other-class'</span>: <span class=\"literal\">true</span>,</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"string\">'other-class-b'</span>: <span class=\"keyword\">this</span>.xxx === <span class=\"number\">1</span></span></span><br><span class=\"line\"> })</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>上面的 classNames 和 npm 上的 classNames 是一样的。</p>\n","site":{"data":{}},"excerpt":"","more":"<h1 id=\"Class\"><a href=\"#Class\" class=\"headerlink\" title=\"Class\"></a>Class</h1><p>Omi 有内置的两个 class 方法 <code>classNames</code> 和 <code>extractClass</code>：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> {<span class=\"attr\">...this.cls</span>}></span></span><br><span class=\"line\"> Test</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">import</span> { classNames, extractClass } <span class=\"keyword\">from</span> <span class=\"string\">'omi'</span></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"comment\">//extractClass 会取出 props 的 class 或 className 属性并与其他 classNames 合并在一起</span></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> cls = extractClass(<span class=\"keyword\">this</span>.props, <span class=\"string\">'o-my-class'</span>, {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"string\">'other-class'</span>: <span class=\"literal\">true</span>,</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"string\">'other-class-b'</span>: <span class=\"keyword\">this</span>.xxx === <span class=\"number\">1</span></span></span><br><span class=\"line\"> })</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>上面的 classNames 和 npm 上的 classNames 是一样的。</p>\n"},{"_content":"# 生命周期\n\n以下表格是 Omi 的生命周期：\n\n|生命周期钩子|描述|\n|-|-|\n|install|组件挂载到 DOM 前|\n|installed|组件挂载到 DOM 后|\n|uninstall|组件从 DOM 中移除前|\n|beforeUpdate|update 更新前|\n|updated|update 更新后|\n|beforeRender|render() 之前|\n|receiveProps|父元素重新渲染触发|\n\n举个例子：\n\n```html\n<template name=\"component-name\">\n <div>Seconds: {this.data.seconds}</div>\n</template>\n<script>\n export default class {\n data = {\n seconds: 0\n }\n tick() {\n this.data.seconds++\n this.update()\n }\n install() {\n this.interval = setInterval(() => this.tick(), 1000)\n }\n uninstall() {\n clearInterval(this.interval)\n }\n }\n</script>\n```","source":"_posts/lifecycle.md","raw":"# 生命周期\n\n以下表格是 Omi 的生命周期：\n\n|生命周期钩子|描述|\n|-|-|\n|install|组件挂载到 DOM 前|\n|installed|组件挂载到 DOM 后|\n|uninstall|组件从 DOM 中移除前|\n|beforeUpdate|update 更新前|\n|updated|update 更新后|\n|beforeRender|render() 之前|\n|receiveProps|父元素重新渲染触发|\n\n举个例子：\n\n```html\n<template name=\"component-name\">\n <div>Seconds: {this.data.seconds}</div>\n</template>\n<script>\n export default class {\n data = {\n seconds: 0\n }\n tick() {\n this.data.seconds++\n this.update()\n }\n install() {\n this.interval = setInterval(() => this.tick(), 1000)\n }\n uninstall() {\n clearInterval(this.interval)\n }\n }\n</script>\n```","slug":"lifecycle","published":1,"date":"2019-07-10T14:59:00.549Z","updated":"2019-07-10T15:09:38.119Z","title":"","comments":1,"layout":"post","photos":[],"link":"","_id":"cjy1oeggm0003eq0z16d5ce8i","content":"<h1 id=\"生命周期\"><a href=\"#生命周期\" class=\"headerlink\" title=\"生命周期\"></a>生命周期</h1><p>以下表格是 Omi 的生命周期：</p>\n<table>\n<thead>\n<tr>\n<th>生命周期钩子</th>\n<th>描述</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>install</td>\n<td>组件挂载到 DOM 前</td>\n</tr>\n<tr>\n<td>installed</td>\n<td>组件挂载到 DOM 后</td>\n</tr>\n<tr>\n<td>uninstall</td>\n<td>组件从 DOM 中移除前</td>\n</tr>\n<tr>\n<td>beforeUpdate</td>\n<td>update 更新前</td>\n</tr>\n<tr>\n<td>updated</td>\n<td>update 更新后</td>\n</tr>\n<tr>\n<td>beforeRender</td>\n<td>render() 之前</td>\n</tr>\n<tr>\n<td>receiveProps</td>\n<td>父元素重新渲染触发</td>\n</tr>\n</tbody></table>\n<p>举个例子：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span>Seconds: {this.data.seconds}<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> data = {</span><br><span class=\"line\"> seconds: 0</span><br><span class=\"line\"> }</span><br><span class=\"line\"> tick() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data.seconds++</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.update()</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> install() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.interval = setInterval(<span class=\"function\"><span class=\"params\">()</span> =></span> <span class=\"keyword\">this</span>.tick(), <span class=\"number\">1000</span>)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> uninstall() {</span><br><span class=\"line\"><span class=\"javascript\"> clearInterval(<span class=\"keyword\">this</span>.interval)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>","site":{"data":{}},"excerpt":"","more":"<h1 id=\"生命周期\"><a href=\"#生命周期\" class=\"headerlink\" title=\"生命周期\"></a>生命周期</h1><p>以下表格是 Omi 的生命周期：</p>\n<table>\n<thead>\n<tr>\n<th>生命周期钩子</th>\n<th>描述</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>install</td>\n<td>组件挂载到 DOM 前</td>\n</tr>\n<tr>\n<td>installed</td>\n<td>组件挂载到 DOM 后</td>\n</tr>\n<tr>\n<td>uninstall</td>\n<td>组件从 DOM 中移除前</td>\n</tr>\n<tr>\n<td>beforeUpdate</td>\n<td>update 更新前</td>\n</tr>\n<tr>\n<td>updated</td>\n<td>update 更新后</td>\n</tr>\n<tr>\n<td>beforeRender</td>\n<td>render() 之前</td>\n</tr>\n<tr>\n<td>receiveProps</td>\n<td>父元素重新渲染触发</td>\n</tr>\n</tbody></table>\n<p>举个例子：</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span>Seconds: {this.data.seconds}<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> data = {</span><br><span class=\"line\"> seconds: 0</span><br><span class=\"line\"> }</span><br><span class=\"line\"> tick() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data.seconds++</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.update()</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> install() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.interval = setInterval(<span class=\"function\"><span class=\"params\">()</span> =></span> <span class=\"keyword\">this</span>.tick(), <span class=\"number\">1000</span>)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> uninstall() {</span><br><span class=\"line\"><span class=\"javascript\"> clearInterval(<span class=\"keyword\">this</span>.interval)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>"},{"_content":"# 配合 React 开发\n\n安装 React 脚手架和一些必要模块。\n```bash\nnpm install create-react-app\n# 初始化项目\ncreate-react-app my-project\n# 进入项目文件夹目录\ncd my-project\n# 安装项目依赖\nnpm install\n# 安装 styled-components 这个务必得安装 用于处理 React 单文件组件局部样式\nnpm install styled-components --save\n# 安装 omil 处理React单文件组件，把 .omi 或者 .eno 后缀文件处理为 JS\nnpm install omil --save-dev\n```\n\n在配置完 Omil 之后，我们可以在 VS Code 上同时安装好 [Omi Snippets](https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets) 扩展，这个插件可以方便的让你把 .omi 和 .eno 后缀文件在未经过 webpack 处理前转化为 .js 文件，让你可以直观了解到单文件组件经过 omil 转化后的 JS 文件内容，这相当于局部编译减轻 webpack 处理单文件时候的不必要消耗。\n\n\n# 编写第一个组件\n\n现在你可以使用单文件组件来编写 React 组件，默认生成类组件。\n\n- name属性值是组件名要满足 React 框架的组件名字定义规范，首字母必须大写字母;\n- `<template>`模板中不能有`<script>`和`<style>`代码片段。\n\n```html\n<template name=\"Component-name\">\n <div>\n <p>{this.state.title}</p>\n </div>\n</template>\n<script>\nexport default class {\n constructor(props) {\n super(props)\n this.state = {\n title: \"react\"\n }\n }\n componentDidMount(){\n console.log('生命周期')\n }\n}\n\n</script>\n<style>\np {color: #58bc58};\n</style>\n```\n以上文件经过 Omil 处理后将会转化为以下代码：\n\n```js\nimport { Component as WeElement, createElement as h } from \"react\";\nimport styled from \"styled-components\";\nconst StyledComponents = styled.div`\n /* CSS */\n p {\n color: #58bc58;\n }\n`;\n\nclass ComponentName extends WeElement {\n render() {\n return h(\n StyledComponents,\n null,\n h(\"div\", null, h(\"p\", null, this.state.title))\n );\n }\n\n constructor(props) {\n super(props);\n this.state = {\n title: \"react\"\n };\n }\n\n componentDidMount() {\n console.log(\"生命周期\");\n }\n}\n\nComponentName.css = `\n/* CSS */\np {color: #58bc58};\n`;\nexport default ComponentName;\n```","source":"_posts/react.md","raw":"# 配合 React 开发\n\n安装 React 脚手架和一些必要模块。\n```bash\nnpm install create-react-app\n# 初始化项目\ncreate-react-app my-project\n# 进入项目文件夹目录\ncd my-project\n# 安装项目依赖\nnpm install\n# 安装 styled-components 这个务必得安装 用于处理 React 单文件组件局部样式\nnpm install styled-components --save\n# 安装 omil 处理React单文件组件，把 .omi 或者 .eno 后缀文件处理为 JS\nnpm install omil --save-dev\n```\n\n在配置完 Omil 之后，我们可以在 VS Code 上同时安装好 [Omi Snippets](https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets) 扩展，这个插件可以方便的让你把 .omi 和 .eno 后缀文件在未经过 webpack 处理前转化为 .js 文件，让你可以直观了解到单文件组件经过 omil 转化后的 JS 文件内容，这相当于局部编译减轻 webpack 处理单文件时候的不必要消耗。\n\n\n# 编写第一个组件\n\n现在你可以使用单文件组件来编写 React 组件，默认生成类组件。\n\n- name属性值是组件名要满足 React 框架的组件名字定义规范，首字母必须大写字母;\n- `<template>`模板中不能有`<script>`和`<style>`代码片段。\n\n```html\n<template name=\"Component-name\">\n <div>\n <p>{this.state.title}</p>\n </div>\n</template>\n<script>\nexport default class {\n constructor(props) {\n super(props)\n this.state = {\n title: \"react\"\n }\n }\n componentDidMount(){\n console.log('生命周期')\n }\n}\n\n</script>\n<style>\np {color: #58bc58};\n</style>\n```\n以上文件经过 Omil 处理后将会转化为以下代码：\n\n```js\nimport { Component as WeElement, createElement as h } from \"react\";\nimport styled from \"styled-components\";\nconst StyledComponents = styled.div`\n /* CSS */\n p {\n color: #58bc58;\n }\n`;\n\nclass ComponentName extends WeElement {\n render() {\n return h(\n StyledComponents,\n null,\n h(\"div\", null, h(\"p\", null, this.state.title))\n );\n }\n\n constructor(props) {\n super(props);\n this.state = {\n title: \"react\"\n };\n }\n\n componentDidMount() {\n console.log(\"生命周期\");\n }\n}\n\nComponentName.css = `\n/* CSS */\np {color: #58bc58};\n`;\nexport default ComponentName;\n```","slug":"react","published":1,"date":"2019-07-11T01:35:59.726Z","updated":"2019-07-13T14:05:04.240Z","title":"","comments":1,"layout":"post","photos":[],"link":"","_id":"cjy1oeggn0004eq0z8az6pgih","content":"<h1 id=\"配合-React-开发\"><a href=\"#配合-React-开发\" class=\"headerlink\" title=\"配合 React 开发\"></a>配合 React 开发</h1><p>安装 React 脚手架和一些必要模块。</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install create-react-app</span><br><span class=\"line\"><span class=\"comment\"># 初始化项目</span></span><br><span class=\"line\">create-react-app my-project</span><br><span class=\"line\"><span class=\"comment\"># 进入项目文件夹目录</span></span><br><span class=\"line\"><span class=\"built_in\">cd</span> my-project</span><br><span class=\"line\"><span class=\"comment\"># 安装项目依赖</span></span><br><span class=\"line\">npm install</span><br><span class=\"line\"><span class=\"comment\"># 安装 styled-components 这个务必得安装 用于处理 React 单文件组件局部样式</span></span><br><span class=\"line\">npm install styled-components --save</span><br><span class=\"line\"><span class=\"comment\"># 安装 omil 处理React单文件组件，把 .omi 或者 .eno 后缀文件处理为 JS</span></span><br><span class=\"line\">npm install omil --save-dev</span><br></pre></td></tr></table></figure>\n\n<p>在配置完 Omil 之后，我们可以在 VS Code 上同时安装好 <a href=\"https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets\" target=\"_blank\" rel=\"noopener\">Omi Snippets</a> 扩展，这个插件可以方便的让你把 .omi 和 .eno 后缀文件在未经过 webpack 处理前转化为 .js 文件，让你可以直观了解到单文件组件经过 omil 转化后的 JS 文件内容，这相当于局部编译减轻 webpack 处理单文件时候的不必要消耗。</p>\n<h1 id=\"编写第一个组件\"><a href=\"#编写第一个组件\" class=\"headerlink\" title=\"编写第一个组件\"></a>编写第一个组件</h1><p>现在你可以使用单文件组件来编写 React 组件，默认生成类组件。</p>\n<ul>\n<li>name属性值是组件名要满足 React 框架的组件名字定义规范，首字母必须大写字母;</li>\n<li><code><template></code>模板中不能有<code><script></code>和<code><style></code>代码片段。</li>\n</ul>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"Component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>{this.state.title}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">constructor</span>(props) {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">super</span>(props)</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.state = {</span></span><br><span class=\"line\"><span class=\"javascript\"> title: <span class=\"string\">\"react\"</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> componentDidMount(){</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">'生命周期'</span>)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span>></span></span><br><span class=\"line\"><span class=\"css\"><span class=\"selector-tag\">p</span> {<span class=\"attribute\">color</span>: <span class=\"number\">#58bc58</span>};</span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>以上文件经过 Omil 处理后将会转化为以下代码：</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br><span class=\"line\">24</span><br><span class=\"line\">25</span><br><span class=\"line\">26</span><br><span class=\"line\">27</span><br><span class=\"line\">28</span><br><span class=\"line\">29</span><br><span class=\"line\">30</span><br><span class=\"line\">31</span><br><span class=\"line\">32</span><br><span class=\"line\">33</span><br><span class=\"line\">34</span><br><span class=\"line\">35</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> { Component <span class=\"keyword\">as</span> WeElement, createElement <span class=\"keyword\">as</span> h } <span class=\"keyword\">from</span> <span class=\"string\">\"react\"</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> styled <span class=\"keyword\">from</span> <span class=\"string\">\"styled-components\"</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> StyledComponents = styled.div<span class=\"string\">`</span></span><br><span class=\"line\"><span class=\"string\"> /* CSS */</span></span><br><span class=\"line\"><span class=\"string\"> p {</span></span><br><span class=\"line\"><span class=\"string\"> color: #58bc58;</span></span><br><span class=\"line\"><span class=\"string\"> }</span></span><br><span class=\"line\"><span class=\"string\">`</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">ComponentName</span> <span class=\"keyword\">extends</span> <span class=\"title\">WeElement</span> </span>{</span><br><span class=\"line\"> render() {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> h(</span><br><span class=\"line\"> StyledComponents,</span><br><span class=\"line\"> <span class=\"literal\">null</span>,</span><br><span class=\"line\"> h(<span class=\"string\">\"div\"</span>, <span class=\"literal\">null</span>, h(<span class=\"string\">\"p\"</span>, <span class=\"literal\">null</span>, <span class=\"keyword\">this</span>.state.title))</span><br><span class=\"line\"> );</span><br><span class=\"line\"> }</span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"keyword\">constructor</span>(props) {</span><br><span class=\"line\"> <span class=\"keyword\">super</span>(props);</span><br><span class=\"line\"> <span class=\"keyword\">this</span>.state = {</span><br><span class=\"line\"> title: <span class=\"string\">\"react\"</span></span><br><span class=\"line\"> };</span><br><span class=\"line\"> }</span><br><span class=\"line\"></span><br><span class=\"line\"> componentDidMount() {</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"生命周期\"</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\">ComponentName.css = <span class=\"string\">`</span></span><br><span class=\"line\"><span class=\"string\">/* CSS */</span></span><br><span class=\"line\"><span class=\"string\">p {color: #58bc58};</span></span><br><span class=\"line\"><span class=\"string\">`</span>;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> ComponentName;</span><br></pre></td></tr></table></figure>","site":{"data":{}},"excerpt":"","more":"<h1 id=\"配合-React-开发\"><a href=\"#配合-React-开发\" class=\"headerlink\" title=\"配合 React 开发\"></a>配合 React 开发</h1><p>安装 React 脚手架和一些必要模块。</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">npm install create-react-app</span><br><span class=\"line\"><span class=\"comment\"># 初始化项目</span></span><br><span class=\"line\">create-react-app my-project</span><br><span class=\"line\"><span class=\"comment\"># 进入项目文件夹目录</span></span><br><span class=\"line\"><span class=\"built_in\">cd</span> my-project</span><br><span class=\"line\"><span class=\"comment\"># 安装项目依赖</span></span><br><span class=\"line\">npm install</span><br><span class=\"line\"><span class=\"comment\"># 安装 styled-components 这个务必得安装 用于处理 React 单文件组件局部样式</span></span><br><span class=\"line\">npm install styled-components --save</span><br><span class=\"line\"><span class=\"comment\"># 安装 omil 处理React单文件组件，把 .omi 或者 .eno 后缀文件处理为 JS</span></span><br><span class=\"line\">npm install omil --save-dev</span><br></pre></td></tr></table></figure>\n\n<p>在配置完 Omil 之后，我们可以在 VS Code 上同时安装好 <a href=\"https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets\" target=\"_blank\" rel=\"noopener\">Omi Snippets</a> 扩展，这个插件可以方便的让你把 .omi 和 .eno 后缀文件在未经过 webpack 处理前转化为 .js 文件，让你可以直观了解到单文件组件经过 omil 转化后的 JS 文件内容，这相当于局部编译减轻 webpack 处理单文件时候的不必要消耗。</p>\n<h1 id=\"编写第一个组件\"><a href=\"#编写第一个组件\" class=\"headerlink\" title=\"编写第一个组件\"></a>编写第一个组件</h1><p>现在你可以使用单文件组件来编写 React 组件，默认生成类组件。</p>\n<ul>\n<li>name属性值是组件名要满足 React 框架的组件名字定义规范，首字母必须大写字母;</li>\n<li><code><template></code>模板中不能有<code><script></code>和<code><style></code>代码片段。</li>\n</ul>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"Component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>{this.state.title}<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">constructor</span>(props) {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">super</span>(props)</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.state = {</span></span><br><span class=\"line\"><span class=\"javascript\"> title: <span class=\"string\">\"react\"</span></span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> componentDidMount(){</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">'生命周期'</span>)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span>></span></span><br><span class=\"line\"><span class=\"css\"><span class=\"selector-tag\">p</span> {<span class=\"attribute\">color</span>: <span class=\"number\">#58bc58</span>};</span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>以上文件经过 Omil 处理后将会转化为以下代码：</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br><span class=\"line\">24</span><br><span class=\"line\">25</span><br><span class=\"line\">26</span><br><span class=\"line\">27</span><br><span class=\"line\">28</span><br><span class=\"line\">29</span><br><span class=\"line\">30</span><br><span class=\"line\">31</span><br><span class=\"line\">32</span><br><span class=\"line\">33</span><br><span class=\"line\">34</span><br><span class=\"line\">35</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> { Component <span class=\"keyword\">as</span> WeElement, createElement <span class=\"keyword\">as</span> h } <span class=\"keyword\">from</span> <span class=\"string\">\"react\"</span>;</span><br><span class=\"line\"><span class=\"keyword\">import</span> styled <span class=\"keyword\">from</span> <span class=\"string\">\"styled-components\"</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> StyledComponents = styled.div<span class=\"string\">`</span></span><br><span class=\"line\"><span class=\"string\"> /* CSS */</span></span><br><span class=\"line\"><span class=\"string\"> p {</span></span><br><span class=\"line\"><span class=\"string\"> color: #58bc58;</span></span><br><span class=\"line\"><span class=\"string\"> }</span></span><br><span class=\"line\"><span class=\"string\">`</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"class\"><span class=\"keyword\">class</span> <span class=\"title\">ComponentName</span> <span class=\"keyword\">extends</span> <span class=\"title\">WeElement</span> </span>{</span><br><span class=\"line\"> render() {</span><br><span class=\"line\"> <span class=\"keyword\">return</span> h(</span><br><span class=\"line\"> StyledComponents,</span><br><span class=\"line\"> <span class=\"literal\">null</span>,</span><br><span class=\"line\"> h(<span class=\"string\">\"div\"</span>, <span class=\"literal\">null</span>, h(<span class=\"string\">\"p\"</span>, <span class=\"literal\">null</span>, <span class=\"keyword\">this</span>.state.title))</span><br><span class=\"line\"> );</span><br><span class=\"line\"> }</span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"keyword\">constructor</span>(props) {</span><br><span class=\"line\"> <span class=\"keyword\">super</span>(props);</span><br><span class=\"line\"> <span class=\"keyword\">this</span>.state = {</span><br><span class=\"line\"> title: <span class=\"string\">\"react\"</span></span><br><span class=\"line\"> };</span><br><span class=\"line\"> }</span><br><span class=\"line\"></span><br><span class=\"line\"> componentDidMount() {</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"生命周期\"</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\">ComponentName.css = <span class=\"string\">`</span></span><br><span class=\"line\"><span class=\"string\">/* CSS */</span></span><br><span class=\"line\"><span class=\"string\">p {color: #58bc58};</span></span><br><span class=\"line\"><span class=\"string\">`</span>;</span><br><span class=\"line\"><span class=\"keyword\">export</span> <span class=\"keyword\">default</span> ComponentName;</span><br></pre></td></tr></table></figure>"},{"_content":"# Ref\n\n```html\n<template name=\"component-name\">\n <div>\n <h1 ref={e=> { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\n </div>\n</template>\n<script>\n export default class {\n onClick = (evt) => {\n console.log(this.h1)\n }\n }\n</script>\n```\n\n在元素上添加 `ref={e => { this.anyNameYouWant = e }}` ，然后你就可以 JS 代码里使用 `this.anyNameYouWant` 访问该元素。你可以使用两种方式来提高 update 的性能：\n\n- 提前赋值\n- createRef\n\n\n## 提前赋值\n\n```html\n<template name=\"component-name\">\n <div>\n <h1 ref={e=> { this.myRef = e }} onClick={this.onClick}>Hello, world!</h1>\n </div>\n</template>\n<script>\n export default class {\n myRef = e => { this.h1 = e }\n onClick = (evt) => {\n console.log(this.h1)\n }\n }\n</script>\n```\n\n## createRef\n\n你也可以使用 `createRef` 来得到更高的性能，使用前需要引用 `import { createRef } from \"omi\"`:\n\n```html\n<template name=\"component-name\">\n <div>\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\n </div>\n</template>\n<script>\n import { createRef } from \"omi\";\n export default class {\n myRef = createRef()\n onClick = (evt) => {\n console.log(this.myRef.current)\n }\n }\n</script>\n```","source":"_posts/ref.md","raw":"# Ref\n\n```html\n<template name=\"component-name\">\n <div>\n <h1 ref={e=> { this.h1 = e }} onClick={this.onClick}>Hello, world!</h1>\n </div>\n</template>\n<script>\n export default class {\n onClick = (evt) => {\n console.log(this.h1)\n }\n }\n</script>\n```\n\n在元素上添加 `ref={e => { this.anyNameYouWant = e }}` ，然后你就可以 JS 代码里使用 `this.anyNameYouWant` 访问该元素。你可以使用两种方式来提高 update 的性能：\n\n- 提前赋值\n- createRef\n\n\n## 提前赋值\n\n```html\n<template name=\"component-name\">\n <div>\n <h1 ref={e=> { this.myRef = e }} onClick={this.onClick}>Hello, world!</h1>\n </div>\n</template>\n<script>\n export default class {\n myRef = e => { this.h1 = e }\n onClick = (evt) => {\n console.log(this.h1)\n }\n }\n</script>\n```\n\n## createRef\n\n你也可以使用 `createRef` 来得到更高的性能，使用前需要引用 `import { createRef } from \"omi\"`:\n\n```html\n<template name=\"component-name\">\n <div>\n <h1 ref={this.myRef} onClick={this.onClick}>Hello, world!</h1>\n </div>\n</template>\n<script>\n import { createRef } from \"omi\";\n export default class {\n myRef = createRef()\n onClick = (evt) => {\n console.log(this.myRef.current)\n }\n }\n</script>\n```","slug":"ref","published":1,"date":"2019-07-11T00:55:11.738Z","updated":"2019-07-11T01:05:57.041Z","title":"","comments":1,"layout":"post","photos":[],"link":"","_id":"cjy1oeggp0005eq0z3w0psc5i","content":"<h1 id=\"Ref\"><a href=\"#Ref\" class=\"headerlink\" title=\"Ref\"></a>Ref</h1><figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">h1</span> <span class=\"attr\">ref</span>=<span class=\"string\">{e</span>=></span> { this.h1 = e }} onClick={this.onClick}>Hello, world!<span class=\"tag\"></<span class=\"name\">h1</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> onClick = <span class=\"function\">(<span class=\"params\">evt</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"built_in\">console</span>.log(<span class=\"keyword\">this</span>.h1)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>在元素上添加 <code>ref={e => { this.anyNameYouWant = e }}</code> ，然后你就可以 JS 代码里使用 <code>this.anyNameYouWant</code> 访问该元素。你可以使用两种方式来提高 update 的性能：</p>\n<ul>\n<li>提前赋值</li>\n<li>createRef</li>\n</ul>\n<h2 id=\"提前赋值\"><a href=\"#提前赋值\" class=\"headerlink\" title=\"提前赋值\"></a>提前赋值</h2><figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">h1</span> <span class=\"attr\">ref</span>=<span class=\"string\">{e</span>=></span> { this.myRef = e }} onClick={this.onClick}>Hello, world!<span class=\"tag\"></<span class=\"name\">h1</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> myRef = <span class=\"function\"><span class=\"params\">e</span> =></span> { <span class=\"keyword\">this</span>.h1 = e }</span></span><br><span class=\"line\"><span class=\"javascript\"> onClick = <span class=\"function\">(<span class=\"params\">evt</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"built_in\">console</span>.log(<span class=\"keyword\">this</span>.h1)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"createRef\"><a href=\"#createRef\" class=\"headerlink\" title=\"createRef\"></a>createRef</h2><p>你也可以使用 <code>createRef</code> 来得到更高的性能，使用前需要引用 <code>import { createRef } from "omi"</code>:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">h1</span> <span class=\"attr\">ref</span>=<span class=\"string\">{this.myRef}</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.onClick}</span>></span>Hello, world!<span class=\"tag\"></<span class=\"name\">h1</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">import</span> { createRef } <span class=\"keyword\">from</span> <span class=\"string\">\"omi\"</span>;</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> myRef = createRef()</span><br><span class=\"line\"><span class=\"javascript\"> onClick = <span class=\"function\">(<span class=\"params\">evt</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"built_in\">console</span>.log(<span class=\"keyword\">this</span>.myRef.current)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>","site":{"data":{}},"excerpt":"","more":"<h1 id=\"Ref\"><a href=\"#Ref\" class=\"headerlink\" title=\"Ref\"></a>Ref</h1><figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">h1</span> <span class=\"attr\">ref</span>=<span class=\"string\">{e</span>=></span> { this.h1 = e }} onClick={this.onClick}>Hello, world!<span class=\"tag\"></<span class=\"name\">h1</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> onClick = <span class=\"function\">(<span class=\"params\">evt</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"built_in\">console</span>.log(<span class=\"keyword\">this</span>.h1)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<p>在元素上添加 <code>ref={e => { this.anyNameYouWant = e }}</code> ，然后你就可以 JS 代码里使用 <code>this.anyNameYouWant</code> 访问该元素。你可以使用两种方式来提高 update 的性能：</p>\n<ul>\n<li>提前赋值</li>\n<li>createRef</li>\n</ul>\n<h2 id=\"提前赋值\"><a href=\"#提前赋值\" class=\"headerlink\" title=\"提前赋值\"></a>提前赋值</h2><figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">h1</span> <span class=\"attr\">ref</span>=<span class=\"string\">{e</span>=></span> { this.myRef = e }} onClick={this.onClick}>Hello, world!<span class=\"tag\"></<span class=\"name\">h1</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> myRef = <span class=\"function\"><span class=\"params\">e</span> =></span> { <span class=\"keyword\">this</span>.h1 = e }</span></span><br><span class=\"line\"><span class=\"javascript\"> onClick = <span class=\"function\">(<span class=\"params\">evt</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"built_in\">console</span>.log(<span class=\"keyword\">this</span>.h1)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>\n\n<h2 id=\"createRef\"><a href=\"#createRef\" class=\"headerlink\" title=\"createRef\"></a>createRef</h2><p>你也可以使用 <code>createRef</code> 来得到更高的性能，使用前需要引用 <code>import { createRef } from "omi"</code>:</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">h1</span> <span class=\"attr\">ref</span>=<span class=\"string\">{this.myRef}</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.onClick}</span>></span>Hello, world!<span class=\"tag\"></<span class=\"name\">h1</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">import</span> { createRef } <span class=\"keyword\">from</span> <span class=\"string\">\"omi\"</span>;</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> myRef = createRef()</span><br><span class=\"line\"><span class=\"javascript\"> onClick = <span class=\"function\">(<span class=\"params\">evt</span>) =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"built_in\">console</span>.log(<span class=\"keyword\">this</span>.myRef.current)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>"},{"_content":"# Store 是什么？\n\nStore 是 Omi 内置的中心化数据仓库，他解决和提供了下面问题和能力：\n\n组件树数据共享\n数据变更按需更新依赖的组件\n\n<img src=\"../images/store.cn.jpg\" />\n\n# 两份代码完全上手 Store\n\n`path/elements/app/index.omi`下的根组件\n```html\n<template name=\"my-app\">\n <div>\n <p>\n Clicked: {this.use.count} times\n {' '}\n <button onClick={this.add}>+</button>\n {' '}\n <button onClick={this.sub}>-</button>\n {' '}\n <button onClick={this.addIfOdd}>\n Add if odd\n </button>\n {' '}\n <button onClick={this.addAsync}>\n Add async\n </button>\n </p>\n </div>\n</template>\n<script>\n export default class {\n static use = [\n { count: 'count' }\n ]\n\n add = () => this.store.add()\n sub = () => this.store.sub()\n\n addIfOdd = () => {\n if (this.use.count % 2 !== 0) {\n this.store.add()\n }\n }\n\n addAsync = () => {\n setTimeout(() => this.store.add(), 1000)\n }\n }\n</script>\n<style lang=\"scss\">\n /* CSS */\n p {\n color: #58bc58\n };\n</style>\n```\n`path/src/index.js`全局的入口文件代码\n```js\nimport { render } from 'omi'\nimport './elements/app'\n\nrender(<my-app />, '#root', {\n data: {\n count: 0\n },\n sub() {\n this.data.count--\n },\n add() {\n this.data.count++\n },\n})\n```\n\n- 通过 `static use` 声明依赖的 path\n- store 通过 render 的第三个参数从根节点注入到所有组件。\n\n\nStore 里的 data:\n```js\n{\n count: 0,\n arr: ['china', 'tencent'],\n motto: 'I love omi.',\n userInfo: {\n firstName: 'dnt',\n lastName: 'zhang',\n age: 18\n }\n}\n```\n\n下面举一个复杂的 `use` 例子：\n```jsx\nstatic use = [\n 'count', //直接字符串，JSX 里可通过 this.use[0] 访问\n 'arr[0]', //也支持 path，JSX 里可通过 this.use[1] 访问\n //支持 json\n {\n //alias，JSX 里可通过 this.use.reverseMotto 访问\n reverseMotto: [\n 'motto', //path\n target => target.split('').reverse().join('') //computed\n ]\n },\n { name: 'arr[1]' }, //{ alias: path }，JSX 里可通过 this.use.name 访问\n {\n //alias，JSX 里可通过 this.use.fullName 访问\n fullName: [\n ['userInfo.firstName', 'userInfo.lastName'], //path array\n (firstName, lastName) => firstName + lastName //computed\n ]\n },\n]\n```\n\n下面看看 JSX 中使用:\n\n```jsx\n...\n...\n<template>\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.use[0]}</span>\n <button onClick={this.add}>+</button>\n <div>\n <span>{this.use[1]}</span>\n <button onClick={this.rename}>rename</button>\n </div>\n <div>{this.use.reverseMotto}</div><button onClick={this.changeMotto}>change motto</button>\n <div>{this.use.name}</div>\n <div>{this.use[3]}</div>\n <div>\n {this.use.fullName}\n <button onClick={this.changeFirstName}>change first name</button>\n </div>\n </div>\n</template>\n...\n...\n```\n\n如果不带有 alias ，你也可以直接通过 `this.store.data.xxx` 访问。\n\n\n当 `store.data` 发生变化，依赖变更数据的组件会进行更新，举例说明 Path 命中规则:\n\n| Proxy Path(由数据更改产生) | static use 中的 path | 是否更新 |\n| ---------- | ---------- | -------- |\n| abc | abc | 更新 |\n| abc[1] | abc | 更新 |\n| abc.a | abc | 更新 |\n| abc | abc.a | 不更新 |\n| abc | abc[1] | 不更新 |\n| abc | abc[1].c | 不更新 |\n| abc.b | abc.b | 更新 |\n\n以上只要命中一个条件就可以进行更新！\n\n总结： 只要注入组件的 path 等于 use 里声明 或者在 use 里声明的其中 path 子节点下就会进行更新！","source":"_posts/store.md","raw":"# Store 是什么？\n\nStore 是 Omi 内置的中心化数据仓库，他解决和提供了下面问题和能力：\n\n组件树数据共享\n数据变更按需更新依赖的组件\n\n<img src=\"../images/store.cn.jpg\" />\n\n# 两份代码完全上手 Store\n\n`path/elements/app/index.omi`下的根组件\n```html\n<template name=\"my-app\">\n <div>\n <p>\n Clicked: {this.use.count} times\n {' '}\n <button onClick={this.add}>+</button>\n {' '}\n <button onClick={this.sub}>-</button>\n {' '}\n <button onClick={this.addIfOdd}>\n Add if odd\n </button>\n {' '}\n <button onClick={this.addAsync}>\n Add async\n </button>\n </p>\n </div>\n</template>\n<script>\n export default class {\n static use = [\n { count: 'count' }\n ]\n\n add = () => this.store.add()\n sub = () => this.store.sub()\n\n addIfOdd = () => {\n if (this.use.count % 2 !== 0) {\n this.store.add()\n }\n }\n\n addAsync = () => {\n setTimeout(() => this.store.add(), 1000)\n }\n }\n</script>\n<style lang=\"scss\">\n /* CSS */\n p {\n color: #58bc58\n };\n</style>\n```\n`path/src/index.js`全局的入口文件代码\n```js\nimport { render } from 'omi'\nimport './elements/app'\n\nrender(<my-app />, '#root', {\n data: {\n count: 0\n },\n sub() {\n this.data.count--\n },\n add() {\n this.data.count++\n },\n})\n```\n\n- 通过 `static use` 声明依赖的 path\n- store 通过 render 的第三个参数从根节点注入到所有组件。\n\n\nStore 里的 data:\n```js\n{\n count: 0,\n arr: ['china', 'tencent'],\n motto: 'I love omi.',\n userInfo: {\n firstName: 'dnt',\n lastName: 'zhang',\n age: 18\n }\n}\n```\n\n下面举一个复杂的 `use` 例子：\n```jsx\nstatic use = [\n 'count', //直接字符串，JSX 里可通过 this.use[0] 访问\n 'arr[0]', //也支持 path，JSX 里可通过 this.use[1] 访问\n //支持 json\n {\n //alias，JSX 里可通过 this.use.reverseMotto 访问\n reverseMotto: [\n 'motto', //path\n target => target.split('').reverse().join('') //computed\n ]\n },\n { name: 'arr[1]' }, //{ alias: path }，JSX 里可通过 this.use.name 访问\n {\n //alias，JSX 里可通过 this.use.fullName 访问\n fullName: [\n ['userInfo.firstName', 'userInfo.lastName'], //path array\n (firstName, lastName) => firstName + lastName //computed\n ]\n },\n]\n```\n\n下面看看 JSX 中使用:\n\n```jsx\n...\n...\n<template>\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.use[0]}</span>\n <button onClick={this.add}>+</button>\n <div>\n <span>{this.use[1]}</span>\n <button onClick={this.rename}>rename</button>\n </div>\n <div>{this.use.reverseMotto}</div><button onClick={this.changeMotto}>change motto</button>\n <div>{this.use.name}</div>\n <div>{this.use[3]}</div>\n <div>\n {this.use.fullName}\n <button onClick={this.changeFirstName}>change first name</button>\n </div>\n </div>\n</template>\n...\n...\n```\n\n如果不带有 alias ，你也可以直接通过 `this.store.data.xxx` 访问。\n\n\n当 `store.data` 发生变化，依赖变更数据的组件会进行更新，举例说明 Path 命中规则:\n\n| Proxy Path(由数据更改产生) | static use 中的 path | 是否更新 |\n| ---------- | ---------- | -------- |\n| abc | abc | 更新 |\n| abc[1] | abc | 更新 |\n| abc.a | abc | 更新 |\n| abc | abc.a | 不更新 |\n| abc | abc[1] | 不更新 |\n| abc | abc[1].c | 不更新 |\n| abc.b | abc.b | 更新 |\n\n以上只要命中一个条件就可以进行更新！\n\n总结： 只要注入组件的 path 等于 use 里声明 或者在 use 里声明的其中 path 子节点下就会进行更新！","slug":"store","published":1,"date":"2019-07-11T01:29:37.400Z","updated":"2019-07-13T10:55:38.959Z","title":"","comments":1,"layout":"post","photos":[],"link":"","_id":"cjy1oeggp0006eq0zqx9uejz1","content":"<h1 id=\"Store-是什么？\"><a href=\"#Store-是什么？\" class=\"headerlink\" title=\"Store 是什么？\"></a>Store 是什么？</h1><p>Store 是 Omi 内置的中心化数据仓库，他解决和提供了下面问题和能力：</p>\n<p>组件树数据共享<br>数据变更按需更新依赖的组件</p>\n<img src=\"../images/store.cn.jpg\">\n\n<h1 id=\"两份代码完全上手-Store\"><a href=\"#两份代码完全上手-Store\" class=\"headerlink\" title=\"两份代码完全上手 Store\"></a>两份代码完全上手 Store</h1><p><code>path/elements/app/index.omi</code>下的根组件</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br><span class=\"line\">24</span><br><span class=\"line\">25</span><br><span class=\"line\">26</span><br><span class=\"line\">27</span><br><span class=\"line\">28</span><br><span class=\"line\">29</span><br><span class=\"line\">30</span><br><span class=\"line\">31</span><br><span class=\"line\">32</span><br><span class=\"line\">33</span><br><span class=\"line\">34</span><br><span class=\"line\">35</span><br><span class=\"line\">36</span><br><span class=\"line\">37</span><br><span class=\"line\">38</span><br><span class=\"line\">39</span><br><span class=\"line\">40</span><br><span class=\"line\">41</span><br><span class=\"line\">42</span><br><span class=\"line\">43</span><br><span class=\"line\">44</span><br><span class=\"line\">45</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"my-app\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Clicked: {this.use.count} times</span><br><span class=\"line\"> {' '}</span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.add}</span>></span>+<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> {' '}</span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.sub}</span>></span>-<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> {' '}</span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.addIfOdd}</span>></span></span><br><span class=\"line\"> Add if odd</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> {' '}</span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.addAsync}</span>></span></span><br><span class=\"line\"> Add async</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">static</span> use = [</span></span><br><span class=\"line\"><span class=\"javascript\"> { <span class=\"attr\">count</span>: <span class=\"string\">'count'</span> }</span></span><br><span class=\"line\"> ]</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"javascript\"> add = <span class=\"function\"><span class=\"params\">()</span> =></span> <span class=\"keyword\">this</span>.store.add()</span></span><br><span class=\"line\"><span class=\"javascript\"> sub = <span class=\"function\"><span class=\"params\">()</span> =></span> <span class=\"keyword\">this</span>.store.sub()</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"javascript\"> addIfOdd = <span class=\"function\"><span class=\"params\">()</span> =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">if</span> (<span class=\"keyword\">this</span>.use.count % <span class=\"number\">2</span> !== <span class=\"number\">0</span>) {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.store.add()</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"javascript\"> addAsync = <span class=\"function\"><span class=\"params\">()</span> =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> setTimeout(<span class=\"function\"><span class=\"params\">()</span> =></span> <span class=\"keyword\">this</span>.store.add(), <span class=\"number\">1000</span>)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span> <span class=\"attr\">lang</span>=<span class=\"string\">\"scss\"</span>></span></span><br><span class=\"line\"><span class=\"css\"> <span class=\"comment\">/* CSS */</span></span></span><br><span class=\"line\"> p {</span><br><span class=\"line\"><span class=\"css\"> <span class=\"selector-tag\">color</span>: <span class=\"selector-id\">#58bc58</span></span></span><br><span class=\"line\"> };</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<p><code>path/src/index.js</code>全局的入口文件代码</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> { render } <span class=\"keyword\">from</span> <span class=\"string\">'omi'</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">'./elements/app'</span></span><br><span class=\"line\"></span><br><span class=\"line\">render(<span class=\"xml\"><span class=\"tag\"><<span class=\"name\">my-app</span> /></span>, '#root', {</span></span><br><span class=\"line\"><span class=\"xml\"> data: {</span></span><br><span class=\"line\"><span class=\"xml\"> count: 0</span></span><br><span class=\"line\"><span class=\"xml\"> },</span></span><br><span class=\"line\"><span class=\"xml\"> sub() {</span></span><br><span class=\"line\"><span class=\"xml\"> this.data.count--</span></span><br><span class=\"line\"><span class=\"xml\"> },</span></span><br><span class=\"line\"><span class=\"xml\"> add() {</span></span><br><span class=\"line\"><span class=\"xml\"> this.data.count++</span></span><br><span class=\"line\"><span class=\"xml\"> },</span></span><br><span class=\"line\"><span class=\"xml\">})</span></span><br></pre></td></tr></table></figure>\n\n<ul>\n<li>通过 <code>static use</code> 声明依赖的 path</li>\n<li>store 通过 render 的第三个参数从根节点注入到所有组件。</li>\n</ul>\n<p>Store 里的 data:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">{</span><br><span class=\"line\"> count: <span class=\"number\">0</span>,</span><br><span class=\"line\"> arr: [<span class=\"string\">'china'</span>, <span class=\"string\">'tencent'</span>],</span><br><span class=\"line\"> motto: <span class=\"string\">'I love omi.'</span>,</span><br><span class=\"line\"> userInfo: {</span><br><span class=\"line\"> firstName: <span class=\"string\">'dnt'</span>,</span><br><span class=\"line\"> lastName: <span class=\"string\">'zhang'</span>,</span><br><span class=\"line\"> age: <span class=\"number\">18</span></span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>下面举一个复杂的 <code>use</code> 例子：</p>\n<figure class=\"highlight jsx\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">static</span> use = [</span><br><span class=\"line\"> <span class=\"string\">'count'</span>, <span class=\"comment\">//直接字符串，JSX 里可通过 this.use[0] 访问</span></span><br><span class=\"line\"> <span class=\"string\">'arr[0]'</span>, <span class=\"comment\">//也支持 path，JSX 里可通过 this.use[1] 访问</span></span><br><span class=\"line\"> <span class=\"comment\">//支持 json</span></span><br><span class=\"line\"> {</span><br><span class=\"line\"> <span class=\"comment\">//alias，JSX 里可通过 this.use.reverseMotto 访问</span></span><br><span class=\"line\"> reverseMotto: [</span><br><span class=\"line\"> <span class=\"string\">'motto'</span>, <span class=\"comment\">//path</span></span><br><span class=\"line\"> target => target.split(<span class=\"string\">''</span>).reverse().join(<span class=\"string\">''</span>) <span class=\"comment\">//computed</span></span><br><span class=\"line\"> ]</span><br><span class=\"line\"> },</span><br><span class=\"line\"> { <span class=\"attr\">name</span>: <span class=\"string\">'arr[1]'</span> }, <span class=\"comment\">//{ alias: path }，JSX 里可通过 this.use.name 访问</span></span><br><span class=\"line\"> {</span><br><span class=\"line\"> <span class=\"comment\">//alias，JSX 里可通过 this.use.fullName 访问</span></span><br><span class=\"line\"> fullName: [</span><br><span class=\"line\"> [<span class=\"string\">'userInfo.firstName'</span>, <span class=\"string\">'userInfo.lastName'</span>], <span class=\"comment\">//path array</span></span><br><span class=\"line\"> (firstName, lastName) => firstName + lastName <span class=\"comment\">//computed</span></span><br><span class=\"line\"> ]</span><br><span class=\"line\"> },</span><br><span class=\"line\">]</span><br></pre></td></tr></table></figure>\n\n<p>下面看看 JSX 中使用:</p>\n<figure class=\"highlight jsx\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">...</span><br><span class=\"line\"><template></span><br><span class=\"line\"> <div></span><br><span class=\"line\"> <button onClick={<span class=\"keyword\">this</span>.sub}>-<span class=\"xml\"><span class=\"tag\"></<span class=\"name\">button</span>></span></span></span><br><span class=\"line\"> <span>{<span class=\"keyword\">this</span>.use[<span class=\"number\">0</span>]}<<span class=\"regexp\">/span></span></span><br><span class=\"line\"><span class=\"regexp\"> <button onClick={this.add}>+</</span>button></span><br><span class=\"line\"> <div></span><br><span class=\"line\"> <span>{<span class=\"keyword\">this</span>.use[<span class=\"number\">1</span>]}<<span class=\"regexp\">/span></span></span><br><span class=\"line\"><span class=\"regexp\"> <button onClick={this.rename}>rename</</span>button></span><br><span class=\"line\"> <<span class=\"regexp\">/div></span></span><br><span class=\"line\"><span class=\"regexp\"> <div>{this.use.reverseMotto}</</span>div><span class=\"xml\"><span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.changeMotto}</span>></span>change motto<span class=\"tag\"></<span class=\"name\">button</span>></span></span></span><br><span class=\"line\"> <div>{<span class=\"keyword\">this</span>.use.name}<<span class=\"regexp\">/div></span></span><br><span class=\"line\"><span class=\"regexp\"> <div>{this.use[3]}</</span>div></span><br><span class=\"line\"> <div></span><br><span class=\"line\"> {<span class=\"keyword\">this</span>.use.fullName}</span><br><span class=\"line\"> <button onClick={<span class=\"keyword\">this</span>.changeFirstName}>change first name<<span class=\"regexp\">/button></span></span><br><span class=\"line\"><span class=\"regexp\"> </</span>div></span><br><span class=\"line\"> <<span class=\"regexp\">/div></span></span><br><span class=\"line\"><span class=\"regexp\"></</span>template></span><br><span class=\"line\">...</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>如果不带有 alias ，你也可以直接通过 <code>this.store.data.xxx</code> 访问。</p>\n<p>当 <code>store.data</code> 发生变化，依赖变更数据的组件会进行更新，举例说明 Path 命中规则:</p>\n<table>\n<thead>\n<tr>\n<th>Proxy Path(由数据更改产生)</th>\n<th>static use 中的 path</th>\n<th>是否更新</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>abc</td>\n<td>abc</td>\n<td>更新</td>\n</tr>\n<tr>\n<td>abc[1]</td>\n<td>abc</td>\n<td>更新</td>\n</tr>\n<tr>\n<td>abc.a</td>\n<td>abc</td>\n<td>更新</td>\n</tr>\n<tr>\n<td>abc</td>\n<td>abc.a</td>\n<td>不更新</td>\n</tr>\n<tr>\n<td>abc</td>\n<td>abc[1]</td>\n<td>不更新</td>\n</tr>\n<tr>\n<td>abc</td>\n<td>abc[1].c</td>\n<td>不更新</td>\n</tr>\n<tr>\n<td>abc.b</td>\n<td>abc.b</td>\n<td>更新</td>\n</tr>\n</tbody></table>\n<p>以上只要命中一个条件就可以进行更新！</p>\n<p>总结： 只要注入组件的 path 等于 use 里声明 或者在 use 里声明的其中 path 子节点下就会进行更新！</p>\n","site":{"data":{}},"excerpt":"","more":"<h1 id=\"Store-是什么？\"><a href=\"#Store-是什么？\" class=\"headerlink\" title=\"Store 是什么？\"></a>Store 是什么？</h1><p>Store 是 Omi 内置的中心化数据仓库，他解决和提供了下面问题和能力：</p>\n<p>组件树数据共享<br>数据变更按需更新依赖的组件</p>\n<img src=\"../images/store.cn.jpg\">\n\n<h1 id=\"两份代码完全上手-Store\"><a href=\"#两份代码完全上手-Store\" class=\"headerlink\" title=\"两份代码完全上手 Store\"></a>两份代码完全上手 Store</h1><p><code>path/elements/app/index.omi</code>下的根组件</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br><span class=\"line\">23</span><br><span class=\"line\">24</span><br><span class=\"line\">25</span><br><span class=\"line\">26</span><br><span class=\"line\">27</span><br><span class=\"line\">28</span><br><span class=\"line\">29</span><br><span class=\"line\">30</span><br><span class=\"line\">31</span><br><span class=\"line\">32</span><br><span class=\"line\">33</span><br><span class=\"line\">34</span><br><span class=\"line\">35</span><br><span class=\"line\">36</span><br><span class=\"line\">37</span><br><span class=\"line\">38</span><br><span class=\"line\">39</span><br><span class=\"line\">40</span><br><span class=\"line\">41</span><br><span class=\"line\">42</span><br><span class=\"line\">43</span><br><span class=\"line\">44</span><br><span class=\"line\">45</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"my-app\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span></span><br><span class=\"line\"> Clicked: {this.use.count} times</span><br><span class=\"line\"> {' '}</span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.add}</span>></span>+<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> {' '}</span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.sub}</span>></span>-<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> {' '}</span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.addIfOdd}</span>></span></span><br><span class=\"line\"> Add if odd</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> {' '}</span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.addAsync}</span>></span></span><br><span class=\"line\"> Add async</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">static</span> use = [</span></span><br><span class=\"line\"><span class=\"javascript\"> { <span class=\"attr\">count</span>: <span class=\"string\">'count'</span> }</span></span><br><span class=\"line\"> ]</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"javascript\"> add = <span class=\"function\"><span class=\"params\">()</span> =></span> <span class=\"keyword\">this</span>.store.add()</span></span><br><span class=\"line\"><span class=\"javascript\"> sub = <span class=\"function\"><span class=\"params\">()</span> =></span> <span class=\"keyword\">this</span>.store.sub()</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"javascript\"> addIfOdd = <span class=\"function\"><span class=\"params\">()</span> =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">if</span> (<span class=\"keyword\">this</span>.use.count % <span class=\"number\">2</span> !== <span class=\"number\">0</span>) {</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.store.add()</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"javascript\"> addAsync = <span class=\"function\"><span class=\"params\">()</span> =></span> {</span></span><br><span class=\"line\"><span class=\"javascript\"> setTimeout(<span class=\"function\"><span class=\"params\">()</span> =></span> <span class=\"keyword\">this</span>.store.add(), <span class=\"number\">1000</span>)</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">style</span> <span class=\"attr\">lang</span>=<span class=\"string\">\"scss\"</span>></span></span><br><span class=\"line\"><span class=\"css\"> <span class=\"comment\">/* CSS */</span></span></span><br><span class=\"line\"> p {</span><br><span class=\"line\"><span class=\"css\"> <span class=\"selector-tag\">color</span>: <span class=\"selector-id\">#58bc58</span></span></span><br><span class=\"line\"> };</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">style</span>></span></span><br></pre></td></tr></table></figure>\n\n<p><code>path/src/index.js</code>全局的入口文件代码</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">import</span> { render } <span class=\"keyword\">from</span> <span class=\"string\">'omi'</span></span><br><span class=\"line\"><span class=\"keyword\">import</span> <span class=\"string\">'./elements/app'</span></span><br><span class=\"line\"></span><br><span class=\"line\">render(<span class=\"xml\"><span class=\"tag\"><<span class=\"name\">my-app</span> /></span>, '#root', {</span></span><br><span class=\"line\"><span class=\"xml\"> data: {</span></span><br><span class=\"line\"><span class=\"xml\"> count: 0</span></span><br><span class=\"line\"><span class=\"xml\"> },</span></span><br><span class=\"line\"><span class=\"xml\"> sub() {</span></span><br><span class=\"line\"><span class=\"xml\"> this.data.count--</span></span><br><span class=\"line\"><span class=\"xml\"> },</span></span><br><span class=\"line\"><span class=\"xml\"> add() {</span></span><br><span class=\"line\"><span class=\"xml\"> this.data.count++</span></span><br><span class=\"line\"><span class=\"xml\"> },</span></span><br><span class=\"line\"><span class=\"xml\">})</span></span><br></pre></td></tr></table></figure>\n\n<ul>\n<li>通过 <code>static use</code> 声明依赖的 path</li>\n<li>store 通过 render 的第三个参数从根节点注入到所有组件。</li>\n</ul>\n<p>Store 里的 data:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">{</span><br><span class=\"line\"> count: <span class=\"number\">0</span>,</span><br><span class=\"line\"> arr: [<span class=\"string\">'china'</span>, <span class=\"string\">'tencent'</span>],</span><br><span class=\"line\"> motto: <span class=\"string\">'I love omi.'</span>,</span><br><span class=\"line\"> userInfo: {</span><br><span class=\"line\"> firstName: <span class=\"string\">'dnt'</span>,</span><br><span class=\"line\"> lastName: <span class=\"string\">'zhang'</span>,</span><br><span class=\"line\"> age: <span class=\"number\">18</span></span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure>\n\n<p>下面举一个复杂的 <code>use</code> 例子：</p>\n<figure class=\"highlight jsx\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">static</span> use = [</span><br><span class=\"line\"> <span class=\"string\">'count'</span>, <span class=\"comment\">//直接字符串，JSX 里可通过 this.use[0] 访问</span></span><br><span class=\"line\"> <span class=\"string\">'arr[0]'</span>, <span class=\"comment\">//也支持 path，JSX 里可通过 this.use[1] 访问</span></span><br><span class=\"line\"> <span class=\"comment\">//支持 json</span></span><br><span class=\"line\"> {</span><br><span class=\"line\"> <span class=\"comment\">//alias，JSX 里可通过 this.use.reverseMotto 访问</span></span><br><span class=\"line\"> reverseMotto: [</span><br><span class=\"line\"> <span class=\"string\">'motto'</span>, <span class=\"comment\">//path</span></span><br><span class=\"line\"> target => target.split(<span class=\"string\">''</span>).reverse().join(<span class=\"string\">''</span>) <span class=\"comment\">//computed</span></span><br><span class=\"line\"> ]</span><br><span class=\"line\"> },</span><br><span class=\"line\"> { <span class=\"attr\">name</span>: <span class=\"string\">'arr[1]'</span> }, <span class=\"comment\">//{ alias: path }，JSX 里可通过 this.use.name 访问</span></span><br><span class=\"line\"> {</span><br><span class=\"line\"> <span class=\"comment\">//alias，JSX 里可通过 this.use.fullName 访问</span></span><br><span class=\"line\"> fullName: [</span><br><span class=\"line\"> [<span class=\"string\">'userInfo.firstName'</span>, <span class=\"string\">'userInfo.lastName'</span>], <span class=\"comment\">//path array</span></span><br><span class=\"line\"> (firstName, lastName) => firstName + lastName <span class=\"comment\">//computed</span></span><br><span class=\"line\"> ]</span><br><span class=\"line\"> },</span><br><span class=\"line\">]</span><br></pre></td></tr></table></figure>\n\n<p>下面看看 JSX 中使用:</p>\n<figure class=\"highlight jsx\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br><span class=\"line\">18</span><br><span class=\"line\">19</span><br><span class=\"line\">20</span><br><span class=\"line\">21</span><br><span class=\"line\">22</span><br></pre></td><td class=\"code\"><pre><span class=\"line\">...</span><br><span class=\"line\">...</span><br><span class=\"line\"><template></span><br><span class=\"line\"> <div></span><br><span class=\"line\"> <button onClick={<span class=\"keyword\">this</span>.sub}>-<span class=\"xml\"><span class=\"tag\"></<span class=\"name\">button</span>></span></span></span><br><span class=\"line\"> <span>{<span class=\"keyword\">this</span>.use[<span class=\"number\">0</span>]}<<span class=\"regexp\">/span></span></span><br><span class=\"line\"><span class=\"regexp\"> <button onClick={this.add}>+</</span>button></span><br><span class=\"line\"> <div></span><br><span class=\"line\"> <span>{<span class=\"keyword\">this</span>.use[<span class=\"number\">1</span>]}<<span class=\"regexp\">/span></span></span><br><span class=\"line\"><span class=\"regexp\"> <button onClick={this.rename}>rename</</span>button></span><br><span class=\"line\"> <<span class=\"regexp\">/div></span></span><br><span class=\"line\"><span class=\"regexp\"> <div>{this.use.reverseMotto}</</span>div><span class=\"xml\"><span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.changeMotto}</span>></span>change motto<span class=\"tag\"></<span class=\"name\">button</span>></span></span></span><br><span class=\"line\"> <div>{<span class=\"keyword\">this</span>.use.name}<<span class=\"regexp\">/div></span></span><br><span class=\"line\"><span class=\"regexp\"> <div>{this.use[3]}</</span>div></span><br><span class=\"line\"> <div></span><br><span class=\"line\"> {<span class=\"keyword\">this</span>.use.fullName}</span><br><span class=\"line\"> <button onClick={<span class=\"keyword\">this</span>.changeFirstName}>change first name<<span class=\"regexp\">/button></span></span><br><span class=\"line\"><span class=\"regexp\"> </</span>div></span><br><span class=\"line\"> <<span class=\"regexp\">/div></span></span><br><span class=\"line\"><span class=\"regexp\"></</span>template></span><br><span class=\"line\">...</span><br><span class=\"line\">...</span><br></pre></td></tr></table></figure>\n\n<p>如果不带有 alias ，你也可以直接通过 <code>this.store.data.xxx</code> 访问。</p>\n<p>当 <code>store.data</code> 发生变化，依赖变更数据的组件会进行更新，举例说明 Path 命中规则:</p>\n<table>\n<thead>\n<tr>\n<th>Proxy Path(由数据更改产生)</th>\n<th>static use 中的 path</th>\n<th>是否更新</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>abc</td>\n<td>abc</td>\n<td>更新</td>\n</tr>\n<tr>\n<td>abc[1]</td>\n<td>abc</td>\n<td>更新</td>\n</tr>\n<tr>\n<td>abc.a</td>\n<td>abc</td>\n<td>更新</td>\n</tr>\n<tr>\n<td>abc</td>\n<td>abc.a</td>\n<td>不更新</td>\n</tr>\n<tr>\n<td>abc</td>\n<td>abc[1]</td>\n<td>不更新</td>\n</tr>\n<tr>\n<td>abc</td>\n<td>abc[1].c</td>\n<td>不更新</td>\n</tr>\n<tr>\n<td>abc.b</td>\n<td>abc.b</td>\n<td>更新</td>\n</tr>\n</tbody></table>\n<p>以上只要命中一个条件就可以进行更新！</p>\n<p>总结： 只要注入组件的 path 等于 use 里声明 或者在 use 里声明的其中 path 子节点下就会进行更新！</p>\n"},{"_content":"# Update\n\nupdate 方法是内置的重要核心方法，用于更新组件自身。比如:\n\n```js\nthis.update()\n```\n\n也可以传递参数，决定是否在 html 模式下忽略 attributes，强行更新:\n\n```js\nthis.update(true)\n```\n\n当我们组件的 data 值发生变化，我们可以使用`this.update()`更新视图\n\n```html\n<template name=\"component-name\">\n <div>\n <button onClick={this.toggle.bind(this)}>Update</button>\n <p style={{display:this.data.bool?'block':'none'}}>显示或者隐藏</p>\n </div>\n</template>\n<script>\n export default class {\n data = {\n bool: !0\n }\n toggle() {\n this.data.bool = !this.data.bool\n this.update()\n }\n }\n</script>\n```","source":"_posts/update.md","raw":"# Update\n\nupdate 方法是内置的重要核心方法，用于更新组件自身。比如:\n\n```js\nthis.update()\n```\n\n也可以传递参数，决定是否在 html 模式下忽略 attributes，强行更新:\n\n```js\nthis.update(true)\n```\n\n当我们组件的 data 值发生变化，我们可以使用`this.update()`更新视图\n\n```html\n<template name=\"component-name\">\n <div>\n <button onClick={this.toggle.bind(this)}>Update</button>\n <p style={{display:this.data.bool?'block':'none'}}>显示或者隐藏</p>\n </div>\n</template>\n<script>\n export default class {\n data = {\n bool: !0\n }\n toggle() {\n this.data.bool = !this.data.bool\n this.update()\n }\n }\n</script>\n```","slug":"update","published":1,"date":"2019-07-10T15:07:32.424Z","updated":"2019-07-11T00:54:11.157Z","title":"","comments":1,"layout":"post","photos":[],"link":"","_id":"cjy1oeggq0007eq0zbg7c8r08","content":"<h1 id=\"Update\"><a href=\"#Update\" class=\"headerlink\" title=\"Update\"></a>Update</h1><p>update 方法是内置的重要核心方法，用于更新组件自身。比如:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">this</span>.update()</span><br></pre></td></tr></table></figure>\n\n<p>也可以传递参数，决定是否在 html 模式下忽略 attributes，强行更新:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">this</span>.update(<span class=\"literal\">true</span>)</span><br></pre></td></tr></table></figure>\n\n<p>当我们组件的 data 值发生变化，我们可以使用<code>this.update()</code>更新视图</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.toggle.bind(this)}</span>></span>Update<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span> <span class=\"attr\">style</span>=<span class=\"string\">{{display:this.data.bool?</span>'<span class=\"attr\">block</span>'<span class=\"attr\">:</span>'<span class=\"attr\">none</span>'}}></span>显示或者隐藏<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> data = {</span><br><span class=\"line\"> bool: !0</span><br><span class=\"line\"> }</span><br><span class=\"line\"> toggle() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data.bool = !<span class=\"keyword\">this</span>.data.bool</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.update()</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>","site":{"data":{}},"excerpt":"","more":"<h1 id=\"Update\"><a href=\"#Update\" class=\"headerlink\" title=\"Update\"></a>Update</h1><p>update 方法是内置的重要核心方法，用于更新组件自身。比如:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">this</span>.update()</span><br></pre></td></tr></table></figure>\n\n<p>也可以传递参数，决定是否在 html 模式下忽略 attributes，强行更新:</p>\n<figure class=\"highlight js\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">this</span>.update(<span class=\"literal\">true</span>)</span><br></pre></td></tr></table></figure>\n\n<p>当我们组件的 data 值发生变化，我们可以使用<code>this.update()</code>更新视图</p>\n<figure class=\"highlight html\"><table><tr><td class=\"gutter\"><pre><span class=\"line\">1</span><br><span class=\"line\">2</span><br><span class=\"line\">3</span><br><span class=\"line\">4</span><br><span class=\"line\">5</span><br><span class=\"line\">6</span><br><span class=\"line\">7</span><br><span class=\"line\">8</span><br><span class=\"line\">9</span><br><span class=\"line\">10</span><br><span class=\"line\">11</span><br><span class=\"line\">12</span><br><span class=\"line\">13</span><br><span class=\"line\">14</span><br><span class=\"line\">15</span><br><span class=\"line\">16</span><br><span class=\"line\">17</span><br></pre></td><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">template</span> <span class=\"attr\">name</span>=<span class=\"string\">\"component-name\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">button</span> <span class=\"attr\">onClick</span>=<span class=\"string\">{this.toggle.bind(this)}</span>></span>Update<span class=\"tag\"></<span class=\"name\">button</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span> <span class=\"attr\">style</span>=<span class=\"string\">{{display:this.data.bool?</span>'<span class=\"attr\">block</span>'<span class=\"attr\">:</span>'<span class=\"attr\">none</span>'}}></span>显示或者隐藏<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">template</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">export</span> <span class=\"keyword\">default</span> <span class=\"class\"><span class=\"keyword\">class</span> </span>{</span></span><br><span class=\"line\"> data = {</span><br><span class=\"line\"> bool: !0</span><br><span class=\"line\"> }</span><br><span class=\"line\"> toggle() {</span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.data.bool = !<span class=\"keyword\">this</span>.data.bool</span></span><br><span class=\"line\"><span class=\"javascript\"> <span class=\"keyword\">this</span>.update()</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure>"}],"PostAsset":[],"PostCategory":[],"PostTag":[],"Tag":[]}}