{"id":139439,"date":"2020-07-14T00:32:08","date_gmt":"2020-07-13T16:32:08","guid":{"rendered":"http:\/\/4563.org\/?p=139439"},"modified":"2020-07-14T00:32:08","modified_gmt":"2020-07-13T16:32:08","slug":"react-composition-api","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=139439","title":{"rendered":"react composition api"},"content":{"rendered":"<div>\n<div>\n<div>\n<h1>                  react composition api               <\/h1>\n<p> <\/p>\n<div>\n<div> <span>\u8cc7\u6df1\u5927\u4f6c : noe132 <\/span>  <span><i><\/i> 7<\/span> <\/div>\n<div> <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div isfirst=\"1\"> <\/p>\n<p>vue composition api \u7ed9\u7ec4\u4ef6\u5316\u5f00\u53d1\u5e26\u6765\u4e86\u65b0\u7684\u903b\u8f91\u7ec4\u5408\u65b9\u5f0f\u3002\u4f46\u662f \u6211 \/\u516c\u53f8 \/\u9879\u76ee \u7528\u7684\u662f react \u600e\u4e48\u529e\uff1f<\/p>\n<p>\u7b54\u6848\u662f react composition api\uff01\u548c mobx \u914d\u5408\uff0creact \u4e5f\u80fd\u7528\u4e0a composition api \u3002<\/p>\n<p>\u901a\u8fc7 defineComponent \u521b\u5efa\u7ec4\u4ef6\uff0csetup \u51fd\u6570\u53ea\u6267\u884c\u4e00\u6b21\uff0c\u8fd4\u56de\u7684 render function \u5b8c\u5168\u7531 observable \u9a71\u52a8\uff0c\u53ef\u4ee5\u8f7b\u677e\u81ea\u7531\u7684\u7ec4\u5408\u5404\u79cd\u6570\u636e\u548c\u903b\u8f91\uff0c\u505a\u5230\u548c vue-composition-api \u4e00\u6837\u7684\u5f00\u53d1\u4f53\u9a8c\uff0c\u5e76\u4eab\u53d7 react \u5b8c\u5584\u7684\u751f\u6001\u548c typescript \u7684\u7edd\u4f73\u652f\u6301!<\/p>\n<p>\u9879\u76ee\u5df2\u6709 100% \u5355\u5143\u6d4b\u8bd5\u8986\u76d6\uff0c\u4f46\u5f53\u524d\u5e93\u8fd8\u672a\u8fdb\u5165 1.0.0 \u6b63\u5f0f\u7248\u672c\uff0c\u6682\u65f6\u8bf7\u52ff\u7528\u4e8e\u751f\u4ea7\u73af\u5883\u3002<\/p>\n<p>\u5b89\u88c5<\/p>\n<pre><code>yarn add react mobx mobx-react-lite yarn add @firefox-pro-coding\/react-composition-api <\/code><\/pre>\n<p>github: https:\/\/github.com\/Firefox-Pro-Coding\/react-composition-api<\/p>\n<p>\u8ba1\u6570\u5668\u4f8b\u5b50\uff1a<\/p>\n<pre><code>export const App = defineComponent((props) =&gt; {   const state = observable({ count: 0 })    onMounted(() =&gt; { console.log('mounted') })   onUnmounted(() =&gt; { console.log('unmounted') })    \/\/ observation   reaction(     () =&gt; state.count,     () =&gt; { console.log('new value is', state.count) },     { fireImmediately: true },   )    const handleAdd = () =&gt; { state.count += 1 }   const handleSub = () =&gt; { state.count -= 1 }    \/\/ render function   return () =&gt; (     &lt;div&gt;       &lt;div&gt;{state.count}&lt;\/div&gt;       &lt;button onClick={handleAdd}&gt;add&lt;\/button&gt;       &lt;button onClick={handleSub}&gt;sub&lt;\/button&gt;     &lt;\/div&gt;   ) }) <\/code><\/pre>\n<p>\u5173\u4e8e vue-composition-api: https:\/\/vue-composition-api-rfc.netlify.app\/<\/p>\n<\/p><\/div>\n<div> <b>\u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (<span>0<\/span>)        <\/div>\n<div> <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<ul>\n<li>\n","protected":false},"excerpt":{"rendered":"<p>react composition&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/139439"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=139439"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/139439\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=139439"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=139439"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=139439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}