ÏÖÔÚ×îÈÈÃŵÄǰ¶Ë¿ò¼ÜÓÐ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¡¢±äÁ¿ÃûÓÃ{}°ü¹ü£¬ÇÒ²»ÄܼÓË«ÒýºÅ¡£
|