Äú¿ÉÒÔ¾èÖú£¬Ö§³ÖÎÒÃǵĹ«ÒæÊÂÒµ¡£

1Ôª 10Ôª 50Ôª





ÈÏÖ¤Â룺  ÑéÖ¤Âë,¿´²»Çå³þ?Çëµã»÷Ë¢ÐÂÑéÖ¤Âë ±ØÌî



  ÇóÖª ÎÄÕ ÎÄ¿â Lib ÊÓÆµ iPerson ¿Î³Ì ÈÏÖ¤ ×Éѯ ¹¤¾ß ½²×ù Modeler   Code  
»áÔ±   
 
   
 
 
     
   
 ¶©ÔÄ
  ¾èÖú
Ò»¿´¾Í¶®µÄReactJsÈëÃŽ̳Ì-¾«»ª°æ
 
×÷Õߣºë…ö­ö­ À´Ô´£º²©¿ÍÔ° ·¢²¼ÓÚ 2015-11-23
  2051  次浏览      28
 

ÏÖÔÚ×îÈÈÃŵÄǰ¶Ë¿ò¼ÜÓÐAngularJS¡¢React¡¢BootstrapµÈ¡£×Ô´Ó½Ó´¥ÁËReactJS£¬ReactJsµÄÐéÄâDOM£¨Virtual DOM£©ºÍ×é¼þ»¯µÄ¿ª·¢ÉîÉîµÄÎüÒýÁËÎÒ£¬ÏÂÃæÀ´¸úÎÒÒ»ÆðÁìÂÔReactJsµÄ·ç²É°É~~ ÎÄÕÂÓе㳤£¬ÄÍÐĶÁÍ꣬Äã»áÓкܴóÊÕ»ñŶ~

Ò»¡¢ReactJS¼ò½é

React ÆðÔ´ÓÚ Facebook µÄÄÚ²¿ÏîÄ¿£¬ÒòΪ¸Ã¹«Ë¾¶ÔÊг¡ÉÏËùÓÐ JavaScript MVC ¿ò¼Ü£¬¶¼²»ÂúÒ⣬¾Í¾ö¶¨×Ô¼ºÐ´Ò»Ì×£¬ÓÃÀ´¼ÜÉè Instagram µÄÍøÕ¾¡£×ö³öÀ´ÒԺ󣬷¢ÏÖÕâÌ×¶«Î÷ºÜºÃÓ㬾ÍÔÚ2013Äê5Ô¿ªÔ´ÁË¡£ÓÉÓÚ React µÄÉè¼ÆË¼Ï뼫Æä¶ÀÌØ£¬ÊôÓÚ¸ïÃüÐÔ´´Ð£¬ÐÔÄܳöÖÚ£¬´úÂëÂß¼­È´·Ç³£¼òµ¥¡£ËùÒÔ£¬Ô½À´Ô½¶àµÄÈË¿ªÊ¼¹Ø×¢ºÍʹÓã¬ÈÏΪËü¿ÉÄÜÊǽ«À´ Web ¿ª·¢µÄÖ÷Á÷¹¤¾ß¡£

ReactJS¹ÙÍøµØÖ·£ºhttp://facebook.github.io/react/

GithubµØÖ·£ºhttps://github.com/facebook/react

¶þ¡¢¶ÔReactJSµÄÈÏʶ¼°ReactJSµÄÓŵã

Ê×ÏÈ£¬¶ÔÓÚReact£¬ÓÐһЩÈÏʶÎóÇø£¬ÕâÀïÏÈ×ܽáһϣº

React²»ÊÇÒ»¸öÍêÕûµÄMVC¿ò¼Ü£¬×î¶à¿ÉÒÔÈÏΪÊÇMVCÖеÄV£¨View£©£¬ÉõÖÁReact²¢²»·Ç³£ÈÏ¿ÉMVC¿ª·¢Ä£Ê½£»

ReactµÄ·þÎñÆ÷¶ËRenderÄÜÁ¦Ö»ÄÜËãÊÇÒ»¸ö½õÉÏÌí»¨µÄ¹¦ÄÜ£¬²¢²»ÊÇÆäºËÐijö·¢µã£¬ÊÂʵÉÏReact¹Ù·½Õ¾µã¼¸ºõûÓÐÌá¼°ÆäÔÚ·þÎñÆ÷¶ËµÄÓ¦Óã»

ÓÐÈËÄÃReactºÍWeb ComponentÏàÌá²¢ÂÛ£¬µ«Á½Õß²¢²»ÊÇÍêÈ«µÄ¾ºÕù¹ØÏµ£¬ÄãÍêÈ«¿ÉÒÔÓÃReactÈ¥¿ª·¢Ò»¸öÕæÕýµÄWeb Component£»

React²»ÊÇÒ»¸öеÄÄ£°åÓïÑÔ£¬JSXÖ»ÊÇÒ»¸ö±íÏó£¬Ã»ÓÐJSXµÄReactÒ²Äܹ¤×÷¡£

1¡¢ReactJSµÄ±³¾°ºÍÔ­Àí

ÔÚWeb¿ª·¢ÖУ¬ÎÒÃÇ×ÜÐèÒª½«±ä»¯µÄÊý¾Ýʵʱ·´Ó¦µ½UIÉÏ£¬Õâʱ¾ÍÐèÒª¶ÔDOM½øÐвÙ×÷¡£¶ø¸´ÔÓ»òƵ·±µÄDOM²Ù×÷ͨ³£ÊÇÐÔÄÜÆ¿¾±²úÉúµÄÔ­Òò£¨ÈçºÎ½øÐиßÐÔÄܵĸ´ÔÓDOM²Ù×÷ͨ³£ÊǺâÁ¿Ò»¸öǰ¶Ë¿ª·¢ÈËÔ±¼¼ÄܵÄÖØÒªÖ¸±ê£©¡£ReactΪ´ËÒýÈëÁËÐéÄâDOM£¨Virtual DOM£©µÄ»úÖÆ£ºÔÚä¯ÀÀÆ÷¶ËÓÃJavascriptʵÏÖÁËÒ»Ì×DOM API¡£»ùÓÚReact½øÐпª·¢Ê±ËùÓеÄDOM¹¹Ôì¶¼ÊÇͨ¹ýÐéÄâDOM½øÐУ¬Ã¿µ±Êý¾Ý±ä»¯Ê±£¬React¶¼»áÖØÐ¹¹½¨Õû¸öDOMÊ÷£¬È»ºóReact½«µ±Ç°Õû¸öDOMÊ÷ºÍÉÏÒ»´ÎµÄDOMÊ÷½øÐжԱȣ¬µÃµ½DOM½á¹¹µÄÇø±ð£¬È»ºó½ö½ö½«ÐèÒª±ä»¯µÄ²¿·Ö½øÐÐʵ¼ÊµÄä¯ÀÀÆ÷DOM¸üС£

¶øÇÒReactÄܹ»Åú´¦ÀíÐéÄâDOMµÄˢУ¬ÔÚÒ»¸öʼþÑ­»·£¨Event Loop£©ÄÚµÄÁ½´ÎÊý¾Ý±ä»¯»á±»ºÏ²¢£¬ÀýÈçÄãÁ¬ÐøµÄÏȽ«½ÚµãÄÚÈÝ´ÓA±ä³ÉB£¬È»ºóÓÖ´ÓB±ä³ÉA£¬React»áÈÏΪUI²»·¢ÉúÈκα仯£¬¶øÈç¹ûͨ¹ýÊÖ¶¯¿ØÖÆ£¬ÕâÖÖÂß¼­Í¨³£ÊǼ«Æä¸´Ôӵġ£¾¡¹Üÿһ´Î¶¼ÐèÒª¹¹ÔìÍêÕûµÄÐéÄâDOMÊ÷£¬µ«ÊÇÒòΪÐéÄâDOMÊÇÄÚ´æÊý¾Ý£¬ÐÔÄÜÊǼ«¸ßµÄ£¬¶ø¶Ôʵ¼ÊDOM½øÐвÙ×÷µÄ½ö½öÊÇDiff²¿·Ö£¬Òò¶øÄÜ´ïµ½Ìá¸ßÐÔÄܵÄÄ¿µÄ¡£ÕâÑù£¬ÔÚ±£Ö¤ÐÔÄܵÄͬʱ£¬¿ª·¢Õß½«²»ÔÙÐèÒª¹Ø×¢Ä³¸öÊý¾ÝµÄ±ä»¯ÈçºÎ¸üе½Ò»¸ö»ò¶à¸ö¾ßÌåµÄDOMÔªËØ£¬¶øÖ»ÐèÒª¹ØÐÄÔÚÈÎÒâÒ»¸öÊý¾Ý״̬Ï£¬Õû¸ö½çÃæÊÇÈçºÎRenderµÄ¡£

Èç¹ûÄãÏñÔÚ90Äê´úÄÇÑùд¹ý·þÎñÆ÷¶ËRenderµÄ´¿WebÒ³ÃæÄÇôӦ¸ÃÖªµÀ£¬·þÎñÆ÷¶ËËùÒª×öµÄ¾ÍÊǸù¾ÝÊý¾ÝRender³öHTMLË͵½ä¯ÀÀÆ÷¶Ë¡£Èç¹ûÕâʱÒòΪÓû§µÄÒ»¸öµã»÷ÐèÒª¸Ä±äij¸ö״̬ÎÄ×Ö£¬ÄÇôҲÊÇͨ¹ýË¢ÐÂÕû¸öÒ³ÃæÀ´Íê³ÉµÄ¡£·þÎñÆ÷¶Ë²¢²»ÐèÒªÖªµÀÊÇÄÄһС¶ÎHTML·¢ÉúÁ˱仯£¬¶øÖ»ÐèÒª¸ù¾ÝÊý¾ÝË¢ÐÂÕû¸öÒ³Ãæ¡£»»¾ä»°Ëµ£¬ÈκÎUIµÄ±ä»¯¶¼ÊÇͨ¹ýÕûÌåË¢ÐÂÀ´Íê³ÉµÄ¡£¶øReact½«ÕâÖÖ¿ª·¢Ä£Ê½ÒÔ¸ßÐÔÄܵķ½Ê½´øµ½ÁËǰ¶Ë£¬Ã¿×öÒ»µã½çÃæµÄ¸üУ¬Äã¶¼¿ÉÒÔÈÏΪˢÐÂÁËÕû¸öÒ³Ãæ¡£ÖÁÓÚÈçºÎ½øÐоֲ¿¸üÐÂÒÔ±£Ö¤ÐÔÄÜ£¬ÔòÊÇReact¿ò¼ÜÒªÍê³ÉµÄÊÂÇé¡£

½èÓÃFacebook½éÉÜReactµÄÊÓÆµÖÐÁÄÌìÓ¦ÓõÄÀý×Ó£¬µ±Ò»ÌõеÄÏûÏ¢¹ýÀ´Ê±£¬´«Í³¿ª·¢µÄ˼·ÈçÉÏͼ£¬ÄãµÄ¿ª·¢¹ý³ÌÐèÒªÖªµÀÄÄÌõÊý¾Ý¹ýÀ´ÁË£¬ÈçºÎ½«ÐµÄDOM½áµãÌí¼Óµ½µ±Ç°DOMÊ÷ÉÏ£»¶ø»ùÓÚReactµÄ¿ª·¢Ë¼Â·ÈçÏÂͼ£¬ÄãÓÀÔ¶Ö»ÐèÒª¹ØÐÄÊý¾ÝÕûÌ壬Á½´ÎÊý¾ÝÖ®¼äµÄUIÈçºÎ±ä»¯£¬ÔòÍêÈ«½»¸ø¿ò¼ÜÈ¥×ö¡£¿ÉÒÔ¿´µ½£¬Ê¹ÓÃReact´ó´ó½µµÍÁËÂß¼­¸´ÔÓÐÔ£¬Òâζ×Å¿ª·¢ÄѶȽµµÍ£¬¿ÉÄܲúÉúBugµÄ»ú»áÒ²¸üÉÙ¡£

2¡¢×é¼þ»¯

ÐéÄâDOM(virtual-dom)²»½ö´øÀ´Á˼òµ¥µÄUI¿ª·¢Âß¼­£¬Í¬Ê±Ò²´øÀ´ÁË×é¼þ»¯¿ª·¢µÄ˼Ï룬Ëùν×é¼þ£¬¼´·â×°ÆðÀ´µÄ¾ßÓжÀÁ¢¹¦ÄܵÄUI²¿¼þ¡£ReactÍÆ¼öÒÔ×é¼þµÄ·½Ê½È¥ÖØÐÂ˼¿¼UI¹¹³É£¬½«UIÉÏÿһ¸ö¹¦ÄÜÏà¶Ô¶ÀÁ¢µÄÄ£¿é¶¨Òå³É×é¼þ£¬È»ºó½«Ð¡µÄ×é¼þͨ¹ý×éºÏ»òÕßǶÌ׵ķ½Ê½¹¹³É´óµÄ×é¼þ£¬×îÖÕÍê³ÉÕûÌåUIµÄ¹¹½¨¡£ÀýÈ磬FacebookµÄinstagram.comÕûÕ¾¶¼²ÉÓÃÁËReactÀ´¿ª·¢£¬Õû¸öÒ³Ãæ¾ÍÊÇÒ»¸ö´óµÄ×é¼þ£¬ÆäÖаüº¬ÁËǶÌ׵ĴóÁ¿ÆäËü×é¼þ£¬´ó¼ÒÓÐÐËȤ¿ÉÒÔ¿´ÏÂËü±³ºóµÄ´úÂë¡£

Èç¹û˵MVCµÄ˼ÏëÈÃÄã×öµ½ÊÓͼ-Êý¾Ý-¿ØÖÆÆ÷µÄ·ÖÀ룬ÄÇô×é¼þ»¯µÄ˼¿¼·½Ê½ÔòÊÇ´øÀ´ÁËUI¹¦ÄÜÄ£¿éÖ®¼äµÄ·ÖÀë¡£ÎÒÃÇͨ¹ýÒ»¸öµäÐ͵ÄBlogÆÀÂÛ½çÃæÀ´¿´MVCºÍ×é¼þ»¯¿ª·¢Ë¼Â·µÄÇø±ð¡£

¶ÔÓÚMVC¿ª·¢Ä£Ê½À´Ëµ£¬¿ª·¢Õß½«ÈýÕß¶¨Òå³É²»Í¬µÄÀ࣬ʵÏÖÁ˱íÏÖ£¬Êý¾Ý£¬¿ØÖƵķÖÀë¡£¿ª·¢Õ߸ü¶àµÄÊÇ´Ó¼¼ÊõµÄ½Ç¶ÈÀ´¶ÔUI½øÐвð·Ö£¬ÊµÏÖËÉñîºÏ¡£

¶ÔÓÚReact¶øÑÔ£¬ÔòÍêÈ«ÊÇÒ»¸öеÄ˼·£¬¿ª·¢Õß´Ó¹¦ÄܵĽǶȳö·¢£¬½«UI·Ö³É²»Í¬µÄ×é¼þ£¬Ã¿¸ö×é¼þ¶¼¶ÀÁ¢·â×°¡£

ÔÚReactÖУ¬Äã°´ÕÕ½çÃæÄ£¿é×ÔÈ»»®·ÖµÄ·½Ê½À´×éÖ¯ºÍ±àдÄãµÄ´úÂ룬¶ÔÓÚÆÀÂÛ½çÃæ¶øÑÔ£¬Õû¸öUIÊÇÒ»¸öͨ¹ýС×é¼þ¹¹³ÉµÄ´ó×é¼þ£¬Ã¿¸ö×é¼þÖ»¹ØÐÄ×Ô¼º²¿·ÖµÄÂß¼­£¬±Ë´Ë¶ÀÁ¢¡£

ReactÈÏΪһ¸ö×é¼þÓ¦¸Ã¾ßÓÐÈçÏÂÌØÕ÷£º

£¨1£©¿É×éºÏ£¨Composeable£©£ºÒ»¸ö×é¼þÒ×ÓÚºÍÆäËü×é¼þÒ»ÆðʹÓ㬻òÕßǶÌ×ÔÚÁíÒ»¸ö×é¼þÄÚ²¿¡£Èç¹ûÒ»¸ö×é¼þÄÚ²¿´´½¨ÁËÁíÒ»¸ö×é¼þ£¬ÄÇô˵¸¸×é¼þÓµÓУ¨own£©Ëü´´½¨µÄ×Ó×é¼þ£¬Í¨¹ýÕâ¸öÌØÐÔ£¬Ò»¸ö¸´ÔÓµÄUI¿ÉÒÔ²ð·Ö³É¶à¸ö¼òµ¥µÄUI×é¼þ£»

£¨2£©¿ÉÖØÓã¨Reusable£©£ºÃ¿¸ö×é¼þ¶¼ÊǾßÓжÀÁ¢¹¦Äܵģ¬Ëü¿ÉÒÔ±»Ê¹ÓÃÔÚ¶à¸öUI³¡¾°£»

£¨3£©¿Éά»¤£¨Maintainable£©£ºÃ¿¸öСµÄ×é¼þ½ö½ö°üº¬×ÔÉíµÄÂß¼­£¬¸üÈÝÒ×±»Àí½âºÍά»¤£»

¶þ¡¢ÏÂÔØReactJS£¬±àдHello£¬world

ReactJsÏÂÔØ·Ç³£¼òµ¥£¬ÎªÁË·½±ã´ó¼ÒÏÂÔØ£¬ÕâÀïÔÙÒ»´Î¸ø³öÏÂÔØµØÖ·http://facebook.github.io/react/downloads.html,ÏÂÔØÍê³Éºó£¬ÎÒô¿´µ½µÄÊÇÒ»¸öѹËõ°ü¡£½âѹºó£¬ÎÒÃÇн¨Ò»¸öhtmlÎļþ£¬ÒýÓÃreact.jsºÍJSXTransformer.jsÕâÁ½¸öjsÎļþ¡£htmlÄ£°åÈçÏÂ(js·¾¶¸Ä³É×Ô¼ºµÄ):

<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
// ** Our code goes here! **
</script>
</body>
</html>

ÕâÀï´ó¼Ò¿ÉÄÜ»áÆæ¹Ö£¬ÎªÊ²Ã´scriptµÄtypeÊÇtext/jsx,ÕâÊÇÒòΪ React ¶ÀÓÐµÄ JSX Óï·¨£¬¸ú JavaScript ²»¼æÈÝ¡£·²ÊÇʹÓà JSX µÄµØ·½£¬¶¼Òª¼ÓÉÏ type="text/jsx" ¡£ Æä´Î£¬React ÌṩÁ½¸ö¿â£º react.js ºÍ JSXTransformer.js £¬ËüÃDZØÐëÊ×ÏȼÓÔØ¡£ÆäÖУ¬JSXTransformer.js µÄ×÷ÓÃÊǽ« JSX Ó﷨תΪ JavaScript Óï·¨¡£ÕâÒ»²½ºÜÏûºÄʱ¼ä£¬Êµ¼ÊÉÏÏßµÄʱºò£¬Ó¦¸Ã½«Ëü·Åµ½·þÎñÆ÷Íê³É¡£

µ½ÕâÀïÎÒÃǾͿÉÒÔ¿ªÊ¼±àд´úÂëÁË£¬Ê×ÏÈÎÒÃÇÏÈÀ´ÈÏʶһÏÂReactJsÀïÃæµÄReact.render·½·¨£º

React.render ÊÇ React µÄ×î»ù±¾·½·¨£¬ÓÃÓÚ½«Ä£°åתΪ HTML ÓïÑÔ£¬²¢²åÈëÖ¸¶¨µÄ DOM ½Úµã¡£

ÏÂÃæÎÒÃÇÔÚscript±êÇ©ÀïÃæ±àд´úÂ룬À´Êä³öHello£¬world£¬´úÂëÈçÏ£º

React.render(
<h1>Hello, world!</h1>,
document.getElementById('container')
);

ÕâÀïÐèҪעÒâµÄÊÇ£¬react²¢²»ÒÀÀµjQuery£¬µ±È»ÎÒÃÇ¿ÉÒÔʹÓÃjQuery£¬µ«ÊÇrenderÀïÃæµÚ¶þ¸ö²ÎÊý±ØÐëʹÓÃJavaScriptÔ­ÉúµÄgetElementByID·½·¨£¬²»ÄÜʹÓÃjQueryÀ´Ñ¡È¡DOM½Úµã¡£

È»ºó£¬ÔÚä¯ÀÀÆ÷´ò¿ªÕâ¸öÒ³Ãæ£¬¾Í¿ÉÒÔ¿´µ½ä¯ÀÀÆ÷ÏÔʾһ¸ö´ó´óµÄHello£¬world,ÒòΪÎÒÃÇÓÃÁË<h1>±êÇ©¡£

µ½ÕâÀ¹§Ï²£¬ÄãÒѾ­²½ÈëÁËReactJSµÄ´óÃÅ~~ÏÂÃæ£¬ÈÃÎÒÃÇÀ´½øÒ»²½Ñ§Ï°ReactJs°É~~

Èý¡¢JsxÓï·¨

HTML ÓïÑÔÖ±½ÓдÔÚ JavaScript ÓïÑÔÖ®ÖУ¬²»¼ÓÈκÎÒýºÅ£¬Õâ¾ÍÊÇ JSX µÄÓï·¨£¬ËüÔÊÐí HTML Óë JavaScript µÄ»ìд£¬Á˽â¹ýAngularJsµÄ¿´µ½ÏÂÃæµÄ´úÂëÒ»¶¨»á¸Ð¾õºÜÊìϤµÄ£¬ÎÒÃÇÀ´¿´´úÂ룺

var names = ['Jack', 'Tom', 'Alice'];

React.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('container')
);

ÕâÀïÎÒÃÇÉùÃ÷ÁËÒ»¸önamesÊý×飬Ȼºó±éÀúÔÚÇ°Ãæ¼ÓÉÏHello,Êä³öµ½DOMÖУ¬Êä³ö½á¹ûÈçÏ£º

JSX ÔÊÐíÖ±½ÓÔÚÄ£°å²åÈë JavaScript ±äÁ¿¡£Èç¹ûÕâ¸ö±äÁ¿ÊÇÒ»¸öÊý×飬Ôò»áÕ¹¿ªÕâ¸öÊý×éµÄËùÓгÉÔ±£¬´úÂëÈçÏ£º

var arr = [
<h1>Hello world!</h1>,
<h2>React is perfect!</h2>,
];
React.render(
<div>*{arr}*</div>,
document.getElementById('container')
);

ÏÔʾ½á¹ûÈçÏ£º

ÕâÀïµÄÐǺÅÖ»ÊÇ×ö±êʶÓõ쬴ó¼Ò²»Òª±»ËýÃÔ»óÁË~~

Äã¿´µ½ÕâÀ˵Ã÷Äã¶ÔReact»¹ÊÇÂù¸ÐÐËȤµÄ£¬¹§Ï²Ä㣬¼á³ÖÏÂÀ´ÁË£¬ÄÇôÏÂÃæ£¬ÎÒÃÇ¿ªÊ¼Ñ§Ï°ReactÀïÃæµÄ"Õæ¹¦·ò"ÁË~~ Are¡¡you ready?

ËÄ¡¢ReactJS×é¼þ

1¡¢×é¼þÊôÐÔ

Ç°ÃæËµÁË£¬ReactJSÊÇ»ùÓÚ×é¼þ»¯µÄ¿ª·¢£¬ÏÂÃæÎÒÃÇ¿ªÊ¼À´Ñ§Ï°ReactJSÀïÃæµÄ×é¼þ£¬React ÔÊÐí½«´úÂë·â×°³É×é¼þ£¨component£©£¬È»ºóÏñ²åÈëÆÕͨ HTML ±êǩһÑù£¬ÔÚÍøÒ³ÖвåÈëÕâ¸ö×é¼þ¡£React.createClass ·½·¨¾ÍÓÃÓÚÉú³ÉÒ»¸ö×é¼þÀà¡£

ÏÂÃæ£¬ÎÒÃÇÀ´±àдµÚÒ»¸ö×é¼þGreet£¬ÓÐÒ»¸önameÊôÐÔ£¬È»ºóÊä³öhello + nameµÄÖµ£¬´úÂëÈçÏ£º

var Greet = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});

React.render(
<Greet name="Jack" />,
document.getElementById('container')
);

¿´µ½Õâ¶Î´úÂ룬½Ó´¥¹ýAngularJSµÄÅóÓÑÃÇÊDz»ÊÇÓÐÒ»ÖÖÊìϤµÄ¸Ð¾õ£¬²»¹ýÕâÀïÓм¸µãÐèҪעÒ⣺

1¡¢»ñÈ¡ÊôÐÔµÄÖµÓõÄÊÇthis.props.ÊôÐÔÃû

2¡¢´´½¨µÄ×é¼þÃû³ÆÊ××Öĸ±ØÐë´óд¡£

3¡¢ÎªÔªËØÌí¼ÓcssµÄclassʱ£¬ÒªÓÃclassName.

4¡¢×é¼þµÄstyleÊôÐÔµÄÉèÖ÷½Ê½Ò²ÖµµÃ×¢Ò⣬Ҫд³Éstyle={{width: this.state.witdh}}

2¡¢×é¼þ״̬

×é¼þÃâ²»ÁËÒªÓëÓû§»¥¶¯£¬React µÄÒ»´ó´´Ð£¬¾ÍÊǽ«×é¼þ¿´³ÉÊÇÒ»¸ö״̬»ú£¬Ò»¿ªÊ¼ÓÐÒ»¸ö³õʼ״̬£¬È»ºóÓû§»¥¶¯£¬µ¼ÖÂ״̬±ä»¯£¬´Ó¶ø´¥·¢ÖØÐÂäÖȾ UI ¡£ÏÂÃæÎÒÃÇÀ´±àдһ¸öСÀý×Ó£¬Ò»¸öÎı¾¿òºÍÒ»¸öbutton£¬Í¨¹ýµã»÷button¿ÉÒԸıäÎı¾¿òµÄ±à¼­×´Ì¬£¬½ûÖ¹±à¼­ºÍÔÊÐí±à¼­¡£Í¨¹ýÕâ¸öÀý×ÓÀ´Àí½âReactJSµÄ״̬»úÖÆ¡£ÏÈ¿´´úÂ룺

var InputState = React.createClass({
getInitialState: function() {
return {enable: false};
},
handleClick: function(event) {
this.setState({enable: !this.state.enable});
},
render: function() {

return (
<p>
<input type="text" disabled={this.state.enable} />
<button onClick={this.handleClick}>Change State</button>
</p>
);
}
});

React.render(
<InputState />,
document.getElementById('container')
);

ÕâÀÎÒÃÇÓÖʹÓõ½ÁËÒ»¸ö·½·¨getInitialState,Õâ¸öº¯ÊýÔÚ×é¼þ³õʼ»¯µÄʱºòÖ´ÐУ¬±ØÐè·µ»ØNULL»òÕßÒ»¸ö¶ÔÏó¡£ÕâÀïÎÒÃÇ¿ÉÒÔͨ¹ýthis.state.ÊôÐÔÃûÀ´·ÃÎÊÊôÐÔÖµ£¬ÕâÀïÎÒÃǽ«enableÕâ¸öÖµ¸úinputµÄdisabled°ó¶¨£¬µ±ÒªÐÞ¸ÄÕâ¸öÊôÐÔֵʱ£¬ÒªÊ¹ÓÃsetState·½·¨¡£ÎÒÃÇÉùÃ÷handleClick·½·¨£¬À´°ó¶¨µ½buttonÉÏÃæ£¬ÊµÏָıästate.enableµÄÖµ.

Ô­Àí·ÖÎö£º

µ±Óû§µã»÷×é¼þ£¬µ¼ÖÂ״̬±ä»¯£¬this.setState ·½·¨¾ÍÐÞ¸Ä״ֵ̬£¬Ã¿´ÎÐÞ¸ÄÒÔºó£¬×Ô¶¯µ÷Óà this.render ·½·¨£¬ÔÙ´ÎäÖȾ×é¼þ¡£

ÕâÀïÖµµÃ×¢ÒâµÄ¼¸µãÈçÏ£º

1¡¢getInitialStateº¯Êý±ØÐëÓзµ»ØÖµ£¬¿ÉÒÔÊÇNULL»òÕßÒ»¸ö¶ÔÏó¡£

2¡¢·ÃÎÊstateµÄ·½·¨ÊÇthis.state.ÊôÐÔÃû¡£

3¡¢±äÁ¿ÓÃ{}°ü¹ü£¬²»ÐèÒªÔÙ¼ÓË«ÒýºÅ¡£

3¡¢×é¼þµÄÉúÃüÖÜÆÚ¡¡¡¡

×é¼þµÄÉúÃüÖÜÆÚ·Ö³ÉÈý¸ö״̬£º

Mounting£ºÒѲåÈëÕæÊµ DOM

Updating£ºÕýÔÚ±»ÖØÐÂäÖȾ

Unmounting£ºÒÑÒÆ³öÕæÊµ DOM

React Ϊÿ¸ö״̬¶¼ÌṩÁËÁ½ÖÖ´¦Àíº¯Êý£¬will º¯ÊýÔÚ½øÈë״̬֮ǰµ÷Óã¬did º¯ÊýÔÚ½øÈë״̬֮ºóµ÷Óã¬ÈýÖÖ״̬¹²¼ÆÎåÖÖ´¦Àíº¯Êý¡£

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

´ËÍ⣬React »¹ÌṩÁ½ÖÖÌØÊâ״̬µÄ´¦Àíº¯Êý¡£

componentWillReceiveProps(object nextProps)£ºÒѼÓÔØ×é¼þÊÕµ½ÐµIJÎÊýʱµ÷ÓÃ

shouldComponentUpdate(object nextProps, object nextState)£º×é¼þÅжÏÊÇ·ñÖØÐÂäÖȾʱµ÷ÓÃ

ÏÂÃæÀ´¿´Ò»¸öÀý×Ó£º

var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},

componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},

render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});

React.render(
<Hello name="world"/>,
document.body
);

ÉÏÃæ´úÂëÔÚhello×é¼þ¼ÓÔØÒÔºó£¬Í¨¹ý componentDidMount ·½·¨ÉèÖÃÒ»¸ö¶¨Ê±Æ÷£¬Ã¿¸ô100ºÁÃ룬¾ÍÖØÐÂÉèÖÃ×é¼þµÄ͸Ã÷¶È£¬´Ó¶øÒý·¢ÖØÐÂäÖȾ¡£

4¡¢×é¼þµÄǶÌ×

ReactÊÇ»ùÓÚ×é¼þ»¯µÄ¿ª·¢£¬ÄÇô×é¼þ»¯¿ª·¢×î´óµÄÓŵãÊÇʲô£¿ºÁÎÞÒÉÎÊ£¬µ±È»ÊǸ´Óã¬ÏÂÃæÎÒÃÇÀ´¿´¿´ReactÖе½µ×ÊÇÈçºÎʵÏÖ×é¼þµÄ¸´Óõģ¬ÕâÀïÎÒÃÇ»¹Ð´Ò»¸öÀý×ÓÀ´Ëµ°É£¬´úÂëÈçÏ£º

var Search = React.createClass({
render: function() {
return (
<div>
{this.props.searchType}:<input type="text" />
<button>Search</button>
</div>
);
}
});
var Page = React.createClass({
render: function() {
return (
<div>
<h1>Welcome!</h1>
<Search searchType="Title" />
<Search searchType="Content" />
</div>
);
}
});
React.render(
<Page />,
document.getElementById('container')
);

ÕâÀïÎÒÃÇ´´½¨ÁËÒ»¸öSearch×é¼þ£¬È»ºóÓÖ´´½¨ÁËÒ»¸öPage×é¼þ£¬È»ºóÎÒÃÇÔÚPage×é¼þÖе÷ÓÃSearch×é¼þ£¬²¢ÇÒµ÷ÓÃÁËÁ½´Î£¬ÕâÀïÎÒÃÇͨ¹ýÊôÐÔsearchType´«ÈëÖµ£¬×îÖÕÏÔʾ½á¹ûÈçͼ£º

Îå¡¢ReactJsС½á

¹ØÓÚReactJS½ñÌì¾ÍÏÈѧϰµ½ÕâÀïÁË£¬ÏÂÃæÀ´×ܽáһϣ¬Ö÷ÒªÓÐÒÔϼ¸µã£º

1¡¢ReactJsÊÇ»ùÓÚ×é¼þ»¯µÄ¿ª·¢£¬ËùÒÔ×îÖÕÄãµÄÒ³ÃæÓ¦¸ÃÊÇÓÉÈô¸É¸öС×é¼þ×é³ÉµÄ´ó×é¼þ¡£

2¡¢¿ÉÒÔͨ¹ýÊôÐÔ£¬½«Öµ´«µÝµ½×é¼þÄÚ²¿£¬Í¬ÀíÒ²¿ÉÒÔͨ¹ýÊôÐÔ½«ÄÚ²¿µÄ½á¹û´«µÝµ½¸¸¼¶×é¼þ(Áô¸ø´ó¼ÒÑо¿)£»Òª¶ÔijЩֵµÄ±ä»¯×öDOM²Ù×÷µÄ£¬Òª°ÑÕâЩֵ·Åµ½stateÖС£

3¡¢Îª×é¼þÌí¼ÓÍⲿcssÑùʽʱ£¬ÀàÃûÓ¦¸Ãд³ÉclassName¶ø²»ÊÇclass;Ìí¼ÓÄÚ²¿Ñùʽʱ£¬Ó¦¸ÃÊÇstyle={{opacity: this.state.opacity}}¶ø²»ÊÇstyle="opacity:{this.state.opacity};"¡£

4¡¢×é¼þÃû³ÆÊ××Öĸ±ØÐë´óд¡£

5¡¢±äÁ¿ÃûÓÃ{}°ü¹ü£¬ÇÒ²»ÄܼÓË«ÒýºÅ¡£

   
2051 ´Îä¯ÀÀ       28
Ïà¹ØÎÄÕÂ

Java΢·þÎñÐÂÉú´úÖ®Nacos
ÉîÈëÀí½âJavaÖеÄÈÝÆ÷
JavaÈÝÆ÷Ïê½â
Java´úÂëÖÊÁ¿¼ì²é¹¤¾ß¼°Ê¹Óð¸Àý
Ïà¹ØÎĵµ

JavaÐÔÄÜÓÅ»¯
Spring¿ò¼Ü
SSM¿ò¼Ü¼òµ¥¼òÉÜ
´ÓÁ㿪ʼѧjava±à³Ì¾­µä
Ïà¹Ø¿Î³Ì

¸ßÐÔÄÜJava±à³ÌÓëϵͳÐÔÄÜÓÅ»¯
JavaEE¼Ü¹¹¡¢ Éè¼ÆÄ£Ê½¼°ÐÔÄܵ÷ÓÅ
Java±à³Ì»ù´¡µ½Ó¦Óÿª·¢
JAVAÐéÄâ»úÔ­ÀíÆÊÎö
×îл¼Æ»®
DeepSeek´óÄ£ÐÍÓ¦Óÿª·¢ 6-12[ÏÃÃÅ]
È˹¤ÖÇÄÜ.»úÆ÷ѧϰTensorFlow 6-22[Ö±²¥]
»ùÓÚ UML ºÍEA½øÐзÖÎöÉè¼Æ 6-30[±±¾©]
ǶÈëʽÈí¼þ¼Ü¹¹-¸ß¼¶Êµ¼ù 7-9[±±¾©]
Óû§ÌåÑé¡¢Ò×ÓÃÐÔ²âÊÔÓëÆÀ¹À 7-25[Î÷°²]
ͼÊý¾Ý¿âÓë֪ʶͼÆ× 8-23[±±¾©]

Java ÖеÄÖÐÎıàÂëÎÊÌâ
Java»ù´¡ÖªÊ¶µÄÈýÊ®¸ö¾­µäÎÊ´ð
Íæ×ª Java Web Ó¦Óÿª·¢
ʹÓÃSpring¸üºÃµØ´¦ÀíStruts
ÓÃEclipse¿ª·¢iPhone WebÓ¦ÓÃ
²å¼þϵͳ¿ò¼Ü·ÖÎö

Struts+Spring+Hibernate
»ùÓÚJ2EEµÄWeb 2.0Ó¦Óÿª·¢
J2EEÉè¼ÆÄ£Ê½ºÍÐÔÄܵ÷ÓÅ
Java EE 5ÆóÒµ¼¶¼Ü¹¹Éè¼Æ
Javaµ¥Ôª²âÊÔ·½·¨Óë¼¼Êõ
Java±à³Ì·½·¨Óë¼¼Êõ

Struts+Spring+Hibernate/EJB+ÐÔÄÜÓÅ»¯
»ªÏÄ»ù½ð ActiveMQ Ô­ÀíÓë¹ÜÀí
ijÃñº½¹«Ë¾ Java»ù´¡±à³Ìµ½Ó¦Óÿª·¢
ij·çµç¹«Ë¾ Java Ó¦Óÿª·¢Æ½Ì¨ÓëÇ¨ÒÆ
ÈÕÕÕ¸Û J2EEÓ¦Óÿª·¢¼¼Êõ¿ò¼ÜÓëʵ¼ù
ij¿ç¹ú¹«Ë¾ ¹¤×÷Á÷¹ÜÀíJBPM
¶«·½º½¿Õ¹«Ë¾ ¸ß¼¶J2EE¼°ÆäÇ°ÑØ¼¼Êõ