Reactʵս

µÚ Ò»²¿·Ö ³õʶReact
µÚ 1Õ ³õʶReact 3
1.1 ³õʶReact 3
1.1.1 ±¾ÊéµÄÊÜÖÚ 6
1.1.2 ¹¤¾ß˵Ã÷ 6
1.1.3 Ë­ÔÚʹÓÃReact 7
1.2 React²»ÄÜ×öʲô 8
1.3 ÐéÄâDOM 11
1.3.1 DOM 11
1.3.2 ÐéÄâDOM 13
1.3.3 ¸üÐÂÓë²îÒì±È¶Ô 13
1.3.4 ÐéÄâDOM£º¿ÊÇóËÙ¶È 14
1.4 ×é¼þ£ºReactµÄ»ù±¾µ¥Ôª 14
1.4.1 ×é¼þ¸ÅÀÀ 15
1.4.2 ReactÖеÄ×é¼þ£º·â×°Ó븴Óà 16
1.5 ꁦReact 16
1.6 С½á 17

µÚ 2Õ £ºÎÒÃÇµÄµÚ Ò»¸ö×é¼þ 19
2.1 React×é¼þ½éÉÜ 21
2.1.1 Àí½âÓ¦ÓÃÊý¾Ý 22
2.1.2 ¶à×é¼þ£º×éºÏ¹ØϵºÍ¸¸×Ó¹Øϵ 23
2.1.3 ½¨Á¢×é¼þ¹Øϵ 24
2.2 ÓÃReact´´½¨×é¼þ 26
2.2.1 ´´½¨ReactÔªËØ 26
2.2.2 äÖȾÊ׸ö×é¼þ 29
2.2.3 ´´½¨React×é¼þ 31
2.2.4 ´´½¨ReactÀà 31
2.2.5 render·½·¨ 32
2.2.6 ͨ¹ýPropTypesУÑéÊôÐÔ 33
2.3 ×é¼þµÄÒ»Éú 36
2.3.1 ReactµÄ״̬ 37
2.3.2 É趨³õʼ״̬ 38
2.4 ÈÏʶJSX 45
2.4.1 ʹÓÃJSX´´½¨×é¼þ 46
2.4.2 JSXµÄºÃ´¦ÒÔ¼°JSXÓëHTMLµÄ²î±ð 48
2.5 С½á 48

µÚ¶þ²¿·Ö ReactÖеÄ×é¼þºÍÊý¾Ý
µÚ3Õ ReactÖеÄÊý¾ÝºÍÊý¾ÝÁ÷ 53
3.1 ״̬½éÉÜ 53
3.1.1 ʲôÊÇ״̬ 54
3.1.2 ¿É±ä״̬Óë²»¿É±ä״̬ 56
3.2 ReactÖеÄ״̬ 57
3.2.1 ReactÖеĿɱä״̬£º×é¼þ״̬ 58
3.2.2 ReactÖеIJ»¿É±ä״̬£ºÊôÐÔ 61
3.2.3 ʹÓÃÊôÐÔ£ºPropTypesºÍĬÈÏÊôÐÔ 62
3.2.4 ÎÞ״̬º¯Êý×é¼þ 63
3.3 ×é¼þͨÐÅ 65
3.4 µ¥ÏòÊý¾ÝÁ÷ 66
3.5 С½á 67

µÚ4Õ ReactÖеÄäÖȾºÍÉúÃüÖÜÆÚ·½·¨ 69
4.1 ´î½¨Letters Social²Ö¿â 69
4.1.1 »ñÈ¡Ô´´úÂë 71
4.1.2 Ó¦¸ÃʹÓÃÄĸö°æ±¾µÄNode 71
4.1.3 ¹ØÓÚ¹¤¾ßºÍCSSµÄ×¢ÒâÊÂÏî 72
4.1.4 ²¿Êð 72
4.1.5 API·þÎñÆ÷ºÍÊý¾Ý¿â 72
4.1.6 ÔËÐÐÓ¦ÓóÌÐò 73
4.2 äÖȾ¹ý³ÌºÍÉúÃüÖÜÆÚ·½·¨ 73
4.2.1 ÉúÃüÖÜÆÚ·½·¨¸ÅÀÀ 73
4.2.2 ÉúÃüÖÜÆÚ·½·¨µÄÀàÐÍ 75
4.2.3 ³õʼ·½·¨ºÍ“½«Ö´ÐД·½·¨ 78
4.2.4 ¹ÒÔØ×é¼þ 79
4.2.5 ¸üз½·¨ 82
4.2.6 жÔØ·½·¨ 85
4.2.7 ²¶×½´íÎó 86
4.3 ¿ªÊ¼´´½¨Letters Social 90
4.4 С½á 96

µÚ5Õ ÔÚReactÖÐʹÓÃ±íµ¥ 99
5.1 ÔÚLetters SocialÖд´½¨Ìû×Ó 100
5.1.1 Êý¾ÝÐèÇó 100
5.1.2 ×é¼þ¸ÅÀÀÓë²ã¼¶ 100
5.2 ReactÖÐµÄ±íµ¥ 102
5.2.1 ¿ªÊ¼Ê¹ÓÃ±íµ¥ 103
5.2.2 ±íµ¥ÔªËغÍʼþ 103
5.2.3 ¸üÐÂ±íµ¥×´Ì¬ 106
5.2.4 ÊܿغͷÇÊÜ¿Ø×é¼þ 107
5.2.5 ±íµ¥ÑéÖ¤ÓëÇåÀí 109
5.3 ´´½¨ÐÂÌû×Ó 112
5.4 С½á 114

µÚ6Õ ½«µÚÈý·½¿âÓëReact¼¯³É 115
6.1 ÏòLetters Social API·¢ËÍÌû×Ó 116
6.2 ÓõØͼÔöÇ¿×é¼þ 117
6.2.1 ʹÓÃrefs´´½¨DisplayMap×é¼þ 118
6.2.2 ´´½¨LocationTypeAhead×é¼þ 124
6.2.3 ¸üÐÂCreatePost£¬¸øÌû×ÓÌí¼ÓµØͼ 130
6.3 С½á 134

µÚ7Õ ReactµÄ·ÓÉ 135
7.1 ʲôÊÇ·ÓÉ 136
7.2 ´´½¨Â·ÓÉÆ÷ 137
7.2.1 ×é¼þ·ÓÉ 138
7.2.2 ´´½¨×é¼þ 139
7.2.3 ¿ªÊ¼¹¹½¨×é¼þ 140
7.2.4 Æ¥ÅäURL·¾¶ºÍ²ÎÊý»¯
·ÓÉ 143
7.2.5 ÏòRouter×é¼þÌí¼Ó·ÓÉ 144
7.3 С½á 150

µÚ8Õ ÔÙ̸·ÓÉÒÔ¼°¼¯³ÉFirebase 153
8.1 ʹÓ÷ÓÉÆ÷ 154
8.1.1 ´´½¨Ìû×ÓÒ³Ãæ 159
8.1.2 ´´½¨×é¼þ 161
8.1.3 ´´½¨×é¼þ 164
8.2 ¼¯³ÉFirebase 165
8.3 С½á 172

µÚ9Õ ²âÊÔReact×é¼þ 173
9.1 ²âÊÔµÄÀàÐÍ 174
9.2 ÓÃJest¡¢EnzymeºÍ
React-test-render²âÊÔReact×é¼þ 177
9.3 ±àдµÚ Ò»¸ö²âÊÔ 178
9.3.1 ¿ªÊ¼Ê¹ÓÃJest 179
9.3.2 ²âÊÔÎÞ״̬º¯Êý×é¼þ 180
9.3.3 ²»Ê¹ÓÃEnzyme²âÊÔCreatePost×é¼þ 183
9.3.4 ²âÊÔ¸²¸ÇÂÊ 192
9.4 С½á 194

µÚÈý²¿·Ö ReactÓ¦Óüܹ¹
µÚ 10Õ ReduxÓ¦Óüܹ¹ 197
10.1 FluxÓ¦Óüܹ¹ 198
10.1.1 ³õʶRedux£ºFluxµÄÒ»¸ö±äÖÖ 200
10.1.2 ΪRedux×ö×¼±¸ 201
10.2 ÔÚReduxÖд´½¨action 203
10.2.1 ¶¨ÒåactionÀàÐÍ 204
10.2.2 ÔÚReduxÖд´½¨action 205
10.2.3 ´´½¨Redux store²¢ÅÉ·¢action 206
10.2.4 Òì²½actionºÍÖмä¼þ 210
10.2.5 Òª²»ÒªÊ¹ÓÃRedux 215
10.2.6 ²âÊÔaction 218
10.2.7 ´´½¨ÓÃÓÚ±ÀÀ£±¨¸æµÄ×Ô¶¨ÒåReduxÖмä¼þ 219
10.3 С½á 221

µÚ 11Õ Redux½ø½×¼°ReduxÓëReact¼¯³É 223
11.1 reducer¾ö¶¨×´Ì¬Ó¦¸ÃÈçºÎ¸Ä±ä 224
11.1.1 ״̬µÄ½á¹¹Óë³õʼ״̬ 225
11.1.2 ÉèÖÃreducerÀ´ÏìÓ¦´«ÈëµÄaction 226
11.1.3 ½«reducerºÏ²¢µ½store 232
11.1.4 ²âÊÔreducer 233
11.2 ½«ReactºÍRedux½áºÏÆðÀ´ 234
11.2.1 ÈÝÆ÷×é¼þÓëչʾ×é¼þ 235
11.2.2 ʹÓý«×é¼þÁ¬½Óµ½Redux store 237
11.2.3 ½«action°ó¶¨µ½×é¼þµÄʼþ´¦ÀíÆ÷ÉÏ 241
11.2.4 ¸üвâÊÔ 244
11.3 С½á 245

µÚ 12Õ ·þÎñÆ÷¶ËReactÓ뼯³ÉReact Router 247
12.1 ʲôÊÇ·þÎñÆ÷¶ËäÖȾ 248
12.2 ΪʲôÔÚ·þÎñÆ÷ÉÏ äÖȾ 251
12.3 ¿ÉÄܲ¢²»ÐèÒªSSR 253
12.4 ÔÚ·þÎñÆ÷ÉÏäÖȾ ×é¼þ 254
12.5 Çл»µ½React Router 259
12.6 ʹÓÃReact Router´¦ÀíÒÑ ÑéÖ¤µÄ·ÓÉÆ÷ 264
12.7 ´øÊý¾Ý»ñÈ¡µÄ·þÎñÆ÷¶Ë äÖȾ 268
12.8 С½á 276

µÚ 13Õ React Native½éÉÜ 279
13.1 ½éÉÜReact Native 279
13.2 ReactºÍReact Native 282
13.3 ºÎʱʹÓÃReact Native 284
13.4 *¼òµ¥µÄ“Hello World” 285
13.5 ÏÂÒ»Õ¾ 289
13.6 С½á 290