�x���¹�������ֱ�ӳ���
�gӭ���R�ЈD�W(w��ng) Ո | ע��

���] ����React���g(sh��)��

���ߣ������
�����磺�����]늳���������r�g��2016-11-01
�_���� 32�_ 퓔�(sh��)�� 351
�� �D �r:¥37.3(4.7��) ���r  ¥79.0 ��䛺�ɿ������T�r
����ُ��܇ �ղ�
�_������ ȫ�����]
?�½������س���
��ܰ��ʾ��5�����ˆD����Ҫ�������β؛���󲿷֞�ȫ�£����ܷ�/�o�ܷ⣩�����e�D��Ʒ��8-9���¡��п�
�Є�����ӛ����P�ȸ�����ȫԔ��Ʒ���f��>>
������Ǖ�����>
�I�^����Ʒ����߀�I��

����React���g(sh��)�� ���(qu��n)��Ϣ

����React���g(sh��)�� ������ɫ

�����Ďׂ��S��ȥ��B React��һ������ View ��������ô���F(xi��n)�M�������Լ�������Č��F(xi��n)ԭ�������ǔUչ�� Flux ���üܘ�(g��u)����Ҫ������Ʒ Redux��������ô�c React �Y(ji��)���������_�l(f��)�����nj� React �c server ����ײ�a(ch��n)����һЩ˼���������v�����ڿ�ҕ������ă�(y��u)���c�ӄݡ� �����m����һ����(j��ng)��ǰ���_�l(f��)�ˆT��x��

����React���g(sh��)�� ��(n��i)�ݺ���

ȫ�������v��React���g(sh��)���ĵ� 1 ��ԭ��(chu��ng)�D����Strikingly“(li��n)�τ�(chu��ng)ʼ�˼�CTO���_���������]��pure render��������(chu��ng)�A������ ���wReact��Flux��Redux����ҕ���������_�l(f��)���ڌ��`���������⼼�g(sh��)��Դ�a ǰ�˽M����������Q������һ�������D(zhu��n)React“ȫ��Ͱ”

����React���g(sh��)�� Ŀ�

��1�¡����� React ���� 1
1.1��React ���� 1
1.1.1����עҕ�D�� 1
1.1.2��Virtual DOM 1
1.1.3������(sh��)ʽ���� 2
1.2��JSX �Z�� 3
1.2.1��JSX ���Ɂ� 3
1.2.2��JSX �����Z�� 7
1.3��React �M�� 11
1.3.1���M������׃ 11
1.3.2��React �M����(g��u)�� 18
1.4��React ��(sh��)��(j��)�� 21
1.4.1��state 21
1.4.2��props 23��1�¡����� React ���� 1
1.1��React ���� 1
1.1.1����עҕ�D�� 1
1.1.2��Virtual DOM 1
1.1.3������(sh��)ʽ���� 2
1.2��JSX �Z�� 3
1.2.1��JSX ���Ɂ� 3
1.2.2��JSX �����Z�� 7
1.3��React �M�� 11
1.3.1���M������׃ 11
1.3.2��React �M����(g��u)�� 18
1.4��React ��(sh��)��(j��)�� 21
1.4.1��state 21
1.4.2��props 23
1.5��React �������� 29
1.5.1�����d��ж�d�^�� 29
1.5.2����(sh��)��(j��)�����^�� 30
1.5.3�����w���� 33
1.6��React �c DOM 34
1.6.1��ReactDOM 35
1.6.2��ReactDOM �IJ���(w��n)������ 36
1.6.3��refs 38
1.6.4��React ֮��� DOM ���� 40
1.7���M����������Tabs �M�� 41
1.8���Y(ji��) 47
��2�¡����� React 48
2.1���¼�ϵ�y(t��ng) 48
2.1.1���ϳ��¼��Ľ�����ʽ 48
2.1.2���ϳ��¼��Č��F(xi��n)�C�� 49
2.1.3����React��ʹ��ԭ���¼� 51
2.1.4���ϳ��¼��cԭ���¼����� 51
2.1.5������React�ϳ��¼��cJavaScriptԭ���¼� 54
2.2����� 55
2.2.1�����ñ�νM�� 55
2.2.2���ܿؽM�� 60
2.2.3�����ܿؽM�� 61
2.2.4�������ܿؽM���ͷ��ܿؽM�� 62
2.2.5����νM���Ďׂ���Ҫ���� 63
2.3����ʽ̎�� 64
2.3.1��������ʽ�O(sh��)�� 64
2.3.2��CSS Modules 66
2.4���M���gͨ�� 74
2.4.1�����M�����ӽM��ͨ�� 74
2.4.2���ӽM���򸸽M��ͨ�� 75
2.4.3���缉�M��ͨ�� 77
2.4.4���]��Ƕ���P(gu��n)ϵ�ĽM��ͨ�� 79
2.5���M���g���� 81
2.5.1��mixin 81
2.5.2�����A�M�� 86
2.5.3���M��ʽ�M���_�l(f��)���` 93
2.6���M�����܃�(y��u)�� 97
2.6.1��������(sh��) 97
2.6.2��PureRender 100
2.6.3��Immutable 103
2.6.4��key 109
2.6.5��react-addons-perf 110
2.7���Ӯ� 111
2.7.1��CSS �Ӯ��c JavaScript �Ӯ� 111
2.7.2�����D(zhu��n) React Transition 113
2.7.3�����Ӻ���(sh��) 116
2.8���Ԅӻ��yԇ 121
2.8.1��Jest 121
2.8.2��Enzyme 124
2.8.3���Ԅӻ��yԇ 125
2.9���M������������(y��u)�� Tabs �M�� 125
2.10���Y(ji��) 133
��3�¡����x React Դ�a 134
3.1����̽ React Դ�a 134
3.2��Virtual DOM ģ�� 137
3.2.1����(chu��ng)�� React Ԫ�� 138
3.2.2����ʼ���M����� 140
3.2.3���ı��M�� 141
3.2.4��DOM �˺��M�� 144
3.2.5���Զ��x�M�� 150
3.3���������ڵĹ���ˇ�g(sh��) 151
3.3.1����̽ React �������� 152
3.3.2��Ԕ�� React �������� 152
3.3.3���o��B(t��i)�M�� 163
3.4������setState�C�� 164
3.4.1��setState�������� 164
3.4.2��setState ѭ�h(hu��n)�{(di��o)���L�U 165
3.4.3��setState�{(di��o)�� 166
3.4.4�����R�„� 168
3.4.5������setState 170
3.5��diff �㷨 172
3.5.1�����y(t��ng) diff �㷨 172
3.5.2��Ԕ�� diff 172
3.6��React Patch ���� 181
3.7���Y(ji��) 183
��4�¡��J�R Flux �ܘ�(g��u)ģʽ 184
4.1��React �����ܘ�(g��u) 184
4.2��MV* �c Flux 190
4.2.1��MVC MVVM 190
4.2.2��Flux �Ľ�Q���� 193
4.3��Flux �������� 194
4.4��Flux ������ 198
4.4.1����ʼ��Ŀ䛽Y(ji��)��(g��u) 198
4.4.2���O(sh��)Ӌ store 198
4.4.3���O(sh��)Ӌ actionCreator 200
4.4.4����(g��u)�� controller-view 202
4.4.5���ؘ�(g��u) view 203
4.4.6�����ӆ�Ԫ�yԇ 205
4.5�����x Flux 206
4.5.1��Flux ����˼�� 206
4.5.2��Flux �IJ��� 207
4.6���Y(ji��) 207
��5�¡����� Redux ���üܘ�(g��u) 208
5.1��Redux ���� 208
5.1.1��Redux ��ʲô 208
5.1.2��Redux ����ԭ�t 209
5.1.3��Redux ���� API 210
5.1.4���c React ���� 211
5.1.5������ Flux ���� 212
5.2��Redux middleware 212
5.2.1��middleware ���Ɂ� 212
5.2.2������ middleware �C�� 213
5.3��Redux ������ 217
5.3.1��ʹ�� middleware ��������
Ո�� 217
5.3.2��ʹ�� middleware ̎����s
������ 221
5.4��Redux �c·�� 224
5.4.1��React Router 225
5.4.2��React Router Redux 227
5.5��Redux �c�M�� 229
5.5.1�������ͽM�� 229
5.5.2��չʾ�ͽM�� 229
5.5.3��Redux �еĽM�� 230
5.6��Redux ������ 231
5.6.1����ʼ�� Redux �Ŀ 231
5.6.2������Ŀ䛽Y(ji��)��(g��u) 232
5.6.3���O(sh��)Ӌ·�� 234
5.6.4��׌���������� 235
5.6.5����(y��u)����(g��u)���_�� 239
5.6.6�����Ӳ����ļ� 239
5.6.7���ʂ���퓵Ĕ�(sh��)��(j��) 242
5.6.8���B�� Redux 245
5.6.9������ Redux Devtools 250
5.6.10������ middleware ���F(xi��n) Ajax
Ո��l(f��)�� 251
5.6.11��Ո�󱾵صĔ�(sh��)��(j��) 252
5.6.12�����֮�g�����D(zhu��n) 253
5.6.13����(y��u)���c���M 256
5.6.14�����ӆ�Ԫ�yԇ 257
5.7���Y(ji��) 258
��6�¡�Redux ���A�\�� 259
6.1�����A reducer 259
6.1.1��reducer ��� 259
6.1.2��reducer ������ 261
6.2��Redux �c��� 262
6.2.1��ʹ�� redux-form-utils �p�ل�(chu��ng)����ε�������a 263
6.2.2��ʹ�� redux-form ��ɱ�εĮ�����C 265
6.2.3��ʹ�ø��A reducer ��F(xi��n)��ģ�K�����ι��� 267
6.3��Redux CRUD ����(zh��n) 268
6.3.1���ʂ乤�� 268
6.3.2��ʹ�� Table �M�����“��”���� 269
6.3.3��ʹ�� Modal �M�����“��”�c“��” 274
6.3.4������ Modal ���F(xi��n)��(sh��)��(j��)�Ąh���_�J 277
6.3.5������ promise ���D(zhu��n) Redux �����¼��� 278
6.4��Redux ���܃�(y��u)�� 279
6.4.1��Reselect 280
6.4.2��Immutable Redux 282
6.4.3��Reducer ���܃�(y��u)�� 282
6.5�����x Redux 284
6.5.1������(sh��)�wһ�� 285
6.5.2����ʼ��B(t��i)�� getState 286
6.5.3��subscribe 286
6.5.4��dispatch 287
6.5.5��replaceReducer 288
6.6�����x react-redux 288
6.6.1��Provider 288
6.6.2�� connect 290
6.6.3�����a����Q 293
6.7���Y(ji��) 294
��7�¡�React ���ն���Ⱦ 295
7.1��React �c���ն�ģ�� 295
7.1.1��ʲô�Ƿ��ն���Ⱦ 295
7.1.2��react-view 296
7.1.3��react-view Դ�a���x 296
7.2��React ���ն���Ⱦ 299
7.2.1�����D(zhu��n) Node.js 300
7.2.2��React-Router �� Koa-Router �y(t��ng)һ 303
7.2.3��ͬ��(g��u)��(sh��)��(j��)̎����̽ӑ 306
7.3���Y(ji��) 307
��8�¡����D(zhu��n) React ��ҕ�� 308
8.1��React �Y(ji��)�� Canvas �� SVG 308
8.1.1��Canvas �c SVG 308
8.1.2���� React �е� Canvas 310
8.1.3��React �е� SVG 311
8.2��React �c��ҕ���M�� 316
8.2.1�����b���еĿ�ҕ���� 316
8.2.2��ʹ�� D3 �L�� UI ���� 317
8.2.3��ʹ�� React �L�� UI ���� 319
8.3��Recharts �M������ԭ�� 322
8.3.1��•��ʽ�Ę˺� 323
8.3.2���N��ԭ��������� 325
8.3.3���ӿ�ʽ�� API 326
8.4���Y(ji��) 328
���A���_�l(f��)�h(hu��n)�� 329
���B�����aҎ(gu��)�� 345
���C��Koa middleware 349��Ϣ
չ�_ȫ��

����React���g(sh��)�� ���P(gu��n)�Y��

“�����v���˷dz���ă�(n��i)�������H��B��������ͨ�Ñ���API�����üܘ�(g��u)����߅������߀�����B�˵׌ӌ��F(xi��n)�����⣬�����dz���ҕ����(zh��n)��ÿһ��(ji��)���Ќ��H�����ӣ�����(ji��)�S�����ҏ��@������W���˺ܶ��|�����������]��” ——��һ����Λρ������g(sh��)����������(n��i)���g(sh��)Ȧ֪����������ES 6�˜����T����2�棩������ “React���Q���������T�����y(t��ng)ǰ���_�l(f��)��“�F��”���@�N���f�����_����ǰ���_�l(f��)ȫ�µĕr���������÷��������������ˬF(xi��n)�ں�δ�����ǰ�˼��g(sh��)�ij����L�������������������M��ϵ�y(t��ng)�W�������`����֪����ţ�˵Č��`���ի@�Լ�����֪����������õĽݏ����@���ҿ����ĵ�һ��React����ԭ��(chu��ng)�������x�������H����”——����܊������ǰ�ˌ���������(n��i)���g(sh��)Ȧ֪��������ǰ�˲����� “������(n��i)���茍��һ��“�ęn�f����”֮�L���д������ߵČ���(zh��n)��(j��ng)����ɜ\�������oՓ���� React ���W�ߣ�߀���M�A��ʿ��������ֵ��һ�x��”——��־��ꑽ���ǰ�˼ܘ�(g��u)������ǰ���⿯�uՓ���l(f��)����

����React���g(sh��)�� ���ߺ���

�����ǰ�˼ܘ�(g��u)������š�ڰ���Ͱ��������_Դ�˜I(y��)���L�ꌣע��ǰ�˼ܘ�(g��u)����(sh��)��(j��)��ҕ����Node.js���I(l��ng)����֪������pure render�Ą�(chu��ng)�k����

��Ʒ�uՓ(0�l)
���o�uՓ����
�������]
��݋���]
����픲�
�ЈD�W(w��ng)
�ھ��ͷ�