ÕýÈçÎÒÃÇ֮ǰÌáµ½µÄ£¬WordPress µÄºËÐÄÍŶÓÕýÕùÂÛ×ÅΪӦ¸Ã½«ÄÄ¿î(ǰ¶Ë¿ò¼Ü)¼ÓÈëÏÖÔڵļܹ¹Ö®ÖС£Ä¿Ç°¿´À´£¬ÔÝʱÍÑÓ±¶ø³öµÄÊÇReactÓëVue.js£¬ÉçÇøÖеĺܶà³ÉÔ±ÕýȨºâ×ÅÕâÁ½¿î¿ò¼ÜµÄÀû±×¡£
Äǵ½µ×ÄÄ¿î¿ò¼Ü»áʤ³ö£¬ÄÄ¿î¿ò¼ÜÓÖ»áÂÙΪÎôÈÕµÄprototype.js.ÄØ?ÈÃÎÒÃÇÒ»Æð¿´¿´°É¡£
ÎÒÒѾд³öÁËÁ½¸ö¼¸ºõÒ»ÑùµÄWebÓ¦Óã¬Ò»¸öÊÇ»ùÓÚVue£¬ÁíÒ»¸öÔò»ùÓÚReact£¬¿ÉÒÔ·½±ãÄãÔÚ¿´ÕâÆªÎÄÕµÄʱºò²éÕÒÏà¹Ø´úÂë¡£
- React sample app(https:// github.com/ptasker/pasta-pete-react)
- Vue sample app(https:// github.com/ptasker/pasta-pete-vue)
¼òµ¥½éÉÜ
³ý·ÇÄã×î½üÒ»Ö±²»¹Ø×¢Ç°¶ËµÄ·¢Õ¹£¬²»È»Äã¿Ï¶¨Ìý˵¹ýÓÉFacebook´´½¨µÄJavaScript UI¿ò¼Ü¡ª¡ªReact¡£ËüÖ§³Å×ŰüÀ¨InstagramÔÚÄڵĴó¶àÊýFacebookÍøÕ¾¡£ReactÓ뵱ʱÁ÷ÐеÄjQuery, Backbone.jsºÍAngular 1µÈ¿ò¼Ü²»Í¬£¬ËüµÄµ®Éú¸Ä±äÁËJavaScriptµÄÊÀ½ç¡£ÆäÖÐ×î´óµÄ±ä»¯ÊÇReactÍÆ¹ãÁËVirtual DOM(ÎÒÃÇÉÔºó̽¾¿)²¢´´ÔìÁËеÄÓï·¨¡ª¡ªJSX£¬JSXÔÊÐí¿ª·¢ÕßÔÚJavaScriptÖÐÊéдHTML(ÒëÕß×¢£º¼´HTML in JavaScript)¡£WAT?
VueÖÂÁ¦½â¾öµÄÎÊÌâÓëReactÒ»Ö£¬µ«È´ÌṩÁËÁíÍâÒ»Ì×½â¾ö·½°¸¡£VueʹÓÃÄ£°åϵͳ¶ø²»ÊÇJSX£¬Ê¹Æä¶ÔÏÖÓÐÓ¦ÓõÄÉý¼¶¸ü¼ÓÈÝÒס£ÕâÊÇÒòΪģ°åÓõľÍÊÇÆÕͨµÄHTML£¬Í¨¹ýVueÀ´ÕûºÏÏÖÓеÄϵͳÊDZȽÏÈÝÒ׵쬲»ÐèÒªÕûÌåÖØ¹¹¡£Í¬Ê±VueÉù³ÆËü¸üÈÝÒ×ѧϰ£¬ÎÒ×î½ü²Å½Ó´¥Vue£¬ÄÜÖ¤Ã÷ËùÑÔ·ÇÐé¡£¹ØÓÚVue»¹ÐèҪ˵µÄÊÇ£¬VueÖ÷ÒªÊÇÓÉһλ¿ª·¢Õß½øÐÐά»¤µÄ£¬¶ø²»ÏñReactÒ»ÑùÓÉÈçFacebookÕâÀà´ó¹«Ë¾Î¬»¤¡£
ÏàËÆÖ®´¦
ReactÓëVue´æÔںܶàÏàËÆÖ®´¦£¬ÀýÈçËûÃǶ¼ÊÇJavaScriptµÄUI¿ò¼Ü£¬×¨×¢ÓÚ´´Ôìǰ¶ËµÄ¸»Ó¦Óᣲ»Í¬ÓÚÔçÆÚµÄJavaScript¿ò¼Ü¡°¹¦ÄÜÆëÈ«¡±£¬ReatÓëVueÖ»Óпò¼ÜµÄ¹Ç¼Ü£¬ÆäËûµÄ¹¦ÄÜÈç·ÓÉ¡¢×´Ì¬¹ÜÀíµÈÊÇ¿ò¼Ü·ÖÀëµÄ×é¼þ¡£
Virtual DOM
°¡¹þ£¬ÈËÃǾ³£ËµVirtual DOMÊÇÊ²Ã´ÄØ?

Vue.js(2.0°æ±¾)ÓëReactµÄÆäÖÐ×î´óÒ»¸öÏàËÆÖ®´¦£¬¾ÍÊÇËûÃǶ¼Ê¹ÓÃÁËÒ»ÖֽС¯Virtual DOM¡¯µÄ¶«Î÷¡£ËùνµÄVirtual DOM»ù±¾ÉÏ˵¾ÍÊÇËüÃû×ÖµÄÒâ˼£ºÐéÄâDOM£¬DOMÊ÷µÄÐéÄâ±íÏÖ¡£ËüµÄµ®ÉúÊÇ»ùÓÚÕâôһ¸ö¸ÅÄ¸Ä±äÕæÊµµÄDOM״̬Զ±È¸Ä±äÒ»¸öJavaScript¶ÔÏóµÄ»¨ÏúÒª´óµÃ¶à¡£
Virtual DOMÊÇÒ»¸öÓ³ÉäÕæÊµDOMµÄJavaScript¶ÔÏó£¬Èç¹ûÐèÒª¸Ä±äÈκÎÔªËØµÄ״̬£¬ÄÇôÊÇÏÈÔÚVirtual DOMÉϽøÐиı䣬¶ø²»ÊÇÖ±½Ó¸Ä±äÕæÊµµÄDOM¡£µ±Óб仯²úÉúʱ£¬Ò»¸öеÄVirtual DOM¶ÔÏó»á±»´´½¨²¢¼ÆËãоÉVirtual DOMÖ®¼äµÄ²î±ð¡£Ö®ºóÕâЩ²î±ð»áÓ¦ÓÃÔÚÕæÊµµÄDOMÉÏ¡£
Àý×ÓÈçÏ£¬ÎÒÃÇ¿ÉÒÔ¿´¿´ÏÂÃæÕâ¸öÁбíÔÚHTMLÖеĴúÂëÊÇÈçºÎдµÄ£º
<ul class="list">
<li>item 1</li>
<li>item 2</li>
</ul> |
¶øÔÚJavaScriptÖУ¬ÎÒÃÇ¿ÉÒÔÓöÔÏó¼òµ¥µØ´´ÔìÒ»¸öÕë¶ÔÉÏÃæÀý×ÓµÄÓ³É䣺
{
type: 'ul',
props: {'class': 'list'},
children: [
{ type: 'li', props: {}, children: ['item 1'] },
{ type: 'li', props: {}, children: ['item 2'] }
]
} |
ÕæÊµµÄVirtual DOM»á±ÈÉÏÃæµÄÀý×Ó¸ü¸´ÔÓ£¬µ«Ëü±¾ÖÊÉÏÊÇÒ»¸öǶÌ××ÅÊý×éµÄÔÉú¶ÔÏó¡£
µ±ÐÂÒ»Ïî±»¼Ó½øÈ¥Õâ¸öJavaScript¶ÔÏóʱ£¬Ò»¸öº¯Êý»á¼ÆËãоÉVirtual DOMÖ®¼äµÄ²îÒì²¢·´Ó¦ÔÚÕæÊµµÄDOMÉÏ¡£¼ÆËã²îÒìµÄËã·¨ÊǸßÐÔÄÜ¿ò¼ÜµÄÃØÃÜËùÔÚ£¬ReactºÍVueÔÚʵÏÖÉÏÓе㲻ͬ¡£
VueÐû³Æ¿ÉÒÔ¸ü¿ìµØ¼ÆËã³öVirtual DOMµÄ²îÒ죬ÕâÊÇÓÉÓÚËüÔÚäÖȾ¹ý³ÌÖУ¬»á¸ú×Ùÿһ¸ö×é¼þµÄÒÀÀµ¹ØÏµ£¬²»ÐèÒªÖØÐÂäÖȾÕû¸ö×é¼þÊ÷¡£
¶ø¶ÔÓÚReact¶øÑÔ£¬Ã¿µ±Ó¦ÓõÄ״̬±»¸Ä±äʱ£¬È«²¿×Ó×é¼þ¶¼»áÖØÐÂäÖȾ¡£µ±È»£¬Õâ¿ÉÒÔͨ¹ýshouldComponentUpdateÕâ¸öÉúÃüÖÜÆÚ·½·¨À´½øÐпØÖÆ£¬µ«Vue½«´ËÊÓΪĬÈϵÄÓÅ»¯¡£
С½á£ºÈç¹ûÄãµÄÓ¦ÓÃÖУ¬½»»¥¸´ÔÓ£¬ÐèÒª´¦Àí´óÁ¿µÄUI±ä»¯£¬ÄÇôʹÓÃVirtual DOMÊÇÒ»¸öºÃÖ÷Òâ¡£Èç¹ûÄã¸üÐÂÔªËØ²¢²»Æµ·±£¬ÄÇôVirtual DOM²¢²»Ò»¶¨ÊÊÓã¬ÐÔÄܺܿÉÄÜ»¹²»ÈçÖ±½Ó²Ù¿ØDOM¡£
×é¼þ»¯
ReactÓëVue¶¼¹ÄÀø×é¼þ»¯Ó¦Óá£Õâ±¾ÖÊÉÏ˵£¬Êǽ¨ÒéÄ㽫ÄãµÄÓ¦Ó÷ֲð³ÉÒ»¸ö¸ö¹¦ÄÜÃ÷È·µÄÄ£¿é£¬Ã¿¸öÄ£¿éÖ®¼ä¿ÉÒÔͨ¹ýºÏÊʵķ½Ê½»¥ÏàÁªÏµ¡£¹ØÓÚ×é¼þ»¯µÄÀý×Ó¿ÉÒÔÔÚÕâÆªÎÄÕµÄÖм䲿·Ö±»ÕÒµ½:
Äã¿ÉÒÔÈÏΪ×é¼þ¾ÍÊÇÓû§½çÃæÖеÄһС¿é¡£Èç¹ûÈÃÎÒÀ´Éè¼ÆFacebookµÄUI½çÃæ£¬ÄÇôÁÄÌì´°¿Ú»áÊÇÒ»¸ö×é¼þ£¬ÆÀÂÛ»áÊÇÁíÒ»¸ö×é¼þ£¬²»¶Ï¸üеĺÃÓÑÁбíÒ²»á×÷Ϊһ¸ö×é¼þ¡£
ÔÚVueÖУ¬Èç¹ûÄã×ñÊØÒ»¶¨µÄ¹æÔò£¬Äã¿ÉÒÔʹÓõ¥Îļþ×é¼þ.
//PastaItem.vue
<template>
<li class="pasta-dish list-unstyled">
<div class="row">
<div class="col-md-3">
<img :src="this.item.image" :alt="this.item.name" />
</div>
<div class="col-md-9 text-left">
<h3>{{this.item.name}}</h3>
<p>
{{this.item.desc}}
</p>
<button v-on:click="addToOrderNew" class="btn btn-primary">Add to order</button> <mark>{{this.orders}}</mark>
</div>
</div>
</li>
</template>
<script>
export default {
name: 'pasta-item',
props: ['item'],
data: function(){
return{
orders: 0
}
},
methods: {
addToOrderNew: function(y){
this.orders += 1;
this.$emit('order');
}
}
}
</script>
<style src="./Pasta.css"></style> |
ÕýÈçÉÏÃæÄã¿´µ½µÄÀý×ÓÖУ¬HTML, JavaScriptºÍCSS¶¼Ð´ÔÚÒ»¸öÎļþÖ®ÖС£Äã²»ÔÙÐèÒªÔÚ.vue×é¼þÎļþÖÐÒýÈëCSS£¬ËäÈ»ÕâÒ²ÊÇ¿ÉÒԵġ£
ReactÒ²ÊǷdz£ÏàËÆµÄ£¬JavaScriptÓëJSX±»Ð´Èëͬһ¸ö×é¼þÎļþÖС£
import React from "react";
class PastaItem extends React.Component {
render() {
const { details, index } = this.props;
return (
<li className="pasta-dish list-unstyled">
<div className="row">
<div className="col-md-3">
<img src={details.image} alt={details.name} />
</div>
<div className="col-md-9 text-left">
<h3>{details.name}</h3>
<p>
{details.desc}
</p>
<button onClick={() => this.props.addToOrder(index)} className="btn btn-primary">Add to order</button> <mark>{this.props.orders || 0}</mark>
</div>
</div>
</li>
);
}
}
export default PastaItem; |
Props
ÔÚÉÏÃæÁ½¸öÀý×ÓÖУ¬ÎÒÃÇ¿ÉÒÔ¿´µ½ReactºÍVue¶¼ÓС¯props¡¯µÄ¸ÅÄÕâÊÇpropertiesµÄ¼òд¡£propsÔÚ×é¼þÖÐÊÇÒ»¸öÌØÊâµÄÊôÐÔ£¬ÔÊÐí¸¸×é¼þÍù×Ó×é¼þ´«ËÍÊý¾Ý¡£
Object.keys(this.state.pastadishes).map(key =>
<PastaItem index={key} key={key} details={this.state.pastadishes[key]} addToOrder={this.addToOrder} orders={this.state.orders[key]} />
) |
ÉÏÃæµÄJSX¿â×éÖУ¬index, key, details, orders Óë addToOrder¶¼ÊÇprops£¬Êý¾Ý»á±»Ï´«µ½×Ó×é¼þPastaItemÖÐÈ¥¡£
ÔÚReactÖУ¬ÕâÊDZØÐëµÄ£¬ËüÒÀÀµÒ»¸ö¡°µ¥Ò»Êý¾ÝÔ´¡±×÷ΪËüµÄ¡°×´Ì¬¡±(ÉÔºóÓиü¶à½éÉÜ)¡£
¶øÔÚVueÖУ¬propsÂÔÓв»Í¬¡£ËüÃÇÒ»ÑùÊÇÔÚ×é¼þÖб»¶¨Ò壬µ«VueÒÀÀµÓÚÄ£°åÓï·¨£¬Äã¿ÉÒÔͨ¹ýÄ£°åµÄÑ»·º¯Êý¸ü¸ßЧµØÕ¹Ê¾´«ÈëµÄÊý¾Ý¡£
<pasta-item v-for="(item, key) in samplePasta" :item="item" :key="key" @order="handleOrder(key)"></pasta-item>
ÕâÊÇÄ£°åµÄʵÏÖ£¬µ«Õâ´úÂëÍêÈ«Äܹ¤×÷£¬È»¶øÔÚReactÖÐÕ¹ÏÖÏàͬÊý¾Ý»á¸üÂé·³Ò»µã¡£
¹¹½¨¹¤¾ß
ReactºÍVue¶¼ÓÐ×Ô¼ºµÄ¹¹½¨¹¤¾ß£¬Äã¿ÉÒÔʹÓÃËü¿ìËٴ¿ª·¢»·¾³¡£React¿ÉÒÔʹÓÃCreate React App (CRA)£¬¶øVue¶ÔÓ¦µÄÔòÊÇvue-cli¡£Á½¸ö¹¤¾ß¶¼ÄÜÈÃÄãµÃµ½Ò»¸ö¸ù¾Ý×î¼Ñʵ¼ùÉèÖõÄÏîĿģ°å¡£
ÓÉÓÚCRAÓкܶàÑ¡ÏʹÓÃÆðÀ´»áÉÔ΢Âé·³Ò»µã¡£Õâ¸ö¹¤¾ß»á±ÆÆÈÄãʹÓÃWebpackºÍBabel¡£¶øvue-cliÔòÓÐÄ£°åÁбí¿ÉÑ¡£¬Äܰ´Ðè´´Ô첻ͬģ°å£¬Ê¹ÓÃÆðÀ´¸üÁé»îÒ»µã¡£
ÊÂʵÉÏ˵£¬Á½¸ö¹¤¾ß¶¼·Ç³£ºÃÓ㬶¼ÄÜΪÄ㽨Á¢Ò»¸öºÃ»·¾³¡£¶øÇÒÈç¹û¿ÉÒÔ²»ÅäÖÃWebpackµÄ»°£¬ÎÒºÍJeffÈÏΪÕâÊÇÌì´óµÄºÃÊ¡£

Chrome ¿ª·¢¹¤¾ß
ReactºÍVue¶¼ÓкܺõÄChromeÀ©Õ¹¹¤¾ßÈ¥°ïÖúÄãÕÒ³öbug¡£ËüÃÇ»á¼ì²éÄãµÄÓ¦Óã¬ÈÃÄã¿´µ½Vue»òÕßReactÖеı仯¡£ÄãÒ²¿ÉÒÔ¿´µ½Ó¦ÓÃÖеÄ״̬£¬²¢ÊµÊ±¿´µ½¸üС£
ReactµÄ¿ª·¢¹¤¾ß: https://cdn.deliciousbrains.com/ content/uploads/2017/06/ 15151112/react-devtools.mp4
VueµÄ¿ª·¢¹¤¾ß: https://cdn.deliciousbrains.com/ content/uploads/2017/06/ 15151111/vue-devtools.mp4
ÅäÌ׿ò¼Ü
VueÓëReact×îºóÒ»¸öÏàËÆµ«ÂÔÓв»Í¬Ö®´¦ÊÇËüÃÇÅäÌ׿ò¼ÜµÄ´¦Àí·½·¨¡£Ïà֮ͬ´¦ÔÚÓÚ£¬Á½¸ö¿ò¼Ü¶¼×¨×¢ÓÚUI²ã£¬ÆäËûµÄ¹¦ÄÜÈç·ÓÉ¡¢×´Ì¬¹ÜÀíµÈ¶¼½»ÓÉͬ°é¿ò¼Ü½øÐд¦Àí¡£
¶ø²»Í¬Ö®´¦ÊÇÔÚÓÚËüÃÇÈçºÎ¹ØÁªËüÃǸ÷×ÔµÄÅäÌ׿ò¼Ü¡£VueµÄºËÐÄÍŶÓά»¤×Åvue-routerºÍvuex£¬ËüÃǶ¼ÊÇ×÷Ϊ¹Ù·½ÍƼöµÄ´æÔÚ¡£¶øReactµÄreact-routerºÍreact-reduxÔòÊÇÓÉÉçÇø³ÉԱά»¤£¬ËüÃǶ¼²»Êǹٷ½Î¬»¤µÄ¡£
Ö÷񻂿±ð
VueÓëreactÓкܶàµÄÏàËÆÖ®´¦£¬µ«ËûÃÇÒ²ÓÐÍêÈ«²»Ò»Öµĵط½¡£
Ä£°å vs JSX
ReactÓëVue×î´óµÄ²»Í¬ÊÇÄ£°åµÄ±àд¡£Vue¹ÄÀøÄãȥд½üËÆ³£¹æHTMLµÄÄ£°å¡£Ð´ÆðÀ´ºÜ½Ó½ü±ê×¼HTMLÔªËØ£¬Ö»ÊǶàÁËһЩÊôÐÔ¡£
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul> |
ÕâЩÊôÐÔÒ²¿ÉÒÔ±»Ê¹ÓÃÔÚµ¥Îļþ×é¼þÖУ¬¾¡¹ÜËüÐèÒªÔÚÔÚ¹¹½¨Ê±½«×é¼þת»»ÎªºÏ·¨µÄJavaScriptºÍHTML¡£
<ul>
<pasta-item v-for="(item, key) in samplePasta" :item="item" :key="key" @order="handleOrder(key)"></pasta-item>
</ul> |
Vue¹ÄÀøÄãȥʹÓÃHTMLÄ£°åÈ¥½øÐÐäÖȾ£¬Ê¹ÓÃÏàËÆÓÚAngular·ç¸ñµÄ·½·¨È¥Êä³ö¶¯Ì¬µÄÄÚÈÝ¡£Òò´Ë£¬Í¨¹ý°ÑÔÓеÄÄ£°åÕûºÏ³ÉеÄVueÄ£°å£¬VueºÜÈÝÒ×Ìṩ¾ÉµÄÓ¦ÓõÄÉý¼¶¡£ÕâÒ²ÈÃÐÂÀ´ÕߺÜÈÝÒ×ÊÊÓ¦ËüµÄÓï·¨¡£
ÁíÒ»·½Ã棬ReactÍÆ¼öÄãËùÓеÄÄ£°åͨÓÃJavaScriptµÄÓï·¨À©Õ¹¡ª¡ªJSXÊéд¡£Í¬ÑùµÄ´úÂ룬ÓÃJSXÊéдµÄÀý×ÓÈçÏ£º
<ul className="pasta-list">
{
Object.keys(this.state.pastadishes).map(key =>
<PastaItem index={key} key={key} details={this.state.pastadishes[key]} addToOrder={this.addToOrder} orders={this.state.orders[key]} />
)
}
</ul> |
React/JSXÕ§¿´Ö®Ï£¬¾õµÃ·Ç³£†ªà£¬µ«Ê¹ÓÃJavaScript¶ø²»ÊÇÄ£°åÀ´¿ª·¢£¬¸³ÓèÁË¿ª·¢ÕßÐí¶à±à³ÌÄÜÁ¦¡£
µ«Çë¼Çס£º
ÄÜÁ¦Ô½´ó£¬ÔðÈÎÔ½´ó¡£ Ben Parker
JSXÖ»ÊÇJavaScript»ìºÏ×ÅXMLÓï·¨£¬È»¶øÒ»µ©ÄãÕÆÎÕÁËËü£¬ËüʹÓÃÆðÀ´»áÈÃÄã¸Ðµ½³©¿ì¡£Õâ¿ÉÄÜÖ»ÊÇÎÒ¸öÈ˵ÄÒâ¼û£¬µ«ÎÒ¾õµÃÕâ±ÈAngular 1·ç¸ñµÄÊôÐԺöàÁË£¬Angular 1ÕæµÄÄÑÒÔÈÌÊÜ¡£
¶øÏà·´µÄ¹ÛµãÊÇVueµÄÄ£°åÓ﷨ȥ³ýÁËÍùÊÓͼ/×é¼þÖÐÌí¼ÓÂß¼µÄÓջ󣬱£³ÖÁ˹Ø×¢µã·ÖÀë¡£
ÖµµÃÒ»ÌáµÄÊÇ£¬ÓëReactÒ»Ñù£¬VueÔÚ¼¼ÊõÉÏÒ²Ö§³Örenderº¯ÊýºÍJSX£¬µ«Ö»ÊDz»ÊÇĬÈϵĶøÒÑ¡£
״̬¹ÜÀí vs ¶ÔÏóÊôÐÔ
Èç¹ûÄã¶ÔReactÊìϤ£¬Äã¾Í»áÖªµÀÓ¦ÓÃÖеÄ״̬ÊÇ(React)¹Ø¼üµÄ¸ÅÄî¡£Ò²ÓÐһЩÅäÌ׿ò¼Ü±»Éè¼ÆÎª¹ÜÀíÒ»¸ö´óµÄstate¶ÔÏó£¬ÈçRedux¡£´ËÍ⣬state¶ÔÏóÔÚReactÓ¦ÓÃÖÐÊDz»¿É±äµÄ£¬Òâζ×ÅËü²»Äܱ»Ö±½Ó¸Ä±ä(ÕâÒ²Ðí²»Ò»¶¨ÕýÈ·)¡£ÔÚReactÖÐÄãÐèҪʹÓÃsetState()·½·¨È¥¸üÐÂ״̬¡£
addToOrder(key) {
//Make a copy of this.state
const orders = { ...this.state.orders };
//update or add
orders[ key ] = orders[ key ] + 1 || 1;
this.setState( { orders } );
} |
ÔÚVueÖУ¬state¶ÔÏó²¢²»ÊDZØÐëµÄ£¬Êý¾ÝÓÉdataÊôÐÔÔÚVue¶ÔÏóÖнøÐйÜÀí¡£
export default {
name: 'app',
data() {
return {
samplePasta: samplePasta,
orders: {}
}
},
...
methods: {
handleOrder: function (key) {
if (!this.orders.hasOwnProperty(key)) {
this.$set(this.orders, key, { count: 0 });
}
this.orders[key].count += 1;
}
}
} |
¶øÔÚVueÖУ¬Ôò²»ÐèҪʹÓÃÈçsetState()Ö®ÀàµÄ·½·¨È¥¸Ä±äËüµÄ״̬£¬ÔÚVue¶ÔÏóÖУ¬data²ÎÊý¾ÍÊÇÓ¦ÓÃÖÐÊý¾ÝµÄ±£´æÕß¡£
¶ÔÓÚ¹ÜÀí´óÐÍÓ¦ÓÃÖеÄ״̬ÕâÒ»»°Ìâ¶øÑÔ£¬Vue.jsµÄ×÷ÕßÓÈÓêÏªÔøËµ¹ý£¬(VueµÄ)½â¾ö·½°¸ÊÊÓÃÓÚСÐÍÓ¦Ó㬵«¶ÔÓÚ¶ÔÓÚ´óÐÍÓ¦ÓöøÑÔ²»Ì«Êʺϡ£
¶àÊýÇé¿öÏ£¬¿ò¼ÜÄÚÖõÄ״̬¹ÜÀíÊDz»×ãÒÔÖ§³Å´óÐÍÓ¦Óõģ¬Redux»òVuexµÈ״̬¹ÜÀí·½°¸ÊDZØÐëʹÓõġ£
ÓмøÓÚ´Ë£¬ÕùÂÛÄãµÄÓ¦ÓÃÖÐÈçºÎ¹ÜÀí״̬ºÜ¿ÉÄÜÊôÓÚ¹ýÔçÓÅ»¯£¬²¢ÇÒÕâºÜ¿ÉÄÜÖ»ÊǸöÈËÆ«ºÃÎÊÌâ¡£´ËÍ⣬Äã¿ÉÄÜÕæÃ»±ØÒªµ£ÐÄÕâ·½Ãæ¡£
React Native vs. ?
React NativeÄÜÔÚÊÖ»úÉÏ´´½¨ÔÉúÓ¦Óã¬ReactÔÚÕâ·½Ãæ´¦ÓÚÁìÏÈλÖá£Ê¹ÓÃJavaScript, CSSºÍHTML´´½¨ÔÉúÒÆ¶¯Ó¦Óã¬ÕâÊÇÒ»¸öÖØÒªµÄ¸ïС£VueÉçÇøÓë°¢ÀïºÏ×÷¿ª·¢Vue°æµÄReact Native¡ª¡ªWeexÒ²ºÜ²»´í£¬µ«ÈÔ´¦ÓÚ¿ª·¢×´Ì¬ÇÒ²¢Ã»¾¹ýʵ¼ÊÏîÄ¿µÄÑéÖ¤¡£
ÄÇô£¬ËÓ®µÃÕⳡ¾ºÈüÄØ?
TLDR; JavaScriptÊÇûǰ;µÄ, Ò»ÆðʹÓÃTypeScript°É
Èç¹ûÄãÏëÔÚÇóÖ°Êг¡ÖÐÓйâ»ÔµÄJavaScript UI¿ò¼ÜʹÓþÑ飬ÄÇôReactºÍVue¶¼ÊDz»´íµÄÑ¡Ôñ¡£ReactËÆºõ¸ü¼ÓÁ÷ÐУ¬µ«VueÒ²±äµÃÔ½À´Ô½¹ãΪÈËÖª¡£Èç¹ûÄãÏ뽫ÏÖÓеÄÓ¦ÓÃÉý¼¶ÎªÐµÄJavaScript¿ò¼Ü£¬ÄÇôÎÒ½¨ÒéÄãÑ¡ÔñVue¡£Êµ¼ÊÉÏ£¬µ±ÄãÏë´´½¨Ò»¸öÏÖ´úµÄJavaScriptÓ¦ÓÃʱ£¬Á½Õß¶¼ÊǺܺõÄÑ¡Ôñ£¬È¡¾öÓÚÄãµÄÆ«ºÃ¡£
Äã¶ÔÓÚReact»òÕßVueµÄÏë·¨ÊÇÊ²Ã´ÄØ?¸Ï¿ì·¢±íÆÀÂÛ¸æËßÎÒÃǰÉ! |