reactºÃ»¹ÊÇvuejsºÃ
ÏÖÈç½ñ£¬Vue.js ÔÚ Github ÉϵÄÁ÷ÐÐÖ¸ÊýÒѾ³¬Ô½ÁË React²¢ÇÒ»¹ÔÚ²»½ßµÄÔö³¤£¬ÓÉÓÚËü²¢Ã»ÓÐÏñ Facebok»òGoogleÄÇÑùµÄ´ó¹«Ë¾Ö§³Å£¬µ«ÕâÖÖÔö³¤ÈÃÈ˷dz£¾ªÆæ¡£
½ÓÏÂÀ´ÔÚÎÄÕÂÖн«»á·ÖÏíһЩ¶Ô Vue Á÷ÐеĿ´·¨£¬ÄËÖÁΪʲôËüÄܳ¬Ô½¾ºÕùÕß¡£ÄËÖÁËüÁ©Ö®¼äµÄ²»Í¬£¬²¢ËµÃ÷Ϊʲô React£¨¼´±ãËüÊǸöºÃ¿ò¼Ü£©¾³£ºÜÓÐÕ©ÆÐÔ
¡¾Òý¼ö¿Î³Ì£º React½Ì³Ì¡¢vue.js½Ì³Ì¡¿
¡¾Òý¼öÎÄÕ£ºvue Óë react ²»Í¬Óжà´ó¡¿
1. Web ¿ª·¢µÄ¿ªÕ¹
ÔÚÉϸöÊÀ¼Í¾ÅÊ®Äê´ú£¬Ð´ÍøÕ¾»¹Ö»ÊÇ´¿½àµÄ HTML£¬¼ÓÉÏһЩ¼ò±ãµÄ CSS Ñùʽ°ÕÁË¡£ºÃ´¦¾ÍÊǷdz£¼ò±ã¡£º¦´¦¾ÍÊÇȱÉÙÐí¶à¹¦Ð§¡£Ö®ºó¾ÍÏÔÏÖÁË PHP£¬ÓÚÊÇÎÒÃǺܿìÀֵذѴúÂëд³ÉÁËÕâ¸öÄ£Ñù
ËäÈ»½ñÌì¿´À´Õâ¶Î´úÂëÊ®·ÖÔã¸â£¬µ«ÔÚµ±Ê±ÊǺܴóµÄ½ø²½¡£ÕâÖÖ½ø²½µ½´Ë¿ÌÈÔȻû±ä£ºÑ¡ÖÐÎÒÃÇϲ°®µÄÐÂ˵»°¡¢Ð¿ò¼Ü£¬Ö±µ½Ä³Ò»ÌìÏÔÏÖ¸üºÃµÄ¾ºÕùµÐÊÖ¡£
ÔÚ React ÏÔÏÖ´ËÇ°ÎÒÓùý Ember¡£Ö®ºóÎÒÇл»µ½ React£¬Ëü°ÑËùÓж«Î÷¶¼¿´×÷ Web ×é¼þµÄ·½Ê½£¬ËüµÄÐéÄâ DOM£¬ºÍ¸ßЧµÄäÖȾ¶¼ÈÃÎÒ»ÁȻһС£ËäÈ»²¢²»ÊÇÒ»ÇÐÍêÉÆ£¬µ«´Ó±àд´úÂëµÄ·½Ê½À´¿´£¬ËüÊǸöºê´óµÄ½ø²½¡£
ºóÀ´ÎÒ¾öÒéÇл»µ½ Vue.js£¬²»ÔÙʹÓà React¡£
React ²¢·ÇºÜ²î£¬µ«ÎÒ·¢Ã÷ËüÌ«±¿×¾£¬ÄÑÒÔ°ÑÎÕ£¬²¢ÇÒÓÐЩµØ·½µÄ´úÂë¿´ÆðÀ´ÍêȫûÓÐÂß¼ÐÔ¡£¶ø Vue ½â¾öÕâЩÎÊÌâµÄ°ì·¨ÈÃÎҸе½ºÜÇáËÉ¡£
ÔµÓÉÈçÏ£º
2. »úÄÜ
µÚÒ»À´Ì¸Ò»Ì¸»úÄÜ¡£
ÿ¸ö Web ¿ª·¢Õ߶¼»áÃæÁÙ×Å´ø¿íµÄÏÞÖÆ£¬Òò´ËÍøÒ³µÄ´óСʮ·ÖÖØÒª¡£ÍøҳԽСԽºÃ¡£¶ø´Ë¿ÌÓÉÓÚÒƶ¯ÔĶÁÆ÷µÄÁ÷ÐУ¬Õâ¸öÎÊÌâ±È¼¸ÄêÇ°¸üÖØÒª¡£
ÎÒÃÇÀ´¿´Ò»×éÊý×Ö£º
Vue ¿âµÄ´óСΪ 25.6KB¡£¶øÒªÈà React µÄ¼Ü¹¹µ½´ïÀàËƵĹ¦Ð§£¬ÐèÒª React DOM + React Router + React ºÍÆäËû²å¼þ£¬×ܹ²ÊÇ 48.8KB¡£
Vue µÃÒ»·Ö¡£
ʵ¼ÊµÄ»úÄÜÈçÏÂͼËùʾ£º
¿É¼û£¬ÕâЩ»úÄܲâÊÔÏÔʾ£¬Vue ±È React Õ¼ÓõÄÄÚ´æ¸üÉÙ£¬ÔËתËٶȸü¿ì¡£
Vue µÄäÖȾÁ÷Ë®Ï߸ü¿ì£¬ÕâÔÚ¹¹½¨¸´ÔÓÀûÓÃʱ·Ç³£ÓÐÓá£ÏîÄ¿äÖȾ¸ü¸ßЧ£¬Òò´Ë²»ÐèÒªÔÚÓÅ»¯´úÂëÉÏ˼¿¼Ì«¶à£¬´Ó¶ø°Ñ¸ü¶à¾«Éñ»¨ÔÚ¶ÔÏîÄ¿ÕæÕýÓÐÓõĹ¦Ð§ÉÏ¡£ËüÔÚÒƶ¯É豸ÉϵĻúÄÜÒ²ºÜ²»´í£¬Òò´Ë²»ÐèÒª²ÉÄÉijÖÖË㷨ʹ֮ÔÚÊÖ»úÉÏÄܸüÁ÷³©µØäÖȾ¡£
´Ó React »»³É Vue.js ʱ£¬Äã²»ÐèÒªÔÚ´óСºÍ»úÄÜ·½Ãæ×ö³öÍ×С£ÄãÄÜͬʱ¾ßÓÐÁ½Õß¡£
3. ѧϰÇúÏß
ѧϰ React »¹Ëã²»´í¡£Õû¸ö¿â¶¼»·ÈÆ Web ×é¼þ¹¹½¨£¬ÕâÒ»µãºÜºÃ¡£React µÄÖÐÐĺܺᢺܲ»ÂÒ£¬µ«ÎÒ²»¶ÏûŪÇå³þËüµÄ¸ß¼¶Â·ÓÉÅäÖá£Õâô¶à·ÓÉ¿âµÄ°æ±¾ÊÇ×öʲôµÄ£¿´Ë¿ÌµÄ°æ±¾ÊÇ4£¨+ React-router-dom£©£¬µ«ÎÒÖÕ¾¿ÓõĻ¹ÊÇ v3¡£Ò»µ©ÄãÑ¡ÖÐÁË°æ±¾£¬Ëü»¹ÊǺܺÃÓõģ¬µ«Ñ§Ï°µÄÀú³ÌÈ´·Ç³£¼²¿à¡£
µÚÈý·½¿â
´ó¶àÊýÏÖ´ú¿ò¼Ü¶¼ÓÐÒ»ÑùµÄÉè¼ÆÕÜѧ£º¼ò±ãµÄ¡¢¹¦Ð§²»Ì«¶àµÄÖÐÐÄ£¬È»ºó¼ÓÉÏÆäËûµÄ¿âÀ´ÔöÇ¿Æ书Ч¡£¼ÙÈçÆäËûµÄ¿â¶¼ÄܺÜÈÝÒ׵ء¢ÓÃͳһÖÖ·½Ê½¼¯³É£¬ÄÇô¹¹½¨Ò»¸ö¼¼ÊõÕ»»á·Ç³£¼ò±ã¡£ÔÚÎÒ¿´À´£¬ÕâÒ»²½ÖèµÄ¼ò±ã¡¢Ö±½ÓÊǷdz£ÖØÒªµÄ¡£
ReactºÍVue¶¼ÓÐÒ»Ì×¹¤¾ß°ïÄãÆô¶¯ÏîÄ¿£¬²¢ÅäÖúø÷ÖÖ¹¤¾ß¡£ÔÚReactÉú̬»·¾³ÖУ¬¸÷ÖÖ¿â´ó¸ÅºÜÄÑÊìÖª£¬ÓÉÓÚ¾³£»áÓм¸¸ö¿âÊÔͼ½â¾öͳһ¸öÎÊÌâ¡£
ÔÚÕâ¸öÎÊÌâÉÏ£¬ReactºÍVue×öµÃ¶¼²»´í¡£
´úÂëÇå³þ¶È
ÔÚÎÒ¿´À´ React µÄ´úÂëÇå³þ¶ÈºÜ²î¡£JSX ͬÒâÔÚ´úÂëÖÐǶÈë HTML ´úÂ룬ÊÇ´úÂëÇå³þ¶È·½ÃæµÄ½ÙÄÑ¡£
Ä㻹»áÅöµ½ÆäËûµÄÎÊÌâ¡£´Ó×é¼þÄ£°åÖе÷È¡°ì·¨¾³£»áÔì³Éû·¨°Ý·Ãthis£¬½á¹û²»µÃ²»ÊÖ¶¯°ó¶¨£º
<div onClick={this.someFunction.bind(this, listItem)} />
ÓÐʱºòReact»á±äµÃÍêÈ«²»ºÏÂß¼¡¡
˼¿¼µ½ÀûÓÃÖкܴó´ó¸Å»áÓõ½ºÜ¶àÇ°ÌáÍƶϣ¬JSXµÄ°ì·¨¾Í·Ç³£Ôã¸âÁË¡£Ð´Âֻصķ½Ê½¸üÏñ¸ö¼ûЦ¡£µ±È»Äã¿ÉÒÔ»»¸öÄ£°åϵͳ£¬´ÓReactÕ»ÖÐÈ¥³ýJSX£¬Ò²¿ÉÒÔÔÚVueÖÐʹÓÃJSX£¬µ«ÄDz¢²»ÊÇÔÚѧϰ¿ò¼ÜʱµÚһѧϰµÄ°ì·¨£¬Òò´ËÕâÀï²»×ö¼ÆÒé¡£
ÁíÒ»µãÊÇ£¬Vue²¢²»ÒªÇóÄã±ØÐèʹÓÃsetState»òÈκÎÏàËƵİ취¡£µ±È»Ä㻹ÊÇÒªÔÚdata°ì·¨Öж¨ÒåËùÓеÄstateÊôÐÔ£¬µ«¼ÙÈçÄãÍüÁ˶¨Ò壬ÄÇô²Ù×Ý̨ÖоͻáÏÔʾÌáÐÑ¡£Ê£ÏµĻáÖ÷¶¯ÄÚ²¿´¦Öã¬Ö»ÐèÒªÔÚ×é¼þÖÐÐÞ¸ÄÖµ¼´¿É£¬¸úʹÓÃÒ»°ãµÄ Javascript ¶ÔÏóÒ»Ñù¡£
ʹÓà React »áÅöµ½Ðí¶à´íÎó¡£¾ÍËãʵ¼ÊµÄµÀÀíºÜ¼ò±ã£¬ÕâЩ´íÎóÒ²»á¼õÂýѧϰµÄ½ø¶È¡£
ÖÁÓÚ¼òÔ¼ÐÔ£¬Óà Vue д³öµÄ´úÂëÒª±ÈÆäËû¿ò¼Üд³öµÄ´úÂëҪСÐí¶à¡£ÕâÊÇ Vue ¿ò¼Ü×îºÃµÄÒ»µã¡£Ò»Çж¼ºÜ¼ò±ã£¬Ö»Ð輸ÐмòÃ÷Ò׶®µÄ´úÂë¾Í¿ÉÒÔ±àд³ö¸´ÔӵĹ¦Ð§¡£¶øʹÓÃÆäËû¿ò¼Ü£¬ÄãÐèÒª¶àд 10%¡¢20% ÄËÖÁ 50% µÄ´úÂë¡£
ʹÓà Vue Ò²²»ÐèҪѧ̫¶à¶«Î÷¡£Ò»Çж¼ºÜÖ±²»ÑÅ¡£Êéд Vue.js ´úÂëÄܹ»ÒÔ×î½Ó½üµÄ·½Ê½±í´ï˼Ïë¡£
Vue µÄÕâÖÖÒ×ÓÃÐÔÊǸö·Ç³£ºÃµÄ¹¤¾ß£¬Ê¹µÃ½ÓÊÜ Vue ±äµÃÈÝÒ×£¬Ò²ÀûÓÚÍŶӹµÍ¨¡£²»¹ÜÊÇÄãÒª¸Ä¶¯¼¼ÊõÕ»µÄÆäËû²¿·Ö£¬»¹ÊÇÐèÒªÔÚ½ô¼±Çé¿öÏÂÏòÍŶÓÀïÔöÌí¸ü¶àÈË£¬»òÕß˵Ã÷ÄãµÄ²úÆ·£¬Vue ¶¼ÄܽÚÊ¡ÄãµÄʱ¼ä£¬´Ó¶ø½ÚÊ¡½ðÇ®¡£
ʱ¼äÔ¤ËãÒ²ºÜÈÝÒ×£¬ÓÉÓÚʵÏÖ¹¦Ð§ËùÐèµÄʱ¼ä²»»á³¬Ô½¿ª·¢ÕßÔ¤ËãµÄʱ¼ä£¬´Ó¶øÖÂʹ¸üÉÙµÄÇú½â¡¢´íÎó»ò±¯¹Û¹ÀÁ¿¡£Vue ÐèÒª¶®µÃµÄ¸ÅÄî¸üÉÙ£¬Ê¹µÃÓëÏîÄ¿¾ÀíÖ®¼äµÄ¹µÍ¨¸üÈÝÒס£
4. ½áÂÛ
²»¹ÜÊÇ´Ó´óС¡¢»úÄÜ¡¢¼ò±ãÐÔ»¹ÊÇѧϰÇúÏßÉÏÀ´¿´£¬Óµ±§ Vue.js ¾ø¶ÔÊÇ´Ë¿Ì×îºÃµÄÑ¡ÖУ¬ÄÜͬʱ½â¾öʱ¼äºÍ½ðÇ®ÎÊÌâ¡£ËüµÄÇáÁ¿»¯ºÍÐÔ
ÄÜʹµÃÄã¿ÉÒÔͬʱÔÚÏîÄ¿ÖÐʹÓÃÁ½¸ö¿ò¼Ü£¨ÈçAngularºÍVue£©£¬Òò´Ë¸üÈÝÒ×ÒÆÖ²µ½ Vue¡£
ÖÁÓÚÉçÇøºÍÁ÷Ðжȣ¬¼´±ã Vue ´Ë¿Ì»ñµÃÁËÐí¶à¹Ø×¢£¬µ«»¹ºÜÄÑ˵Ëüµ½´ïÁË React µÄÁ÷Ðг̶ȡ£µ«Ò»¸öûÓдóÐÍ IT ¹«Ë¾Ö§³ÅµÄ¿ò¼ÜÄÜÈç´Ë
Á÷ÐУ¬Õâ¸öÊÂʵ±¾Éí¾ÍÖµµÃ¹Ø×¢¡£ËüµÄÊг¡Õ¼ÓÐÂÊÒѾ¿ìËÙ´ÓÒ»¸ö²»ÎªÈËÖªµÄÏîÄ¿³É³¤ÎªÒ»¸öÇ°¶Ë¿ª·¢ÖеÄ×î´óµÄ¾ºÕùÕß¡£
Vue ÉϵÄÄ£¿éÊýÄ¿Ò²ÔÚ·ÉËÙÔö³¤£¬²¢ÇÒ¾ÍËãÄãÑ°²»µ½ÄãÐèÒªµÄÄ£¿é£¬±¾ÈËдһ¸öÒ²²»»á»¨Ì«¶àʱ¼ä¡£
Õâ¸ö¿ò¼ÜʹµÃ¶®µÃ¡¢·ÖÏíºÍ±à×ë±äµÃÈÝÒס£²»½öÔĶÁ±ðÈ˵ĴúÂë»á±äµÃºÜÈÝÒ×£¬Ð޸ıðÈ˵ÄʵÏÖÒ²²»ÄÑ¡£ÓÐÁË Vue£¬ÎÒÖ»ÓÃÁ˼¸¸öÔµÄʱ
¼ä£¬¾Í¿ÉÒÔ×ÔÐŵش¦Öø÷¸ö×ÓÏîÄ¿£¬ºÍÍⲿÈËÔ±¶ÔÏîÄ¿×ö³öµÄ¸Ä¶¯¡£ËüΪÎÒ½ÚÔ¼ÁËʱ¼ä£¬Ê¹ÎÒÄÜרÐÄÓÚϵͳÉè¼ÆÉÏ¡£
React ´ÓÉè¼ÆÉÏÒªÇóʹÓà setState µÈ¸¨Öúº¯Êý£¬¶ø±à³Ìʱ±Ø¶¨»áÓн¡ÍüʹÓõÄʱºò¡£»¹ÐèÒª»¨ºÜ´ó¾«ÉñÈ¥±àдģ°å£¬±àдģ°åµÄ·½Ê½Ò²»áÈÃÏîÄ¿±äµÃÄÑÒÔ¶®µÃºÍ±£»¤¡£
˼¿¼µ½ÔÚ´óÐÍÏîÄ¿ÖÐʹÓÃÕâЩ¿ò¼Ü£¬Ê¹Óà React ʱÄãÐèÒª°ÑÎÕÆäËû¿â£¬²¢½Ì¸øÄãµÄÍŶÓÔõÑùʹÓ᣻¹Òª´¦Öø÷ÖÖÏà¹ØµÄÎÊÌ⣨¼×²»Ï²°®Õâ¸ö¿â£¬ÒÒ²»²Ç½â°¢Ë¿âµÈ£©¡£Vue Õ»¸ü¼ò±ã£¬¸üÊʺÏÍŶÓʹÓá£
д React ´úÂëµÄʱºòÕûÌ춼ҪӦ¶Ô¸÷ÖÖÔÝʱ¼Æ²ß£¬Å¬Á¦Ð´³ö³ÉÐÄÒåµÄ´úÂ룬×îºóµÃµ½µÄÖ»ÄÜÊÇÒ»ÍÅËÒ²¿´²»Çå³þµÄ½â¾ö·½°¸¡£¾ÍÁ¬Äã±¾ÈË£¬¹ý¼¸¸öÔÂÖ®ºóÕâ¸ö½â¾ö·½°¸Ò²ºÜÄÑÔÙ¶Á¶®¡£ÄãΪÁ˹«²¼ÏîÄ¿¶ø²»µÃ²»×ö³öÐÁÀ͵ÄŬÁ¦£¬¶øµÃµ½µÄÖ»ÊÇÒ»¸öÄÑÒÔ±£»¤¡¢³äÂú´íÎóµÄ¶«Î÷£¬Á¬ÐÞ¸ÄËü¶¼Òª¾¹ýÒ»·¬Åàѵ²ÅÐС£
ÕâЩ¸ºÃæÒòËØÊÇÈκÎÈ˶¼²»µ«Ô¸ÔÚÏîÄ¿Öп´µ½µÄ¡£ÎªÊ²Ã´»¹ÒªÓ¦¶ÔÕâЩ·ÑÊÂÄØ£¿¾ÍΪÁËÉçÇøºÍµÚÈý·½¿â£¿ÎªÁË»ñµÃһС²¿·ÖºÃ´¦£¬ÎÒÃÇÒª½ÓÊÜÌ«¶à¼²¿à£¬¶ø¾ÍÁ¬ÕâһС²¿·ÖºÃ´¦£¬Ò²Ô½À´Ô½±äµÃ²»ÖØÒª¡£
React Ôø¾ÈÃÎÒµÄÉú»î¸üÈÝÒ×£¬µ«ÔÚijЩ·½ÃæÓÖÈÃʵÏÖ±äµÃ¸ü¸´ÔÓ¡£¶àÄê½ñºó£¬Vue ÖÕÓÚÈÃÎҵõ½Àí½âÍÑ¡£ËüµÄʵÏÖÓëÎÒÏëÏñÖеĿª·¢ºÜ¸½½ü£¬²¢ÇÒÔÚ¿ª·¢Àú³ÌÖУ¬³ýÁËÐèҪʵÏֵĶ«Î÷Ö®Í⣬¸ù±¾Éϲ»ÐèҪ˼¿¼ÈκÎÆäËû¶«Î÷¡£Ëü¿´ÉÏÈ¥ºÜÏñÔÉúµÄ JavaScript Âß¼£¨Ã»ÓÐsetState£¬Ò²Ã»ÓÐÓÃÀ´ÊµÏÖÇ°Ìá¹¹ÔìµÄ·Ç·²ÓÃ;£¬Ò²Ã»Óи÷ÖÖËã·¨ÄÇ£©¡£Ö»ÐèÒª°´ÄãÏëÏñµÄ·½Ê½Ð´´úÂë¾ÍÐС£ËüËٶȺܿ죬ºÜƽ°²£¬²¢ÇÒÄÜÈÃÄã¿ìÀÖ¡£ÎҺܿìÀÖ¿´µ½ Vue Ô½À´Ô½¶à±»Ç°¶Ë¿ª·¢Õߺ͹«Ë¾½ÓÊÜ£¬ÎÒµ«Ô¸ËüÄÜÍê±Ï React µÄͳÖεØλ¡£
ÒÔÉϾÍÊÇreactºÃ»¹ÊÇvuejsºÃµÄ¾ßÌåÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢°Ù·Ö°ÙÔ´ÂëÍøÆäËüÏà¹ØÎÄÕ£¡
¸ÐлÄúµÄÖ§³Ö£¬ÎÒ»á¼ÌÐøŬÁ¦µÄ!
´ò¿ªÖ§¸¶±¦É¨Ò»É¨£¬¼´¿É½øÐÐɨÂë´òÉÍŶ
°Ù·Ö°ÙÔ´ÂëÍø ½¨Òé´òÉÍ1¡«10Ôª£¬ÍÁºÀËæÒ⣬¸ÐлÄúµÄÔĶÁ£¡