-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1720 lines (856 loc) · 82.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html class="theme-next muse use-motion" lang="zh-Hans">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">
<link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">
<meta name="keywords" content="Hexo, NexT" />
<meta property="og:type" content="website">
<meta property="og:title" content="Rico 小栈">
<meta property="og:url" content="https://blog.localhost-8080.me/index.html">
<meta property="og:site_name" content="Rico 小栈">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Rico 小栈">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Muse',
version: '5.1.4',
sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
fancybox: true,
tabs: true,
motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
duoshuo: {
userId: '0',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="https://blog.localhost-8080.me/"/>
<title>Rico 小栈</title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div class="container sidebar-position-left
page-home">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">Rico 小栈</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle"></p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags/" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
标签
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
<li class="menu-item menu-item-about">
<a href="/about/" rel="section">
<i class="menu-item-icon fa fa-fw fa-user"></i> <br />
关于
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<section id="posts" class="posts-expand">
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="https://blog.localhost-8080.me/2018/07/08/我要学英语-口语-音标/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Rico Chen">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Rico 小栈">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/07/08/我要学英语-口语-音标/" itemprop="url">我要学英语-口语-音标</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-07-08T21:56:52+08:00">
2018-07-08
</time>
</span>
<span class="post-comments-count">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-comment-o"></i>
</span>
<a href="/2018/07/08/我要学英语-口语-音标/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count"
data-disqus-identifier="2018/07/08/我要学英语-口语-音标/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h3 id="英标"><a href="#英标" class="headerlink" title="英标"></a>英标</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">练好口语的基础是学好单词发音，掌握单词的发音需要学好音标！！</span><br></pre></td></tr></table></figure>
<h4 id="元音"><a href="#元音" class="headerlink" title="元音"></a>元音</h4><blockquote>
<ul>
<li><code>cop</code> [ɑ] 类似于医生让你张大嘴说”啊”</li>
<li><code>the</code> [ə] 类似于汉字”额”</li>
<li><code>cup</code> [ʌ] 用[ə]的嘴型发[ɑ]</li>
<li><code>boot</code> [u] 类似于汉字”乌”</li>
<li><code>book</code> [ʊ] 用[ə]的嘴型发[u]</li>
<li><code>beat</code> [i] 类似于汉字”衣”</li>
<li><code>bit</code> [ɪ] 类似于惊讶时发出的”咦”</li>
<li><code>make</code> [eɪ] 类似于接电话时说的”喂”的尾音</li>
<li><code>head</code> [ɛ] 类似于欢呼时喊的”耶”拖长后的尾音</li>
<li><code>had</code> [æ] 类似于羊叫声”咩”拖长后的尾音</li>
<li><code>law</code> [ɔ] 类似于汉字”奥”</li>
<li><code>now</code> [aʊ] 类似于突然被人在肚子上打了一锤后发出的叫声</li>
<li><code>bite</code> [aɪ] 类似于老外说”我爱你”中的”爱”字</li>
<li><code>boy</code> [ɔɪ] 从[ɔ]滑动到[ɪ]</li>
<li><code>go</code> [əʊ] 从[ə]滑动到[ʊ]</li>
</ul>
</blockquote>
<h4 id="辅音"><a href="#辅音" class="headerlink" title="辅音"></a>辅音</h4><blockquote>
<ul>
<li><code>web</code> [w] 类似于汉字”乌”</li>
<li><code>yes</code> [j] 类似于汉字”衣”</li>
<li><code>father</code> [f] 类似于汉语拼音声母f</li>
<li><code>very</code> [v] 发[f]时声带振动</li>
<li><code>red</code> [r] 嘴巴向前撅, 舌头向后缩, 舌尖向上卷(r位于元音前)</li>
<li><code>car</code> [r] 舌头向后缩, 舌尖向上卷(r位于元音后)</li>
<li><code>light</code> [l] 舌尖抵住上齿背后, 把舌头滑落下来, 在滑落的过程中发音(l位于元音前)</li>
<li><code>well</code> [l] 舌尖向前向上滑动, 抵住上牙齿背后, 在上滑的过程中发音(l位于元音后)</li>
<li><code>night</code> [n] 和l动作一模一样, 但气流从鼻腔发出(n位于元音前)</li>
<li><code>pen</code> [n] 和n动作一模一样, 但气流从鼻腔发出(n位于元音后)</li>
<li><code>mom</code> [m] 类似于闭着嘴巴说”嗯”</li>
<li><code>sing</code> [ŋ] 舌头后部上抬, 抵住软腭, 说”嗯”</li>
<li><code>roads</code> [dz] 类似于汉字”资”</li>
<li><code>let's</code> [ts] 类似于汉字”词”</li>
<li><code>boss</code> [s] 类似于汉字”思”</li>
<li><code>rose</code> [z] 发[s]时声带振动</li>
<li><code>thanks</code> [ɵ] 舌尖放到上下齿之间, 然后发[s]</li>
<li><code>them</code> [ð] 舌尖放到上下齿之间, 然后发[z]</li>
<li><code>just</code> [dʒ] 类似于汉字”知”</li>
<li><code>check</code> [tʃ] 类似于汉字”吃”</li>
<li><code>she</code> [ʃ] 类似于汉字”师”</li>
<li><code>Asia</code> [ʒ]类似于汉字”日”</li>
<li><code>try</code> [tr] 类似于汉字”出”</li>
<li><code>dry</code> [dr] 类似于汉字”猪”</li>
<li><code>pet</code> [p] 类似于汉语拼音声母p</li>
<li><code>bed</code> [b] 类似于汉语拼音声母b</li>
<li><code>too</code> [t] 类似于汉语拼音声母t</li>
<li><code>do</code> [d] 类似于汉语拼音声母d</li>
<li><code>kiss</code> [k] 类似于汉语拼音声母k</li>
<li><code>go</code> [g] 类似于汉语拼音声母g</li>
<li><code>how</code> [h] 类似于汉语拼音声母h</li>
</ul>
</blockquote>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="https://blog.localhost-8080.me/2018/06/25/React-术语表/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Rico Chen">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Rico 小栈">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/06/25/React-术语表/" itemprop="url">React 术语表</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-06-25T17:30:51+08:00">
2018-06-25
</time>
</span>
<span class="post-comments-count">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-comment-o"></i>
</span>
<a href="/2018/06/25/React-术语表/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count"
data-disqus-identifier="2018/06/25/React-术语表/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="React术语表"><a href="#React术语表" class="headerlink" title="React术语表"></a>React术语表</h2><h3 id="单页面应用-Single-page-Application"><a href="#单页面应用-Single-page-Application" class="headerlink" title="单页面应用 Single-page Application"></a>单页面应用 Single-page Application</h3><blockquote>
<p>单页面应用简称(SPA)，第一次会加载应用程序运行所需的单个HTML页面和所需的资源，例如CSS，Js，它通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面，尽管可以用位置散列（英语：Fragment identifier）或HTML5历史API（英语：Comparison of layout engines (HTML5)#APIs）来提供应用程序中单独逻辑页面的感知和导航能力，但页面在过程中的任何时间点都不会重新加载，也不会将控制转移到其他页面。与单页应用的交互通常涉及到与網頁伺服器后端的动态通信。</p>
</blockquote>
<h3 id="ES6-ES2015-ES2016等"><a href="#ES6-ES2015-ES2016等" class="headerlink" title="ES6,ES2015,ES2016等"></a>ES6,ES2015,ES2016等</h3><blockquote>
<p>这些缩略词都是指最新版本的ECMAScript语言规范标准，而JavaScript语言是它们的一个实现。ES6版本（也被称为ES2015）包括许多新特性，如：箭头函数、类(class)、模板字面量、let 和 const 变量声明等。</p>
</blockquote>
<h3 id="编译器-Compilers"><a href="#编译器-Compilers" class="headerlink" title="编译器 Compilers"></a>编译器 Compilers</h3><blockquote>
<p>JavaScript编译器用于转换JavaScript代码，并用其它格式返回JavaScript代码。最常见的用例是采用ES6语法编写代码并将其转换为旧版浏览器能够识别的语法。 React最常用的编译器是Babel。</p>
</blockquote>
<h3 id="打包工具-Bundlers"><a href="#打包工具-Bundlers" class="headerlink" title="打包工具 Bundlers"></a>打包工具 Bundlers</h3><blockquote>
<p>开发中将JavaScript和CSS代码编写为单独的模块（通常为数百个），打包工具会针对浏览器将它们组合并优化为几个文件。Webpack和Browserify是在React应用程序中常用的打包工具。</p>
</blockquote>
<h3 id="包管理工具-Package-Managers"><a href="#包管理工具-Package-Managers" class="headerlink" title="包管理工具 Package Managers"></a>包管理工具 Package Managers</h3><blockquote>
<p>包管理工具允许你通过依赖项来管理项目。npm 和 Yarn是React应用程序中常用的包管理工具。它们都是使用相同npm包注册表的客户端。</p>
</blockquote>
<h3 id="CDN"><a href="#CDN" class="headerlink" title="CDN"></a>CDN</h3><blockquote>
<p>CDN即内容分发网络。 CDN从全球各地的服务器网络提供静态内容的缓存。</p>
</blockquote>
<h3 id="JSX"><a href="#JSX" class="headerlink" title="JSX"></a>JSX</h3><blockquote>
</blockquote>
<p>JSX是一种JavaScript的语法扩展。JSX与模板语言相似，但它具有JavaScript的全部功能。JSX会被编译为React.createElement()方法调用，将返回名为“React elements”的普通JavaScript对象。</p>
<blockquote>
</blockquote>
<p>React DOM使用属性名称使用驼峰法代替HTML属性名称。例如，tabindex在JSX中写作tabIndex。由于class是JavaScript中的保留字，class属性用className替代:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const name = 'Clementine';</span><br><span class="line">ReactDOM.render(</span><br><span class="line"> <h1 className="hello">My name is {name}!</h1>,</span><br><span class="line"> document.getElementById('root')</span><br><span class="line">);</span><br></pre></td></tr></table></figure></p>
<h3 id="元素-Elements"><a href="#元素-Elements" class="headerlink" title="元素 Elements"></a>元素 Elements</h3><blockquote>
<p>React元素是React应用程序的最小单位。初学者很可能把元素的定义和定义内涵更广的“组件”给搞混了。元素用来描述界面上的任何东西。 React 元素都是immutable不可变的。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">const element = <h1>Hello, world</h1>;</span><br></pre></td></tr></table></figure></p>
</blockquote>
<h3 id="组件-Components"><a href="#组件-Components" class="headerlink" title="组件 Components"></a>组件 Components</h3><blockquote>
<p>React组件是小的，可复用的代码片段，它返回一个React元素用于渲染页面。 定义一个组件最简单的方式是使用JavaScript函数，它返回一个React元素：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">function Welcome(props) {</span><br><span class="line"> return <h1>Hello, {props.name}</h1>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
</blockquote>
<blockquote>
<p>你也可以使用 ES6 class 来定义一个组件:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">class Welcome extends React.Component {</span><br><span class="line"> render() {</span><br><span class="line"> return <h1>Hello, {this.props.name}</h1>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
</blockquote>
<blockquote>
<p>组件可以按照功能分解成不同的部件，并在其他组件中使用。组件可以返回其他组件，数组，字符串或数字。当你的UI中有一部分重复使用了好几次（比如，Button、Panel、Avatar），或者其自身就足够复杂（比如，App、FeedStory、Comment），类似这些都是抽象成一个可复用组件的绝佳选择，这也是一个比较好的做法。 组件名称应始终以大写字母开头 (<wrapper> 而不是 <wrapper>)。</wrapper></wrapper></p>
</blockquote>
<h3 id="Props"><a href="#Props" class="headerlink" title="Props"></a>Props</h3><blockquote>
<p>props是React组件的输入内容。 它们是从父组件传递给子组件的数据。<br>请记住，props 是只读的。 不应该以任何方式修改它们：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">// 错误!</span><br><span class="line">props.number = 42;</span><br></pre></td></tr></table></figure></p>
</blockquote>
<blockquote>
<p>如果你需要修改某些值以响应用户输入或网络响应，请使用state。</p>
</blockquote>
<h3 id="Props-children"><a href="#Props-children" class="headerlink" title="Props.children"></a>Props.children</h3><blockquote>
<p>props.children在每个组件上都可用。 它会包含组件的开始和结束标记之间的内容。例如:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><Welcome>Hello world!</Welcome></span><br></pre></td></tr></table></figure></p>
</blockquote>
<blockquote>
<p>在Welcome组件中的props.children中可以获取字符串Hello world！：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">function Welcome(props) {</span><br><span class="line"> return <p>{props.children}</p>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
</blockquote>
<blockquote>
<p>定义成类组件时，使用this.props.children：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">class Welcome extends React.Component {</span><br><span class="line"> render() {</span><br><span class="line"> return <p>{this.props.children}</p>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></p>
</blockquote>
<h3 id="State"><a href="#State" class="headerlink" title="State"></a>State</h3><blockquote>
<p>当某个组件与其关联的某些数据随时间而改变时，组件中需要使用state。</p>
</blockquote>
<blockquote>
<p><code>state</code>和<code>props</code>之间最重要的区别是<code>props</code>是从父组件传递的，而<code>state</code>是由组件本身管理的。组件不能改变其<code>props</code>，但可以改变<code>state</code>。 通过使用<code>this.setState()</code>。 只有定义为类的组件才可以具有状态。</p>
</blockquote>
<blockquote>
<p>对于每一个特定的变化数据，应该只有一个“拥有”它的状态的组件。不要尝试同步两个不同组件的状态。状态分享通过状态提升至最近的父组件来完成，并通过props传递给他们。</p>
</blockquote>
<h3 id="生命周期函数-Lifecycle-Methods"><a href="#生命周期函数-Lifecycle-Methods" class="headerlink" title="生命周期函数 Lifecycle Methods"></a>生命周期函数 Lifecycle Methods</h3><blockquote>
<p>生命周期函数是在组件的不同阶段可执行自定义功能的钩子。当组件被创建并插入到DOM中时，可用函数(mounting)，组件更新，以及从DOM卸载或移除组件时可以使用对应的生命周期函数。</p>
<ul>
<li>装配<br><code>组件实例被创建和插入DOM中时调用:</code><ol>
<li>constructor()</li>
<li>static getDerivedStateFromProps()</li>
<li>componentWillMount() / UNSAFE_componentWillMount()</li>
<li>render()</li>
<li>componentDidMount()</li>
</ol>
</li>
<li>更新<br><code>属性或状态的改变会触发一次更新。当一个组件在被重渲时，调用:</code><ol>
<li>componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()</li>
<li>static getDerivedStateFromProps()</li>
<li>shouldComponentUpdate()</li>
<li>componentWillUpdate() / UNSAFE_componentWillUpdate()</li>
<li>render()</li>
<li>getSnapshotBeforeUpdate()</li>
<li>componentDidUpdate()</li>
</ol>
</li>
<li>卸载<br><code>当一个组件被从DOM中移除时,调用:</code><ol>
<li>componentWillUnmount()</li>
</ol>
</li>
<li>处理错误<br><code>在渲染过程中发生错误时,调用:</code><ol>
<li>componentDidCatch()</li>
</ol>
</li>
</ul>
</blockquote>
<h3 id="受控-amp-非受控组件-Controlled-vs-Uncontrolled-Components"><a href="#受控-amp-非受控组件-Controlled-vs-Uncontrolled-Components" class="headerlink" title="受控 & 非受控组件 Controlled vs. Uncontrolled Components"></a>受控 & 非受控组件 Controlled vs. Uncontrolled Components</h3><blockquote>
<p>React有两种不同的方法来处理表单输入。</p>
</blockquote>
<blockquote>
<p>值由React控制的输入表单元素称为受控组件。当用户将数据输入到受控组件中时，会触发状态改变的事件处理程序，并且你的代码将决定输入是否有效（使用更新的值重新渲染）。如果你不重新渲染，那么表单元素将保持不变。</p>
</blockquote>
<blockquote>
<p>非受控制组件的表单元素在React之外工作。当用户将数据输入到表单域（输入框，下拉菜单等）时，不需要React做任何事情，更新的数据就会被呈现出来。这也意味着你不能强迫表单域都有一个确定的值。</p>
</blockquote>
<blockquote>
<p>在大多数情况下，你应该使用受控组件。</p>
</blockquote>
<h3 id="键值-Keys"><a href="#键值-Keys" class="headerlink" title="键值 Keys"></a>键值 Keys</h3><blockquote>
<p>“键值”是创建元素数组时需要包含的特殊字符串属性。键值可以帮助React识别哪些元素被更改，添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。</p>
</blockquote>
<blockquote>
<p>确定的标识键值对于重新渲染很重要，这样React才可以确定何时添加，删除或重新排序元素。不要把类似由Math.random()生成的值赋给键值。在理想情况下，键值应该对应于来自数据的唯一且稳定的标识符，例如post.id。</p>
</blockquote>
<h3 id="Refs"><a href="#Refs" class="headerlink" title="Refs"></a>Refs</h3><blockquote>
<p>React支持一个可以附加到任何组件的特殊属性ref。ref属性可以是一个字符串或一个回调函数。当ref属性是一个回调函数时，函数接收底层DOM元素或类实例（取决于元素的类型）作为参数。这使你可以直接访问DOM元素或组件实例。<br>不要过度使用 Refs。如果需要可使用状态提升来解决。</p>
</blockquote>
<h3 id="事件-Events"><a href="#事件-Events" class="headerlink" title="事件 Events"></a>事件 Events</h3><blockquote>
<p>React元素的事件处理和DOM元素的很相似。但是有一点语法上的不同:</p>
<ul>
<li>React事件绑定属性的命名采用驼峰式写法，而不是小写。</li>
<li>如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)</li>
</ul>
</blockquote>
<h3 id="协调-Reconciliation"><a href="#协调-Reconciliation" class="headerlink" title="协调 Reconciliation"></a>协调 Reconciliation</h3><blockquote>
<p>当一个组件的props或状态发生变化时，React通过比较新返回的元素和先前渲染的元素来决定是否需要实际的DOM更新。当它们不相等时，React将更新DOM。 这个过程被称为“协调”。</p>
</blockquote>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="https://blog.localhost-8080.me/2018/06/12/React之Dva/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Rico Chen">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Rico 小栈">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/06/12/React之Dva/" itemprop="url">React之Dva</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-06-12T20:14:09+08:00">
2018-06-12
</time>
</span>
<span class="post-comments-count">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-comment-o"></i>
</span>
<a href="/2018/06/12/React之Dva/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count"
data-disqus-identifier="2018/06/12/React之Dva/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h3 id="Dva图解"><a href="#Dva图解" class="headerlink" title="Dva图解"></a>Dva图解</h3><pre><code>以最常见的Web开发示例之一的:TodoList 来做演示
TodoList = Todo list + Add todo button
</code></pre><h3 id="图解一-React表示法"><a href="#图解一-React表示法" class="headerlink" title="图解一:React表示法"></a>图解一:React表示法</h3><p> <img src="https://cdn.yuque.com/yuque/0/2018/png/103904/1528436560812-2586a0b5-7a6a-4a07-895c-f822fa85d5de.png" alt=""><br> 按照 React 官方指导意见, 如果多个 <code>Component</code> 之间要发生交互, 那么状态(即: 数据)就维护在这些 <code>Component</code> 的最小公约父节点上, 也即是<code><App/></code><br> <code><TodoList/></code> <code><Todo/></code> 以及<code><AddTodoBtn/></code> 本身不维持任何 <code>state</code>, 完全由父节点<app> 传入 <code>props</code> 以决定其展现, 是一个纯函数的存在形式, 即: <code>Pure Component</code></app></p>
<h3 id="图解二-Redux表示法"><a href="#图解二-Redux表示法" class="headerlink" title="图解二:Redux表示法"></a>图解二:Redux表示法</h3><p> React 在其中的角色就是MVC中的V角色，只负责渲染，不处理页面逻辑，页面逻辑可以从中单独抽取出来，变成<code>store</code></p>
<p> <img src="https://cdn.yuque.com/yuque/0/2018/png/103904/1528436134375-4c15f63d-72f1-4c73-94a6-55b220d2547c.png" alt=""></p>
<p> 与图一相比, 几个明显的改进点:</p>
<ol>
<li>多了一个<code>Provider</code>组件，该组件提供一个<code>Store</code>来处理页面关的数据，<code>Redux</code>的最大特点就是提供一个单向数据流的数据模式。</li>
<li>状态及页面逻辑从 <code><App/></code>里面抽取出来, 成为独立的 <code>store</code>, 页面逻辑就是 <code>reducer</code></li>
<li><code><TodoList/></code> 及<code><AddTodoBtn/></code>都是 <code>Pure Component</code>, 通过 <code>connect</code> 方法可以很方便地给它俩加一层 <code>wrapper</code> 从而建立起与 <code>store</code> 的联系: 可以通过 <code>dispatch</code> 向 <code>store</code> 注入 <code>action</code>, 促使 <code>store</code> 的状态进行变化, 同时又订阅了 <code>store</code> 的状态变化, 一旦状态有变, 被 <code>connect</code> 的组件也随之刷新</li>
<li>使用 <code>dispatch</code> 往 <code>store</code> 发送 <code>action</code> 的这个过程是可以被拦截的, 自然而然地就可以在这里增加各种 <code>Middleware</code>, 实现各种自定义功能, <code>eg: logging</code></li>
</ol>
<p>这样一来, 各个部分各司其职, 耦合度更低, 复用度更高, 扩展性更好</p>
<h3 id="图解三-加入-Saga"><a href="#图解三-加入-Saga" class="headerlink" title="图解三: 加入 Saga"></a>图解三: 加入 Saga</h3><p><img src="https://cdn.yuque.com/yuque/0/2018/png/103904/1528436167824-7fa834ea-aa6c-4f9f-bab5-b8c5312bcf7e.png" alt=""></p>
<p>上面说了, 可以使用 <code>Middleware</code> 拦截 <code>action</code>, 这样一来异步的网络操作也就很方便了, 做成一个 <code>Middleware</code> 就行了, 这里使用 <code>redux-saga</code> 这个类库, 举个栗子:</p>
<ol>
<li>点击创建 <code>AddTodoBtn</code> 的按钮, 发起一个 <code>type == addTodo</code> 的 <code>action</code></li>
<li><code>saga</code> 拦截这个 <code>action</code>, 发起 <code>http</code> 请求, 如果请求成功, 则继续向 <code>reducer</code> 发一个 <code>type == addTodoSucc</code> 的 <code>action</code>, 提示创建成功, 反之则发送 <code>type == addTodoFail</code> 的 <code>action</code> 即可</li>
</ol>
<h3 id="图解四-Dva-表示法"><a href="#图解四-Dva-表示法" class="headerlink" title="图解四: Dva 表示法"></a>图解四: Dva 表示法</h3><p><img src="https://cdn.yuque.com/yuque/0/2018/png/103904/1528436195004-cd3800f2-f13d-40ba-bb1f-4efba99cfe0d.png" alt=""></p>
<p>有了前面的三步铺垫, <code>Dva</code> 的出现也就水到渠成了, 正如 <code>Dva</code> 官网所言, <code>Dva</code> 是基于 <code>React + Redux + Saga</code> 的最佳实践沉淀, 做了 3 件很重要的事情, 大大提升了编码体验:</p>
<ol>
<li>把 <code>store</code> 及 <code>saga</code> 统一为一个 <code>model</code> 的概念, 写在一个 <code>js</code> 文件里面</li>
<li>增加了一个 <code>Subscriptions</code>, 用于收集其他来源的 <code>action</code>, <code>eg: 键盘操作</code></li>
<li><code>model</code> 写法很简约, 类似于 <code>DSL</code> 或者 <code>RoR</code></li>
</ol>
<p><code>约定优于配置</code><br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">app.model({</span><br><span class="line"> namespace: <span class="string">'count'</span>,</span><br><span class="line"> state: {</span><br><span class="line"> record: <span class="number">0</span>,</span><br><span class="line"> current: <span class="number">0</span>,</span><br><span class="line"> },</span><br><span class="line"> reducers: {</span><br><span class="line"> add(state) {</span><br><span class="line"> <span class="keyword">const</span> newCurrent = state.current + <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">return</span> { ...state,</span><br><span class="line"> record: newCurrent > state.record ? newCurrent : state.record,</span><br><span class="line"> current: newCurrent,</span><br><span class="line"> };</span><br><span class="line"> },</span><br><span class="line"> minus(state) {</span><br><span class="line"> <span class="keyword">return</span> { ...state, <span class="attr">current</span>: state.current - <span class="number">1</span>};</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> effects: {</span><br><span class="line"> *add(action, { call, put }) {</span><br><span class="line"> <span class="keyword">yield</span> call(delay, <span class="number">1000</span>);</span><br><span class="line"> <span class="keyword">yield</span> put({ <span class="attr">type</span>: <span class="string">'minus'</span> });</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> subscriptions: {</span><br><span class="line"> keyboardWatcher({ dispatch }) {</span><br><span class="line"> key(<span class="string">'⌘+up, ctrl+up'</span>, () => { dispatch({<span class="attr">type</span>:<span class="string">'add'</span>}) });</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line">});</span><br></pre></td></tr></table></figure></p>
<p>一个最基本的 model是<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> {</span><br><span class="line"> <span class="comment">// 表示在全局 state 上的 key</span></span><br><span class="line"> namespace: <span class="string">''</span>,</span><br><span class="line"> <span class="comment">// 是初始值</span></span><br><span class="line"> state: [],</span><br><span class="line"> <span class="comment">// （也称为 reducing function）函数接受两个参数：之前已经累积运算的结果和当前要被累积的值，返回的是一个新的累积结果。该函数把一个集合归并成一个单值。</span></span><br><span class="line"> reducers: {</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// Effect 被称为副作用，在我们的应用中，最常见的就是异步操作。它来自于函数编程的概念，之所以叫副作用是因为它使得我们的函数变得不纯，同样的输入不一定获得同样的输出。</span></span><br><span class="line"> effects:{</span><br><span class="line"></span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// Subscriptions 是一种从 源 获取数据的方法，它来自于 elm。</span></span><br><span class="line"> subscriptions:{</span><br><span class="line"></span><br><span class="line"> },</span><br><span class="line">};</span><br></pre></td></tr></table></figure></p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>
<article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
<div class="post-block">
<link itemprop="mainEntityOfPage" href="https://blog.localhost-8080.me/2018/05/23/什么是高阶组件(1)/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Rico Chen">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.gif">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Rico 小栈">
</span>
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
<a class="post-title-link" href="/2018/05/23/什么是高阶组件(1)/" itemprop="url">什么是高阶组件(1)</a></h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-23T17:19:27+08:00">
2018-05-23
</time>
</span>
<span class="post-comments-count">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-comment-o"></i>
</span>
<a href="/2018/05/23/什么是高阶组件(1)/#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count"
data-disqus-identifier="2018/05/23/什么是高阶组件(1)/" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h3 id="什么是高阶组件"><a href="#什么是高阶组件" class="headerlink" title="什么是高阶组件"></a>什么是高阶组件</h3><blockquote>
<p>高阶组件,名字来源于高阶函数，一个函数可以接收另一个函数作为参数，并且有可能在执行后返回一个函数，这种函数就称之为高阶函数。你可能使用过高阶函数但是并没有真正意识到,例如<code>Array.forEach</code>、<code>Array.map</code>、<code>setTimeout</code>等这些都是高阶函数，我们都知道这些函数全都是接受一个函数作为参数，当新的函数返回时，他已经发生了变化。</p>
</blockquote>
<h5 id="例如以下的是高阶函数"><a href="#例如以下的是高阶函数" class="headerlink" title="例如以下的是高阶函数"></a>例如以下的是高阶函数</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">//setTimeout 方法</span><br><span class="line">setTimeout(function(){</span><br><span class="line"> // do a thing after 1000ms</span><br><span class="line">},1000);</span><br><span class="line"></span><br><span class="line">// Array.map 方法</span><br><span class="line">[1,2,3].map(function(item){</span><br><span class="line"> console.log(item);</span><br><span class="line"> return item * 2;</span><br><span class="line">});</span><br></pre></td></tr></table></figure>
<h5 id="例如以下的是高阶组件"><a href="#例如以下的是高阶组件" class="headerlink" title="例如以下的是高阶组件"></a>例如以下的是高阶组件</h5><p><em>高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。高阶组件有两种实现方式一种是函数，一种是继承，一般都用函数的方式</em></p>
<p><code>const NewComponent = higherOrderComponent(OldComponent)</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">// 这是一个最基本的函数类型的高阶组件</span><br><span class="line">import React, { Component } from 'react'</span><br><span class="line">export default (WrappedComponent) => {</span><br><span class="line"> class NewComponent extends Component {</span><br><span class="line"> // 可以做很多自定义逻辑</span><br><span class="line"> render () {</span><br><span class="line"> return <WrappedComponent /></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return NewComponent</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">// 这是一个基本的继承类型的高阶组件</span><br><span class="line">const HoC = (WrappedComponent) => {</span><br><span class="line"> class WrappingComponent extends WrappedComponent {</span><br><span class="line"> render() (</span><br><span class="line"> const {user, ...otherProps} = this.props;</span><br><span class="line"> this.props = otherProps;</span><br><span class="line"> return super.render();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return WrappingComponent;</span><br><span class="line">};</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">// 这是一个最基本的Demo，假设我们有多个组件都需要获取LocalStorage里面的值</span><br><span class="line">import React,{ Component } from 'react';</span><br><span class="line">export default (WrappedComponent, name) => {</span><br><span class="line"> class NewComponent extends Component{</span><br><span class="line"> constructor(){</span><br><span class="line"> super();</span><br><span class="line"> this.state = { data :null }</span><br><span class="line"> };</span><br><span class="line"> componentWillMount(){</span><br><span class="line"> let data = localStorage.getItem(name);</span><br><span class="line"> this.setState({</span><br><span class="line"> data </span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> render(){</span><br><span class="line"> return <WrappedComponent data={this.state.data} /></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return NewComponent;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<blockquote>
<p>对以上解释:<br>我们可以封装一个高阶组件来使用，用高阶组件封装起来的另一大好处就是灵活性，假设我们某天，数据是需要从服务器端获取过来，而不是从<code>LocalStorage</code>中获取数据的时候，我们只需要修改其中的<code>componentWillMount</code>中的数据获取方式改成<code>Ajax</code>，这样，我们其它组件其实不用感知高阶组件的修改，数据获取等都是一样的。实现一处修改多处同步的功能。<br>NewComponent组件会根据第二个参数<code>name</code>在组件挂载的阶段从<code>localStorage</code>里面取出值，设置到<code>state</code>里面，而渲染的时候则通过<code>props.data</code>传给 <code>WrappedComponent</code></p>
</blockquote>
<h5 id="如何使用呢"><a href="#如何使用呢" class="headerlink" title="如何使用呢"></a>如何使用呢</h5><blockquote>
<p>假设我们上面的代码放在了<code>src/wrapWithLoadData.js</code>文件中，我们的使用方式是👇</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">import wrapWithLoadData from './warpWithLoadData';</span><br><span class="line">import React,{ Component } from 'react';</span><br><span class="line"></span><br><span class="line">class InputWithUserName extends Component{</span><br><span class="line"> render(){</span><br><span class="line"> return <input value={this.props.data} /></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">InputWithUserName = wrapWithLoadData(InputWithUserName,'rico');</span><br><span class="line">export default InputWithUserName;</span><br><span class="line"></span><br><span class="line">// 这里是两个组件，不能写在通一个文件中，因为一个文件只能有一个 export default</span><br><span class="line"></span><br><span class="line">import React,{Component} from 'react';</span><br><span class="line">import wrapWithLoadData from './warpWithLoadData';</span><br><span class="line"></span><br><span class="line">class TextareaWithContent extends Component{</span><br><span class="line"> render(){</span><br><span class="line"> return <textare value={this.props.data} /></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">TextareaWithContent = wrapWithLoadData(TextareaWithContent,'message')</span><br><span class="line">export default TextareaWithContent;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>解释: 每当其它组件需要在组件挂载的时候需要从<code>LocalStorage</code>获取<code>username</code>的信息时，我们使用这个高阶组件来获取，这样可避免逻辑重复写多次的情况</p>
</blockquote>
<blockquote>
<p>比如 UserForm的Form表单中，需要从LocalStorage里面获取一个username跟一个content这时候我们使用高阶组件帮我们处理从LocalStorage这个逻辑，我们之前已经写了一个InputWithUserName的一个高阶组件了，现在，我们再写一个从LocalStorage里面获取content的高阶组件</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">//最后的引用将会变成这样</span><br><span class="line">import InputWithUserName from 'xxx/InputWithUserName';</span><br><span class="line">import TextareaWithContent from 'xxx/TextareaWithContent';</span><br><span class="line"></span><br><span class="line">export default class UserForm extends Component{</span><br><span class="line"> render(){</span><br><span class="line"> return(</span><br><span class="line"> <div></span><br><span class="line"> 用户名:<InputWithUserName /></span><br><span class="line"> 用户留言: <TextareaWithContent /></span><br><span class="line"> </div></span><br><span class="line"> )</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<blockquote>
<p>这样写起来就很轻松，我们不需要去关心或者我们不需要重复写从 <em>LocalStorage</em> 里面去取数据的逻辑，这些逻辑统统交给高阶组件去完成,而且复用高。</p>
</blockquote>
<h3 id="总结一下"><a href="#总结一下" class="headerlink" title="总结一下"></a>总结一下</h3><blockquote>
<p>高阶组件其实就是为了代码的复用性，与灵活度，组件间可能有相同的逻辑，把这些逻辑给抽离出来，放到高阶组件中去复用，高阶组件中的包装组件与被包装组件间通过 <em>props</em> 传递数据，有一个点，如果能用props处理的数据尽量通过 <em>props</em>，尽量少使用 <em>state</em> , <em>state</em> 散布满地不是一件好事。</p>
</blockquote>
<blockquote>
<p>目前我接触过的高阶组件是 rc-form 的 createForm() 与 redux的connect()</p>
</blockquote>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</div>
</article>