-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathother.html
465 lines (455 loc) · 95.7 KB
/
other.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>学习笔记</title>
<meta name="generator" content="VuePress 1.7.1">
<meta name="description" content="学习笔记">
<link rel="preload" href="/note/assets/css/0.styles.db885d50.css" as="style"><link rel="preload" href="/note/assets/js/app.a719f9df.js" as="script"><link rel="preload" href="/note/assets/js/2.d9521e05.js" as="script"><link rel="preload" href="/note/assets/js/135.370c6bd4.js" as="script"><link rel="preload" href="/note/assets/js/60.a5e65eec.js" as="script"><link rel="prefetch" href="/note/assets/js/10.53dbe3d3.js"><link rel="prefetch" href="/note/assets/js/100.93ba7bfd.js"><link rel="prefetch" href="/note/assets/js/101.793b8e66.js"><link rel="prefetch" href="/note/assets/js/102.a75ae88b.js"><link rel="prefetch" href="/note/assets/js/103.1e2dcab6.js"><link rel="prefetch" href="/note/assets/js/104.990065d0.js"><link rel="prefetch" href="/note/assets/js/105.e6fc1c9a.js"><link rel="prefetch" href="/note/assets/js/106.ec732ea8.js"><link rel="prefetch" href="/note/assets/js/107.d44bd48e.js"><link rel="prefetch" href="/note/assets/js/108.5a8c341b.js"><link rel="prefetch" href="/note/assets/js/109.850182cc.js"><link rel="prefetch" href="/note/assets/js/11.ab8a0ac5.js"><link rel="prefetch" href="/note/assets/js/110.a0e3ad57.js"><link rel="prefetch" href="/note/assets/js/111.cd6e0339.js"><link rel="prefetch" href="/note/assets/js/112.e9784c84.js"><link rel="prefetch" href="/note/assets/js/113.a472ffc7.js"><link rel="prefetch" href="/note/assets/js/114.805ec452.js"><link rel="prefetch" href="/note/assets/js/115.cdc8986a.js"><link rel="prefetch" href="/note/assets/js/116.da51bbce.js"><link rel="prefetch" href="/note/assets/js/117.a65fffe7.js"><link rel="prefetch" href="/note/assets/js/118.8cb1fae7.js"><link rel="prefetch" href="/note/assets/js/119.32b4f7ce.js"><link rel="prefetch" href="/note/assets/js/12.52c065fd.js"><link rel="prefetch" href="/note/assets/js/120.a780ead8.js"><link rel="prefetch" href="/note/assets/js/121.9433a7c7.js"><link rel="prefetch" href="/note/assets/js/122.c6eb74b9.js"><link rel="prefetch" href="/note/assets/js/123.3e788569.js"><link rel="prefetch" href="/note/assets/js/124.8dfa5d0b.js"><link rel="prefetch" href="/note/assets/js/125.48b6fcb7.js"><link rel="prefetch" href="/note/assets/js/126.94a38472.js"><link rel="prefetch" href="/note/assets/js/127.7a481e53.js"><link rel="prefetch" href="/note/assets/js/128.093aba3e.js"><link rel="prefetch" href="/note/assets/js/129.3fc4df10.js"><link rel="prefetch" href="/note/assets/js/13.d94bf217.js"><link rel="prefetch" href="/note/assets/js/130.c7839516.js"><link rel="prefetch" href="/note/assets/js/131.987d7ba8.js"><link rel="prefetch" href="/note/assets/js/132.ea0e931d.js"><link rel="prefetch" href="/note/assets/js/133.22e85808.js"><link rel="prefetch" href="/note/assets/js/134.b8ebfd55.js"><link rel="prefetch" href="/note/assets/js/136.e07369b5.js"><link rel="prefetch" href="/note/assets/js/137.56800bba.js"><link rel="prefetch" href="/note/assets/js/138.8b116c0a.js"><link rel="prefetch" href="/note/assets/js/139.bac43d1c.js"><link rel="prefetch" href="/note/assets/js/14.2a9192a4.js"><link rel="prefetch" href="/note/assets/js/140.4a17eadd.js"><link rel="prefetch" href="/note/assets/js/141.cd295bad.js"><link rel="prefetch" href="/note/assets/js/142.6efd2227.js"><link rel="prefetch" href="/note/assets/js/143.89de7e52.js"><link rel="prefetch" href="/note/assets/js/144.a098f804.js"><link rel="prefetch" href="/note/assets/js/145.784b28a6.js"><link rel="prefetch" href="/note/assets/js/146.513023ae.js"><link rel="prefetch" href="/note/assets/js/147.922d90dc.js"><link rel="prefetch" href="/note/assets/js/148.3d23d64a.js"><link rel="prefetch" href="/note/assets/js/149.840db222.js"><link rel="prefetch" href="/note/assets/js/15.859a10c9.js"><link rel="prefetch" href="/note/assets/js/150.74862a74.js"><link rel="prefetch" href="/note/assets/js/151.2736e9d1.js"><link rel="prefetch" href="/note/assets/js/152.e63c3471.js"><link rel="prefetch" href="/note/assets/js/153.966b3fc6.js"><link rel="prefetch" href="/note/assets/js/154.56376cc3.js"><link rel="prefetch" href="/note/assets/js/155.8f0a8561.js"><link rel="prefetch" href="/note/assets/js/156.09aee2f0.js"><link rel="prefetch" href="/note/assets/js/157.bc02cc10.js"><link rel="prefetch" href="/note/assets/js/16.738e1f56.js"><link rel="prefetch" href="/note/assets/js/17.e8e327c4.js"><link rel="prefetch" href="/note/assets/js/18.818a4643.js"><link rel="prefetch" href="/note/assets/js/19.1f81be22.js"><link rel="prefetch" href="/note/assets/js/20.927a06a2.js"><link rel="prefetch" href="/note/assets/js/21.0442e83c.js"><link rel="prefetch" href="/note/assets/js/22.34d3c243.js"><link rel="prefetch" href="/note/assets/js/23.041ca0cd.js"><link rel="prefetch" href="/note/assets/js/24.ab787b9b.js"><link rel="prefetch" href="/note/assets/js/25.79bfcade.js"><link rel="prefetch" href="/note/assets/js/26.5d7f90d8.js"><link rel="prefetch" href="/note/assets/js/27.2671b1f4.js"><link rel="prefetch" href="/note/assets/js/28.4e01e604.js"><link rel="prefetch" href="/note/assets/js/29.7ede8cd4.js"><link rel="prefetch" href="/note/assets/js/3.058b01fe.js"><link rel="prefetch" href="/note/assets/js/30.df5b11f0.js"><link rel="prefetch" href="/note/assets/js/31.9cc3438c.js"><link rel="prefetch" href="/note/assets/js/32.ac171e4c.js"><link rel="prefetch" href="/note/assets/js/33.a91f1704.js"><link rel="prefetch" href="/note/assets/js/34.e3aa8165.js"><link rel="prefetch" href="/note/assets/js/35.836c0c93.js"><link rel="prefetch" href="/note/assets/js/36.70b5f1ba.js"><link rel="prefetch" href="/note/assets/js/37.8d6a2a81.js"><link rel="prefetch" href="/note/assets/js/38.25b65713.js"><link rel="prefetch" href="/note/assets/js/39.00a06401.js"><link rel="prefetch" href="/note/assets/js/4.ffe181f3.js"><link rel="prefetch" href="/note/assets/js/40.79e03ec7.js"><link rel="prefetch" href="/note/assets/js/41.782b6521.js"><link rel="prefetch" href="/note/assets/js/42.b1edfa2a.js"><link rel="prefetch" href="/note/assets/js/43.976a4316.js"><link rel="prefetch" href="/note/assets/js/44.f8737fca.js"><link rel="prefetch" href="/note/assets/js/45.0193812e.js"><link rel="prefetch" href="/note/assets/js/46.50c9377b.js"><link rel="prefetch" href="/note/assets/js/47.9a6ace58.js"><link rel="prefetch" href="/note/assets/js/48.42baa09f.js"><link rel="prefetch" href="/note/assets/js/49.cbfd3170.js"><link rel="prefetch" href="/note/assets/js/5.12c1dcf1.js"><link rel="prefetch" href="/note/assets/js/50.83bcbc3e.js"><link rel="prefetch" href="/note/assets/js/51.e73fba1c.js"><link rel="prefetch" href="/note/assets/js/52.3f90cf30.js"><link rel="prefetch" href="/note/assets/js/53.47dda2bd.js"><link rel="prefetch" href="/note/assets/js/54.016e12fb.js"><link rel="prefetch" href="/note/assets/js/55.39c74500.js"><link rel="prefetch" href="/note/assets/js/56.4983a894.js"><link rel="prefetch" href="/note/assets/js/57.99f3508f.js"><link rel="prefetch" href="/note/assets/js/58.3639ea19.js"><link rel="prefetch" href="/note/assets/js/59.653988bb.js"><link rel="prefetch" href="/note/assets/js/6.b4583c06.js"><link rel="prefetch" href="/note/assets/js/61.e0e9ec69.js"><link rel="prefetch" href="/note/assets/js/62.cee512ae.js"><link rel="prefetch" href="/note/assets/js/63.e6f687e0.js"><link rel="prefetch" href="/note/assets/js/64.5890b13c.js"><link rel="prefetch" href="/note/assets/js/65.c87572bd.js"><link rel="prefetch" href="/note/assets/js/66.1ac7bd72.js"><link rel="prefetch" href="/note/assets/js/67.bb8a5cea.js"><link rel="prefetch" href="/note/assets/js/68.852a3e23.js"><link rel="prefetch" href="/note/assets/js/69.6bc1936b.js"><link rel="prefetch" href="/note/assets/js/7.5f0c05a9.js"><link rel="prefetch" href="/note/assets/js/70.1a3c1f42.js"><link rel="prefetch" href="/note/assets/js/71.dd9ca062.js"><link rel="prefetch" href="/note/assets/js/72.b15022e6.js"><link rel="prefetch" href="/note/assets/js/73.e5bcbadf.js"><link rel="prefetch" href="/note/assets/js/74.871c0862.js"><link rel="prefetch" href="/note/assets/js/75.83a6acde.js"><link rel="prefetch" href="/note/assets/js/76.d0fce78e.js"><link rel="prefetch" href="/note/assets/js/77.c42c37fa.js"><link rel="prefetch" href="/note/assets/js/78.e6302d51.js"><link rel="prefetch" href="/note/assets/js/79.e11a66ae.js"><link rel="prefetch" href="/note/assets/js/8.8be6dcef.js"><link rel="prefetch" href="/note/assets/js/80.c3467581.js"><link rel="prefetch" href="/note/assets/js/81.b90d7c7a.js"><link rel="prefetch" href="/note/assets/js/82.b990701b.js"><link rel="prefetch" href="/note/assets/js/83.43487118.js"><link rel="prefetch" href="/note/assets/js/84.621c2345.js"><link rel="prefetch" href="/note/assets/js/85.87a91e25.js"><link rel="prefetch" href="/note/assets/js/86.c07d02da.js"><link rel="prefetch" href="/note/assets/js/87.ac42599c.js"><link rel="prefetch" href="/note/assets/js/88.f8bbb105.js"><link rel="prefetch" href="/note/assets/js/89.dcf2ba99.js"><link rel="prefetch" href="/note/assets/js/9.83fc801e.js"><link rel="prefetch" href="/note/assets/js/90.d9d4650f.js"><link rel="prefetch" href="/note/assets/js/91.2e781fc7.js"><link rel="prefetch" href="/note/assets/js/92.474c333f.js"><link rel="prefetch" href="/note/assets/js/93.283c9083.js"><link rel="prefetch" href="/note/assets/js/94.9d4fe3dc.js"><link rel="prefetch" href="/note/assets/js/95.d46012ad.js"><link rel="prefetch" href="/note/assets/js/96.97059742.js"><link rel="prefetch" href="/note/assets/js/97.1e3299c9.js"><link rel="prefetch" href="/note/assets/js/98.2d1df7db.js"><link rel="prefetch" href="/note/assets/js/99.58122f4b.js">
<link rel="stylesheet" href="/note/assets/css/0.styles.db885d50.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/note/" class="home-link router-link-active"><!----> <span class="site-name">学习笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/note/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/note/css/css基础.html" class="nav-link">
css 相关
</a></div><div class="nav-item"><a href="/note/react/react基础.html" class="nav-link">
react 相关
</a></div><div class="nav-item"><a href="/note/js-patterns/代理模式.html" class="nav-link">
js 设计模式
</a></div><div class="nav-item"><a href="/note/typescript/typescript基础语法.html" class="nav-link">
typescript
</a></div><div class="nav-item"><a href="/note/node/基础知识.html" class="nav-link">
node
</a></div><div class="nav-item"><a href="/note/javascript/知识体系.html" class="nav-link">
javascript
</a></div><div class="nav-item"><a href="/note/vue/相关笔记.html" class="nav-link">
vue
</a></div><div class="nav-item"><a href="/note/webpack/基础知识.html" class="nav-link">
webpack
</a></div><div class="nav-item"><a href="/note/webgis/坐标系相关.html" class="nav-link">
webgis
</a></div><div class="nav-item"><a href="/note/http/HTTP协议基础.html" class="nav-link">
http
</a></div><div class="nav-item"><a href="/note/Interview/forEach-forIn-forOf-map之间的区别.html" class="nav-link">
Interview
</a></div><div class="nav-item"><a href="/note/gisAlgorithm/数据结构-矢量.html" class="nav-link">
gis 算法
</a></div><div class="nav-item"><a href="/note/graphics/图形学基础.html" class="nav-link">
图形学相关
</a></div><div class="nav-item"><a href="/note/js-algorithm/栈.html" class="nav-link">
算法与数据结构
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/note/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/note/css/css基础.html" class="nav-link">
css 相关
</a></div><div class="nav-item"><a href="/note/react/react基础.html" class="nav-link">
react 相关
</a></div><div class="nav-item"><a href="/note/js-patterns/代理模式.html" class="nav-link">
js 设计模式
</a></div><div class="nav-item"><a href="/note/typescript/typescript基础语法.html" class="nav-link">
typescript
</a></div><div class="nav-item"><a href="/note/node/基础知识.html" class="nav-link">
node
</a></div><div class="nav-item"><a href="/note/javascript/知识体系.html" class="nav-link">
javascript
</a></div><div class="nav-item"><a href="/note/vue/相关笔记.html" class="nav-link">
vue
</a></div><div class="nav-item"><a href="/note/webpack/基础知识.html" class="nav-link">
webpack
</a></div><div class="nav-item"><a href="/note/webgis/坐标系相关.html" class="nav-link">
webgis
</a></div><div class="nav-item"><a href="/note/http/HTTP协议基础.html" class="nav-link">
http
</a></div><div class="nav-item"><a href="/note/Interview/forEach-forIn-forOf-map之间的区别.html" class="nav-link">
Interview
</a></div><div class="nav-item"><a href="/note/gisAlgorithm/数据结构-矢量.html" class="nav-link">
gis 算法
</a></div><div class="nav-item"><a href="/note/graphics/图形学基础.html" class="nav-link">
图形学相关
</a></div><div class="nav-item"><a href="/note/js-algorithm/栈.html" class="nav-link">
算法与数据结构
</a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/note/react/react基础.html" class="sidebar-link">react基础</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/react/react基础.html#fragment-类似-vue-中的-template-一样的作用" class="sidebar-link">Fragment 类似 Vue 中的 template 一样的作用</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#react中定义数据要放在状态之中" class="sidebar-link">react中定义数据要放在状态之中</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#input-绑定数值" class="sidebar-link">input 绑定数值</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#绑定事件-onchange" class="sidebar-link">绑定事件：onChange</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#改变状态中的值-跟-vue-还是有很大的区别" class="sidebar-link">改变状态中的值：跟 vue 还是有很大的区别：</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#for-循环-跟vue的-v-for-还是有很大的区别" class="sidebar-link">for 循环：跟Vue的 v-for 还是有很大的区别</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#class的样式添加" class="sidebar-link">class的样式添加：</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#与vue中-v-html指令类似的-dangerouslysetinnerhtml" class="sidebar-link">与Vue中 v-html指令类似的：dangerouslySetInnerHTML</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#如果需要点击一个label标签-然后input获取输入焦点-可以这样写" class="sidebar-link">如果需要点击一个label标签，然后input获取输入焦点，可以这样写：</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#组件之间的传值" class="sidebar-link">组件之间的传值</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#react-框架的特点" class="sidebar-link">react 框架的特点</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#虚拟dom" class="sidebar-link">虚拟DOM</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#react中ref的使用" class="sidebar-link">React中ref的使用</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#react中声明周期函数" class="sidebar-link">React中声明周期函数</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#react中动画" class="sidebar-link">React中动画</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#子组件调用父组件的方法并传递参数" class="sidebar-link">子组件调用父组件的方法并传递参数</a></li><li class="sidebar-sub-header"><a href="/note/react/react基础.html#无状态组件" class="sidebar-link">无状态组件</a></li></ul></li><li><a href="/note/react/jsx.html" class="sidebar-link">jsx</a></li><li><a href="/note/react/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/react/redux.html#redux" class="sidebar-link">Redux</a></li><li class="sidebar-sub-header"><a href="/note/react/redux.html#redux-thunk-中间件使用发送请求" class="sidebar-link">Redux-thunk 中间件使用发送请求</a></li><li class="sidebar-sub-header"><a href="/note/react/redux.html#redux-中间件" class="sidebar-link">Redux 中间件</a></li><li class="sidebar-sub-header"><a href="/note/react/redux.html#redux-saga-中间件的使用" class="sidebar-link">redux-saga 中间件的使用</a></li></ul></li><li><a href="/note/react/react-redux.html" class="sidebar-link">react-redux</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/react/react-redux.html#react-redux" class="sidebar-link">react-redux</a></li></ul></li><li><a href="/note/react/react-hooks.html" class="sidebar-link">react-hooks</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#react-hooks" class="sidebar-link">react hooks</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#创建项目" class="sidebar-link">创建项目</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#react-scripts-工作原理" class="sidebar-link">react-scripts 工作原理</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#多页面开发配置" class="sidebar-link">多页面开发配置</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#context" class="sidebar-link">Context</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#类组件不足" class="sidebar-link">类组件不足</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#hooks优势" class="sidebar-link">Hooks优势</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#hooks-常见的问题" class="sidebar-link">hooks 常见的问题</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#usestate" class="sidebar-link">useState</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#useeffect" class="sidebar-link">useEffect</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#useref" class="sidebar-link">useRef</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#usecontext" class="sidebar-link">useContext</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#usememo、usecallback" class="sidebar-link">useMemo、useCallback</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#自定义hooks" class="sidebar-link">自定义hooks</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#context-2" class="sidebar-link">Context</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#contexttype-的用法" class="sidebar-link">contextType 的用法</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#lazy" class="sidebar-link">lazy</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#项目优化" class="sidebar-link">项目优化</a></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#pwa" class="sidebar-link">pwa</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/react/react-hooks.html#mpa-配置" class="sidebar-link">mpa 配置</a></li></ul></li><li><a href="/note/react/other.html" aria-current="page" class="active sidebar-link">项目笔记</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/react/other.html#styled-components" class="sidebar-link">styled-components</a></li><li class="sidebar-sub-header"><a href="/note/react/other.html#css相关" class="sidebar-link">css相关</a></li><li class="sidebar-sub-header"><a href="/note/react/other.html#combinereducers合并reducer" class="sidebar-link">combineReducers合并reducer</a></li><li class="sidebar-sub-header"><a href="/note/react/other.html#使用immutable-js库" class="sidebar-link">使用immutable.js库</a></li><li class="sidebar-sub-header"><a href="/note/react/other.html#css-相关" class="sidebar-link">css 相关</a></li><li class="sidebar-sub-header"><a href="/note/react/other.html#react-中的路由" class="sidebar-link">React 中的路由</a></li><li class="sidebar-sub-header"><a href="/note/react/other.html#项目中性能的优化" class="sidebar-link">项目中性能的优化</a></li></ul></li><li><a href="/note/react/React中的路由传参.html" class="sidebar-link">React中的路由传参</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/react/React中的路由传参.html#react-中路由传参" class="sidebar-link">React 中路由传参</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/react/React中的路由传参.html#params" class="sidebar-link">params</a></li><li class="sidebar-sub-header"><a href="/note/react/React中的路由传参.html#query" class="sidebar-link">query</a></li><li class="sidebar-sub-header"><a href="/note/react/React中的路由传参.html#state" class="sidebar-link">state</a></li><li class="sidebar-sub-header"><a href="/note/react/React中的路由传参.html#search" class="sidebar-link">search</a></li></ul></li></ul></li><li><a href="/note/react/react-typescript常见问题.html" class="sidebar-link">react-typescript常见问题</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#使用-fc-类型来声明函数组件" class="sidebar-link">使用 FC 类型来声明函数组件</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#不要直接使用-export-default-导出组件" class="sidebar-link">不要直接使用 export default 导出组件</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#默认-props-声明" class="sidebar-link">默认 props 声明</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#泛型函数组件" class="sidebar-link">泛型函数组件</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#parent-child-方式声明子组件" class="sidebar-link">Parent.Child 方式声明子组件</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#forwarding-refs-通过-ref-调用组件方法" class="sidebar-link">Forwarding Refs 通过 ref 调用组件方法</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#高阶组件" class="sidebar-link">高阶组件</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#render-props" class="sidebar-link">Render Props</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#context" class="sidebar-link">Context</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#使用-handleevent-命名事件处理器" class="sidebar-link">使用 handleEvent 命名事件处理器</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#事件处理器的类型定义" class="sidebar-link">事件处理器的类型定义</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#自定义组件暴露事件处理器类型" class="sidebar-link">自定义组件暴露事件处理器类型</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#获取原生元素-props-定义" class="sidebar-link">获取原生元素 props 定义</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#为没有提供-typescript-声明文件的第三方库自定义模块声明" class="sidebar-link">为没有提供 Typescript 声明文件的第三方库自定义模块声明</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#有状态组件和无状态组件" class="sidebar-link">有状态组件和无状态组件</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#一些特殊的-api-exclude、extract、pick、record、omit、nonnullable、returntype" class="sidebar-link">一些特殊的 API：Exclude、Extract、Pick、Record、Omit、NonNullable、ReturnType</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#exclude-t-u-从-t-中排除那些可以赋值给-u-的类型" class="sidebar-link">Exclude 从 T 中排除那些可以赋值给 U 的类型</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#extract-t-u-从-t-中提取那些可以赋值给-u-的类型" class="sidebar-link">Extract 从 T 中提取那些可以赋值给 U 的类型</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#pick-t-k-从-t-中取出一系列-k-的属性-类似将所有属性设置为可选" class="sidebar-link">Pick 从 T 中取出一系列 K 的属性（类似将所有属性设置为可选）</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#record-k-t-将-k-中所有的属性的值转化为-t-类型" class="sidebar-link">Record 将 K 中所有的属性的值转化为 T 类型</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#omit-t-k-从对象-t-中排除-key-是-k-的属性" class="sidebar-link">Omit 从对象 T 中排除 key 是 K 的属性</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#nonnullable-排除-t-为-null-、undefined" class="sidebar-link">NonNullable 排除 T 为 null 、undefined</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#returntype-获取函数-t-返回值的类型" class="sidebar-link">ReturnType 获取函数 T 返回值的类型</a></li></ul></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#usestate-初始化状态问题" class="sidebar-link">useState 初始化状态问题</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#useeffect" class="sidebar-link">useEffect</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#usememo、usecallback" class="sidebar-link">useMemo、useCallback</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#useref" class="sidebar-link">useRef</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript常见问题.html#usereducer" class="sidebar-link">useReducer</a></li></ul></li><li><a href="/note/react/react-typescript项目笔记.html" class="sidebar-link">react-typescript项目笔记</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#ui-库" class="sidebar-link">UI 库</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#scss-中的-import" class="sidebar-link">scss 中的 import</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#使用-classnames-库" class="sidebar-link">使用 classnames 库</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#使用联合类型合并-dom-原生属性以及新增属性-使用-partial-将属性变为可选属性" class="sidebar-link">使用联合类型合并 DOM 原生属性以及新增属性;使用 Partial 将属性变为可选属性</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#scss-中的-each-、maps" class="sidebar-link">scss 中的 @each 、Maps</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#增加测试用例" class="sidebar-link">增加测试用例</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#使用-testing-library-工具进行测试-react-组件库相关用例" class="sidebar-link">使用 testing-library 工具进行测试 react 组件库相关用例</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#测试中的-beforeeach-钩子函数" class="sidebar-link">测试中的 beforeEach 钩子函数</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#jest-测试中的-cleanup" class="sidebar-link">jest 测试中的 cleanup</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#jest-相关笔记" class="sidebar-link">jest 相关笔记</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#测试代码中解决异步问题" class="sidebar-link">测试代码中解决异步问题</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#如果-ts-提示一个变量有两种类型报错" class="sidebar-link">如果 ts 提示一个变量有两种类型报错</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#type" class="sidebar-link">type</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#react-内置的-style-的类型注释" class="sidebar-link">react 内置的 style 的类型注释</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#将属性混入到实例中" class="sidebar-link">将属性混入到实例中</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#事件类型的注释" class="sidebar-link">事件类型的注释</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#css-中的-scope-伪类" class="sidebar-link">css 中的 :scope 伪类</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#sass-中的循环" class="sidebar-link">sass 中的循环</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#css-中-display-以及-react-中的动画" class="sidebar-link">css 中 display 以及 react 中的动画</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#storybook-的使用" class="sidebar-link">storybook 的使用</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#storybook-addons-info-插件的使用" class="sidebar-link">storybook/addons-info 插件的使用</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#react-docgen" class="sidebar-link">react-docgen</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#ts-的-omit-来忽略属性" class="sidebar-link">ts 的 Omit 来忽略属性</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#指定运行测试用例" class="sidebar-link">指定运行测试用例</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#fetch" class="sidebar-link">Fetch</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#mock-server" class="sidebar-link">mock server</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#usestate-更新数组对象" class="sidebar-link">useState 更新数组对象</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#jest-mock-一个库" class="sidebar-link">jest mock 一个库</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#jest-测试-是否包含某些特定的属性" class="sidebar-link">jest 测试 是否包含某些特定的属性</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#js-模块化" class="sidebar-link">js 模块化</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#创建组件库模块入口文件" class="sidebar-link">创建组件库模块入口文件</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#使用-npm-link-本地测试组件库" class="sidebar-link">使用 npm link 本地测试组件库</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#发布-npm-包" class="sidebar-link">发布 npm 包</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#ci-持续集成、cd-持续交付、持续部署" class="sidebar-link">CI - 持续集成、CD - 持续交付、持续部署</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#使用-travis-自动运行测试" class="sidebar-link">使用 travis 自动运行测试</a></li><li class="sidebar-sub-header"><a href="/note/react/react-typescript项目笔记.html#使用-travis-自动发布文档页面" class="sidebar-link">使用 travis 自动发布文档页面</a></li></ul></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="styled-components"><a href="#styled-components" class="header-anchor">#</a> styled-components</h2> <p>使用styled-components去管理项目中的样式。
首先需要进行安装：yarn add styled-components。</p> <blockquote><p>需要注意的是injectGlobal方法已经被弃用。</p></blockquote> <p>全局引用样式：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 新建一个style.js文件</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> createGlobalStyle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'styled-components'</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> Globalstyle <span class="token operator">=</span> createGlobalStyle<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
</span><span class="token template-punctuation string">`</span></span>
<span class="token comment">// 在根组件中使用就可以了</span>
<span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Fragment <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Globalstyle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./style'</span>
<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span>Fragment<span class="token operator">></span>
<span class="token operator"><</span>Globalstyle<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>Fragment<span class="token operator">></span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App
</code></pre></div><p>局部样式文件的使用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 定义style.js</span>
<span class="token keyword">import</span> styled <span class="token keyword">from</span> <span class="token string">'styled-components'</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> HeaderWrapper <span class="token operator">=</span> styled<span class="token punctuation">.</span>div<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
height: 56px;
background: red;
</span><span class="token template-punctuation string">`</span></span>
</code></pre></div><p>在组件中使用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>
HeaderWrapper
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./style'</span>
<span class="token keyword">class</span> <span class="token class-name">Header</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span>HeaderWrapper<span class="token operator">></span>Header<span class="token operator"><</span><span class="token operator">/</span>HeaderWrapper<span class="token operator">></span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> Header
</code></pre></div><p>引入图片：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> logoPic <span class="token keyword">from</span> <span class="token string">'../../statics/logo.png'</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> Logo <span class="token operator">=</span> styled<span class="token punctuation">.</span>a<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
background: url(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>logoPic<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">);
background-size: contain;
</span><span class="token template-punctuation string">`</span></span>
</code></pre></div><p>可以直接在样式文件中定义属性：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> Logo <span class="token operator">=</span> styled<span class="token punctuation">.</span>a<span class="token punctuation">.</span><span class="token function">attrs</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
href<span class="token operator">:</span> <span class="token string">'/'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
background: url(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>logoPic<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">);
background-size: contain;
</span><span class="token template-punctuation string">`</span></span>
</code></pre></div><p>可以在组件中传递参数到样式文件中：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator"><</span>RecommendItem imgUrl<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'imgUrl'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>RecommendItem<span class="token operator">></span>
<span class="token comment">// 样式文件中接收</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> RecommendItem <span class="token operator">=</span> styled<span class="token punctuation">.</span>div<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
width: 280px;
height: 50px;
background: url(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token operator">=></span> props<span class="token punctuation">.</span>imgUrl<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">);
background-size: contain;
</span><span class="token template-punctuation string">`</span></span>
</code></pre></div><p>类似Vue的v-html：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator"><</span>Content dangerouslySetInnerHTML <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">{</span>__html<span class="token operator">:</span> content<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
</code></pre></div><h2 id="css相关"><a href="#css相关" class="header-anchor">#</a> css相关</h2> <p>一般我们进行定位的时候，将子元素定位在父元素中一定的位置。首先应该将父元素的position设置为相对定位（relative），然后进行设置子元素的position为absolute，然后进行设置top，left等等。如果子元素为内敛元素需要设置display为block然后设置宽高。
如果一个元素的背景设置了一张图片，需要图片进行按照元素的大小进行显示，需要设置：background-size: contain;</p> <div class="language-css extra-class"><pre class="language-css"><code> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 56px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>${logoPic}<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token property">background-size</span><span class="token punctuation">:</span> contain<span class="token punctuation">;</span>
</code></pre></div><p>如果我们设置一个元素的margin还有设置了他的宽，这样他的实际的宽度就是width加上左右margin值，我们可以使用box-sizing进行设置将边框和内边距放入框中：
设置为border-box就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> NavSearch <span class="token operator">=</span> styled<span class="token punctuation">.</span>input<span class="token punctuation">.</span><span class="token function">attrs</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
placeholder<span class="token operator">:</span> <span class="token string">'搜索'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
width: 160px;
height: 38px;
margin-top: 9px;
box-sizing: border-box;
padding: 0 20px;
border: none;
outline: none;
border-radius: 19px;
background: #eee;
font-size: 15px;
</span><span class="token template-punctuation string">`</span></span>
</code></pre></div><p>float触发了bfc。
一般我们设置了子元素的浮动，可以设置父元素overflow为hidden，这样可以撑开父元素。</p> <h2 id="combinereducers合并reducer"><a href="#combinereducers合并reducer" class="header-anchor">#</a> combineReducers合并reducer</h2> <p>项目中使用redux，react-redux进行管理数据；使用combineReducers函数进行合并不同的reducer。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> combineReducers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> reducer <span class="token keyword">as</span> headerReducer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../common/header/store'</span>
<span class="token comment">// 合并reducer</span>
<span class="token keyword">const</span> reducer <span class="token operator">=</span> <span class="token function">combineReducers</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
header<span class="token operator">:</span> headerReducer
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> reducer
</code></pre></div><p>然后我们在项目中使用的时候，需要添加一个header前缀：</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">const</span> <span class="token function-variable function">mapStateToProps</span> <span class="token operator">=</span> <span class="token parameter">state</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
focused<span class="token operator">:</span> state<span class="token punctuation">.</span>header<span class="token punctuation">.</span>focused
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="使用immutable-js库"><a href="#使用immutable-js库" class="header-anchor">#</a> 使用immutable.js库</h2> <p>我们在reducer中不能修改store中的状态。我们可以使用immutable.js库，会生成immutable对象，是不可修改的。
首先安装：yarn add immutable；使用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> constants <span class="token keyword">from</span> <span class="token string">'./constants.js'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> fromJS <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'immutable'</span>
<span class="token keyword">const</span> defaultState <span class="token operator">=</span> <span class="token function">fromJS</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
focused<span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">state <span class="token operator">=</span> defaultState<span class="token punctuation">,</span> action</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type <span class="token operator">===</span> constants<span class="token punctuation">.</span><span class="token constant">SEARCH_FOCUS</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// immutable对象的set方法会结合之前immutable对象的值</span>
<span class="token comment">// 和设置的值，返回一个全新的对象</span>
<span class="token keyword">return</span> state<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'focused'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type <span class="token operator">===</span> constants<span class="token punctuation">.</span><span class="token constant">SEARCH_BLUR</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> state<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'focused'</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type <span class="token operator">===</span> constants<span class="token punctuation">.</span><span class="token constant">CHANGE_LIST</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// return state.set('list', action.data).set('totalPage', action.totalPage)</span>
<span class="token comment">// 可以这样写</span>
<span class="token keyword">return</span> state<span class="token punctuation">.</span><span class="token function">merge</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
list<span class="token operator">:</span> action<span class="token punctuation">.</span>data<span class="token punctuation">,</span>
totalPage<span class="token operator">:</span> action<span class="token punctuation">.</span>totalPage
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> state
<span class="token punctuation">}</span>
</code></pre></div><p>在读取数据的时候，也是需要使用get来获取到数据：</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">const</span> <span class="token function-variable function">mapStateToProps</span> <span class="token operator">=</span> <span class="token parameter">state</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
focused<span class="token operator">:</span> state<span class="token punctuation">.</span>header<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'focused'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>我们在获取值得时候state.header.get('focused')这样的方式进行获取，前面state是一个对象，后面又是以immutable对象的方式获取数据，这样
获取数据的方式不一致，我们可以将state整个变成一个immutable对象，这样获取数据的方式就统一起来了、我们可以借助redux-immutable库。
首先进行安装：yarn add redux-immutable;使用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> combineReducers <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux-immutable'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> reducer <span class="token keyword">as</span> headerReducer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../common/header/store'</span>
<span class="token comment">// 合并reducer--生成的数据内容就是immutable对象</span>
<span class="token keyword">const</span> reducer <span class="token operator">=</span> <span class="token function">combineReducers</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
header<span class="token operator">:</span> headerReducer
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> reducer
</code></pre></div><p>然后在获取数据的时候：</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">const</span> <span class="token function-variable function">mapStateToProps</span> <span class="token operator">=</span> <span class="token parameter">state</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
focused<span class="token operator">:</span> state<span class="token punctuation">.</span><span class="token function">getIn</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'header'</span><span class="token punctuation">,</span> <span class="token string">'focused'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token comment">// 下面的方式也是可以的</span>
<span class="token comment">// focused: state.get('header').get('focused')</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>这里需要注意的是，如果我们使用了fromJS方法去将我们的对象变成immutable对象的时候，对象里面的数组也会变成immutable类型，如果直接改变数组的类型，会从immutable类型转换为普通的数据类型。所以在修改数组类型的时候，设置的数据类型也应该是immutable类型：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getList</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token parameter">dispatch</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/api/headerList.json'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> res<span class="token punctuation">.</span>data
<span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">changeList</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// 然后在reducer中进行修改数据</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type <span class="token operator">===</span> constants<span class="token punctuation">.</span><span class="token constant">CHANGE_LIST</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> state<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'list'</span><span class="token punctuation">,</span> action<span class="token punctuation">.</span>data<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p>我们在使用ref的时候需要注意的是，ref是一个函数：spinIcon就是这个span的dom元素了。</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token operator"><</span>span
ref <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token parameter">icon</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>spinIcon <span class="token operator">=</span> icon <span class="token punctuation">}</span> <span class="token punctuation">}</span>
className<span class="token operator">=</span><span class="token string">"iconfont spin"</span>
<span class="token operator">></span>
<span class="token operator">&</span>#xe851<span class="token punctuation">;</span>
<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
</code></pre></div><h2 id="css-相关"><a href="#css-相关" class="header-anchor">#</a> css 相关</h2> <p>我们如果想要点击某个按钮，让他的图标进行旋转：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 首先定义图标的样式 */</span>
<span class="token selector">.spin</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
<span class="token property">margin-right</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all .2s ease-in<span class="token punctuation">;</span>
<span class="token property">transform-origin</span><span class="token punctuation">:</span> center center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>然后通过js获取到该元素的dom进行修改transition:</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">let</span> originAngle <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span>spin<span class="token punctuation">.</span>style<span class="token punctuation">.</span>transform<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[^0-9]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">ig</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
spin<span class="token punctuation">.</span>style<span class="token punctuation">.</span>transform <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">rotate(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>originAngle <span class="token operator">+</span> <span class="token number">360</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">deg)</span><span class="token template-punctuation string">`</span></span>
</code></pre></div><h2 id="react-中的路由"><a href="#react-中的路由" class="header-anchor">#</a> React 中的路由</h2> <p>首先需要进行安装：yarn add react-router-dom，然后在根组件中进行使用：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Fragment <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Globalstyle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./style'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Globaliconfont <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./statics/iconfont/iconfont'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter<span class="token punctuation">,</span> Route <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span>
<span class="token keyword">import</span> Header <span class="token keyword">from</span> <span class="token string">'./common/header/index'</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'./store/index'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Provider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span>
<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span>Fragment<span class="token operator">></span>
<span class="token operator"><</span>BrowserRouter<span class="token operator">></span>
<span class="token operator"><</span>div<span class="token operator">></span>
<span class="token comment">// exact 参数是代表当访问的的地址跟path一直的时候进行显示，比如下面的两个path，如果不进行设置在/detail路径下/里面的内容也会显示</span>
<span class="token operator"><</span>Route path <span class="token operator">=</span> <span class="token string">'/'</span> exact render <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator"><</span>div<span class="token operator">></span>home<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>Route<span class="token operator">></span>
<span class="token operator"><</span>Route path <span class="token operator">=</span> <span class="token string">'/detail'</span> exact render <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator"><</span>div<span class="token operator">></span>detail<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>Route<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>BrowserRouter<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>Fragment<span class="token operator">></span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App
</code></pre></div><p>如果我们想在对象的路由直接渲染我们的组件：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">'./pages/home/index'</span>
<span class="token keyword">import</span> Detail <span class="token keyword">from</span> <span class="token string">'./pages/detail'</span>
<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span>Fragment<span class="token operator">></span>
<span class="token punctuation">{</span><span class="token comment">/* 将store数据提供给内部组件 */</span><span class="token punctuation">}</span>
<span class="token operator"><</span>Provider store <span class="token operator">=</span> <span class="token punctuation">{</span> store <span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator"><</span>div<span class="token operator">></span>
<span class="token operator"><</span>BrowserRouter<span class="token operator">></span>
<span class="token operator"><</span>div<span class="token operator">></span>
<span class="token operator"><</span>Route path <span class="token operator">=</span> <span class="token string">'/'</span> exact component <span class="token operator">=</span> <span class="token punctuation">{</span> Home <span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>Route<span class="token operator">></span>
<span class="token operator"><</span>Route path <span class="token operator">=</span> <span class="token string">'/detail'</span> exact component <span class="token operator">=</span> <span class="token punctuation">{</span> Detail <span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>Route<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>BrowserRouter<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>Provider<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>Fragment<span class="token operator">></span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App
</code></pre></div><p>我们在Windows绑定的全局的事件需要在组件要被销毁的时候进行移除：</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">changeHomeData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">bindEvents</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 在组件从 DOM 中移除之前立刻被调用， 组件销毁的时候也要将windows绑定的全局的事件去掉</span>
<span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
window<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>changeScrollTopShow<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token function">bindEvents</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>changeScrollTopShow<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p>在react中如果使用a标点做页面切换，会导致重新加载整个页面。可以使用react-router-dom
提供的Link组件来实现。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Link <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span>Link key<span class="token operator">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span> to<span class="token operator">=</span><span class="token string">'/detail'</span><span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>Link<span class="token operator">></span>
<span class="token punctuation">)</span>
</code></pre></div><p>需要注意的是这个理由跳转的组件需要放在根组件中BrowserRouter之中：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Fragment <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Globalstyle <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./style'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Globaliconfont <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./statics/iconfont/iconfont'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserRouter<span class="token punctuation">,</span> Route <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span>
<span class="token keyword">import</span> Header <span class="token keyword">from</span> <span class="token string">'./common/header/index'</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'./store/index'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Provider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span>
<span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">'./pages/home/index'</span>
<span class="token keyword">import</span> Detail <span class="token keyword">from</span> <span class="token string">'./pages/detail'</span>
<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span>Fragment<span class="token operator">></span>
<span class="token punctuation">{</span><span class="token comment">/* 将store数据提供给内部组件 */</span><span class="token punctuation">}</span>
<span class="token operator"><</span>Provider store <span class="token operator">=</span> <span class="token punctuation">{</span> store <span class="token punctuation">}</span><span class="token operator">></span>
<span class="token operator"><</span>Globalstyle<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>Globaliconfont <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>BrowserRouter<span class="token operator">></span>
<span class="token operator"><</span>div<span class="token operator">></span>
<span class="token punctuation">{</span>
<span class="token comment">// 这个组件我们使用了Link组件进行跳转，需要放在BrowserRouter组件中</span>
<span class="token punctuation">}</span>
<span class="token operator"><</span>Header <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>Route path <span class="token operator">=</span> <span class="token string">'/'</span> exact component <span class="token operator">=</span> <span class="token punctuation">{</span> Home <span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>Route<span class="token operator">></span>
<span class="token operator"><</span>Route path <span class="token operator">=</span> <span class="token string">'/detail'</span> exact component <span class="token operator">=</span> <span class="token punctuation">{</span> Detail <span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>Route<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>BrowserRouter<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>Provider<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>Fragment<span class="token operator">></span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App
</code></pre></div><p>动态路由获取参数：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 首先在根路径设置匹配的模式：/detail/:id也就是匹配后面的id</span>
<span class="token operator"><</span>BrowserRouter<span class="token operator">></span>
<span class="token operator"><</span>div<span class="token operator">></span>
<span class="token operator"><</span>Header <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>Route path <span class="token operator">=</span> <span class="token string">'/detail/:id'</span> exact component <span class="token operator">=</span> <span class="token punctuation">{</span> Detail <span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>Route<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>BrowserRouter<span class="token operator">></span>
</code></pre></div><p>然后在detail组件中可以接收到id：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>match<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id
</code></pre></div><p>另一种方式是不修改根组件的路由：</p> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token operator"><</span>div<span class="token operator">></span>
<span class="token operator"><</span>Header <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>Route path <span class="token operator">=</span> <span class="token string">'/detail'</span> exact component <span class="token operator">=</span> <span class="token punctuation">{</span> Detail <span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>Route<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
</code></pre></div><p>然后在detail组件中可以接收到id：去解析。这样比较麻烦</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>location<span class="token punctuation">.</span>search
</code></pre></div><p>路由的跳转：用Redirect这个组件进行路由的跳转</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Redirect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> loginStatus <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>loginStatus<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span>LoginWrapper<span class="token operator">></span>
<span class="token operator"><</span>LoginBox<span class="token operator">></span>
<span class="token operator"><</span>Input placeholder<span class="token operator">=</span><span class="token string">"账号"</span> ref<span class="token operator">=</span><span class="token punctuation">{</span><span class="token parameter">input</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>account <span class="token operator">=</span> input <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>Input placeholder<span class="token operator">=</span><span class="token string">"密码"</span> type<span class="token operator">=</span><span class="token string">"password"</span> ref<span class="token operator">=</span><span class="token punctuation">{</span><span class="token parameter">input</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>password <span class="token operator">=</span> input <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span>
<span class="token operator"><</span>Button onClick<span class="token operator">=</span><span class="token punctuation">{</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">login</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>account<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>password<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>登录<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>LoginBox<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>LoginWrapper<span class="token operator">></span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token operator"><</span>Redirect to<span class="token operator">=</span><span class="token string">"/"</span> <span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>在项目中，不同的组件如果是要用不同的store里面的数据，需要引入对应的store里面的actioncreators。进行修改store里面的数据。</p> <h2 id="项目中性能的优化"><a href="#项目中性能的优化" class="header-anchor">#</a> 项目中性能的优化</h2> <ul><li>使用无状态组件</li> <li>使用PureComponent组件
使用PureComponent需要结合数据框架immutable.js来实现。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> PureComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token comment">// PureComponent自己做了shouldComponentUpdate的优化，提高性能</span>
<span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">PureComponent</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre></div><ul><li>使用异步组件进行加载</li></ul> <p>首先进行安装：yarn add react-loadable, 使用：
首先需要创建一个js组件，注意这里加载的./index.js是需要变成异步加载的组件的路径</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// loadable.js</span>
<span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> Loadable <span class="token keyword">from</span> <span class="token string">'react-loadable'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> LoadableComponent <span class="token operator">=</span> <span class="token function">Loadable</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment">// 下面是异步加载的组件</span>
<span class="token function-variable function">loader</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./index.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token comment">// loading，加载时空白显示</span>
<span class="token function">loading</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token operator"><</span>div<span class="token operator">></span>正在加载<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator"><</span>LoadableComponent<span class="token operator">/</span><span class="token operator">></span>
<span class="token comment">// export default class App extends React.Component {</span>
<span class="token comment">// render() {</span>
<span class="token comment">// return <LoadableComponent/></span>
<span class="token comment">// }</span>
<span class="token comment">// }</span>
</code></pre></div><p>然后在app.js根组件中，修改异步加载的组件路径为我们修改的这个组件：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Detail <span class="token keyword">from</span> <span class="token string">'./pages/detail/loadable'</span>
<span class="token operator"><</span>Route path <span class="token operator">=</span> <span class="token string">'/detail/:id'</span> exact component <span class="token operator">=</span> <span class="token punctuation">{</span> Detail <span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>Route<span class="token operator">></span>
</code></pre></div><p>然后组件内部有接收路由参数的，所以需要修改detail组件：主要是使用withRouter这个组件来包裹我们的组件，
withRouter包裹就是让包裹的组件有能力去获取router里面的内容</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> PureComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> connect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> actionCreators <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./store/index'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> withRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span>
<span class="token keyword">class</span> <span class="token class-name">Detail</span> <span class="token keyword">extends</span> <span class="token class-name">PureComponent</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token operator"><</span>DetailWrapper<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>DetailWrapper<span class="token operator">></span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// withRouter包裹就是让包裹的组件有能力去获取router里面的内容</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span>mapState<span class="token punctuation">,</span> mapDispatch<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token function">withRouter</span><span class="token punctuation">(</span>Detail<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre></div><section style="border-top:2px solid #eaecef;padding-top:1rem;margin-top:2rem;"><div><span data-flag-title="Your Article Title" class="leancloud-visitors"><em class="post-meta-item-text">阅读量： </em> <i class="leancloud-visitors-count"></i></span></div> <h3><a href="javascript:;"></a>
评 论：
</h3> <div id="vcomments"></div></section></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">更新:</span> <span class="time">11/22/2020, 11:00:56 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/note/react/react-hooks.html" class="prev">
react-hooks
</a></span> <span class="next"><a href="/note/react/React中的路由传参.html">
React中的路由传参
</a>
→
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/note/assets/js/app.a719f9df.js" defer></script><script src="/note/assets/js/2.d9521e05.js" defer></script><script src="/note/assets/js/135.370c6bd4.js" defer></script><script src="/note/assets/js/60.a5e65eec.js" defer></script>
</body>
</html>