-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy path23.React 常考进阶知识点.htm
76 lines (70 loc) · 63.2 KB
/
23.React 常考进阶知识点.htm
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
<!DOCTYPE html>
<!-- saved from url=(0080)https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5bdc73396fb9a04a0c2ddfe2 -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover"><meta name="google-site-verification" content="cCHsgG9ktuCTgWgYfqCJql8AeR4gAne4DTZqztPoirE"><meta name="apple-itunes-app" content="app-id=987739104"><meta name="baidu-site-verification" content="qiK2a1kcFc"><meta name="360-site-verification" content="4c3c7d57d59f0e1a308462fbc7fd7e51"><meta name="sogou_site_verification" content="c49WUDZczQ"><style>body {
font-size: 16px;
line-height: 2;
}
a, button, input {
margin: 1rem 1.5rem;
}
img {
width: 0;
height: 0;
}
#juejin {
overflow-x: hidden;
}</style><title data-vue-meta="true">前端面试之道 - yck - 掘金小册</title><link rel="apple-touch-icon" sizes="180x180" href="https://b-gold-cdn.xitu.io/favicons/v2/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon-16x16.png"><link rel="manifest" href="https://b-gold-cdn.xitu.io/favicons/v2/manifest.json"><link rel="mask-icon" href="https://b-gold-cdn.xitu.io/favicons/v2/safari-pinned-tab.svg" color="#5bbad5"><link rel="shortcut icon" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon.ico"><meta name="msapplication-config" content="https://b-gold-cdn.xitu.io/favicons/v2/browserconfig.xml"><meta name="theme-color" content="#ffffff"><link rel="search" title="掘金" href="https://b-gold-cdn.xitu.io/conf/search.xml" type="application/opensearchdescription+xml"><link rel="stylesheet" href="./23.React 常考进阶知识点_files/ionicons.min.css"><link rel="stylesheet" href="./23.React 常考进阶知识点_files/iconfont.css"><link href="./23.React 常考进阶知识点_files/0.6c6fc7db91a7d5cf8ffb.css" rel="stylesheet"><script async="" src="./23.React 常考进阶知识点_files/hm.js"></script><script async="" src="./23.React 常考进阶知识点_files/analytics.js"></script><script type="text/javascript" async="" src="./23.React 常考进阶知识点_files/vds.js"></script><script charset="utf-8" src="./23.React 常考进阶知识点_files/12.25eae53404ada9976238.js"></script><meta data-vmid="keywords" name="keywords" content="掘金,稀土,Vue.js,微信小程序,Kotlin,RxJava,React Native,Wireshark,敏捷开发,Bootstrap,OKHttp,正则表达式,WebGL,Webpack,Docker,MVVM" data-vue-meta="true"><meta data-vmid="description" name="description" content="掘金是一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer News，和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货，其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时，掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户，我们相信你也可以在这里有所收获。" data-vue-meta="true"><script async="" src="./23.React 常考进阶知识点_files/aliplayer-min.js"></script></head><body><div id="juejin" data-v-35e99930=""><div class="global-component-box" data-v-35e99930=""><!----><div data-v-330b09d9="" data-v-35e99930="" class="alert-list alert-list"></div><!----><!----><!----><div class="emoji-barrage" data-v-0f3d7540="" data-v-35e99930=""><!----></div><div class="book-new-user-award-popup" style="display:none;" data-v-1596580a="" data-v-35e99930=""><div class="content-box" style="display:;" data-v-1596580a=""><div class="close ion-close-round" data-v-1596580a=""></div><div class="header" data-v-1596580a=""><div class="icon" data-v-1596580a=""><img src="./23.React 常考进阶知识点_files/icon.a87e5ae.svg" data-v-1596580a=""></div><div class="txt" data-v-1596580a="">新人专享好礼</div></div><div class="desc" data-v-1596580a="">凡未购买过小册的用户，均可领取三张 5 折新人专享券，购买小册时自动使用专享券，最高可节省 45 元。</div><div class="tickets" data-v-1596580a=""><div class="ticket" data-v-1596580a=""><div class="ticket__inner" data-v-1596580a=""><div class="enjoy" data-v-1596580a=""><span class="new-title" data-v-1596580a="">小册新人 5 折券</span></div><div class="sale" data-v-1596580a="">最高可省 15 元</div></div></div><div class="ticket" data-v-1596580a=""><div class="ticket__inner" data-v-1596580a=""><div class="enjoy" data-v-1596580a=""><span class="new-title" data-v-1596580a="">小册新人 5 折券</span></div><div class="sale" data-v-1596580a="">最高可省 15 元</div></div></div><div class="ticket" data-v-1596580a=""><div class="ticket__inner" data-v-1596580a=""><div class="enjoy" data-v-1596580a=""><span class="new-title" data-v-1596580a="">小册新人 5 折券</span></div><div class="sale" data-v-1596580a="">最高可省 15 元</div></div></div></div><div class="remark" data-v-1596580a="">注：专享券的使用期限在领券的七天内。</div><div class="submit-btn" data-v-1596580a="">一键领取</div></div><div class="model success" style="display:none;" data-v-1596580a=""><div class="heading" data-v-1596580a="">领取成功</div><div class="content-text" data-v-1596580a="">购买小册时自动使用专享券</div><div class="btn-success-footer" data-v-1596580a=""><div class="btn-ok" data-v-1596580a="">知道了</div><div class="btn-ok btn-link" data-v-1596580a="">前往小册首页</div></div></div><div class="model fail" style="display:none;" data-v-1596580a=""><div class="heading" data-v-1596580a="">领取失败</div><div class="content-text" data-v-1596580a="">本活动仅适用于小册新用户</div><div class="btn-ok" data-v-1596580a="">知道了</div></div></div><!----><!----><div class="bind-phone-number-modal-box" data-v-b421b7f4="" data-v-35e99930=""><div st:block="bindPhoneNumberModal" class="modal-mask" style="display:none;" data-v-b421b7f4=""></div><form class="bind-phone-number-form" style="display:none;" data-v-b421b7f4=""><i title="关闭" class="close-btn ion-close-round" data-v-b421b7f4=""></i><h1 class="title" data-v-b421b7f4="">提示</h1><h2 class="hint" data-v-b421b7f4="">根据我国<a href="http://www.npc.gov.cn/npc/xinwen/2016-11/07/content_2001605.htm" target="_blank" style="color:#007fff">《网络安全法》</a>，您需要绑定手机号后才可在掘金社区内发布内容。</h2><div class="input-group" data-v-b421b7f4=""><div class="input-box" data-v-b421b7f4=""><input maxlength="64" placeholder="请输入要绑定的手机号码" value="" class="input" data-v-b421b7f4=""></div><!----><!----></div><button st:name="bindBtn" class="btn" data-v-b421b7f4="">绑定手机</button></form></div></div><!----><div data-v-54b8e7d6="" data-v-35e99930="" class="book-read-view"><section data-v-54b8e7d6="" class="book-section"><div data-v-54b8e7d6="" class="book-summary"><div data-v-54b8e7d6="" class="book-summary-masker"></div><div data-v-54b8e7d6="" class="book-summary-inner"><div data-v-54b8e7d6="" class="book-summary__header"><a data-v-54b8e7d6="" href="https://juejin.im/books" target="" rel="" class="logo"><img data-v-54b8e7d6="" src="./23.React 常考进阶知识点_files/logo.a7995ad.svg"></a><div data-v-54b8e7d6="" class="label">小册</div><!----></div><!----><div data-v-d0eb2184="" data-v-54b8e7d6="" class="book-directory book-directory bought"><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">1</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">小册食用指南</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">2</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 基础知识点及常考面试题（一）</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">3</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 基础知识点及常考面试题（二）</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">4</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">ES6 知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">5</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 异步编程及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">6</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">手写 Promise</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">7</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Event Loop</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">8</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 进阶知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">9</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">JS 思考题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">10</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">DevTools Tips</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">11</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器基础知识点及常考面试题</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">12</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器缓存机制</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">13</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">浏览器渲染原理</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">14</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">安全防范知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">15</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">从 V8 中看 JS 性能优化</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">16</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">性能优化琐碎事</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">17</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Webpack 性能优化</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">18</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">实现小型打包工具</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">19</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 和 Vue 两大框架之间的相爱相杀</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">20</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Vue 常考基础知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">21</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">Vue 常考进阶知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link read"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">22</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 常考基础知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section route-active section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">23</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">React 常考进阶知识点</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">24</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">监控</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">25</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">UDP</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">26</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">TCP</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">27</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">HTTP 及 TLS</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">28</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">HTTP/2 及 HTTP/3</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">29</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">输入 URL 到页面渲染的整个流程</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">30</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">设计模式</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">31</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">常见数据结构</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">32</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">常考算法题解析</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">33</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">CSS 常考面试题资料</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">34</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">如何写好一封简历</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">35</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">面试常用技巧</div><!----><!----></div><!----></a><a data-v-d0eb2184="" class="section section-link"><div data-v-d0eb2184="" class="step"><div data-v-d0eb2184="" class="step-btn">36</div></div><div data-v-d0eb2184="" class="center"><div data-v-d0eb2184="" class="title">前方的路，让我们结伴同行</div><!----><!----></div><!----></a></div><div data-v-54b8e7d6="" class="book-summary__footer"><div data-v-54b8e7d6="" class="qr-icon"><img data-v-54b8e7d6="" src="./23.React 常考进阶知识点_files/qr-icon.881015a.svg"></div><div data-v-54b8e7d6="" class="qr-tips"><span data-v-54b8e7d6="" class="ion-close"></span><div data-v-54b8e7d6="" class="title"><span data-v-54b8e7d6="">关注公众号</span><span data-v-54b8e7d6="">领取优惠码</span></div><div data-v-54b8e7d6="" class="qr-img"><img data-v-54b8e7d6="" src="./23.React 常考进阶知识点_files/wx-qr.13d8b4d.png"></div></div></div></div></div><div data-v-54b8e7d6="" class="book-content"><div data-v-54b8e7d6="" class="book-content-inner"><div data-v-54b8e7d6="" class="book-content__header visible"><div data-v-54b8e7d6="" class="switch"><img data-v-54b8e7d6="" src="./23.React 常考进阶知识点_files/icon.3e69d5a.svg"></div><div data-v-54b8e7d6="" class="menu"><img data-v-54b8e7d6="" src="./23.React 常考进阶知识点_files/menu.74b9add.svg"></div><div data-v-54b8e7d6="" class="title"><a data-v-54b8e7d6="" href="https://juejin.im/book/5bdc715fe51d454e755f75ef" target="" rel="">前端面试之道</a></div><div data-v-ad718278="" data-v-54b8e7d6="" class="user-auth user-auth"><div data-v-ad718278="" class="nav-item menu"><div data-v-6795359b="" data-v-67a669a2="" data-v-ad718278="" data-src="https://mirror-gold-cdn.xitu.io/168e08e4f81e924deaa?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar loaded" style="background-image: url("https://mirror-gold-cdn.xitu.io/168e08e4f81e924deaa?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1");"></div><div data-v-ad718278="" class="nav-menu user-dropdown-list" style="display: none;"><ul data-v-ad718278="" class="nav-menu-item-group"><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278=""><i data-v-ad718278="" class="fengwei fw-write"></i><span data-v-ad718278="">写文章</span></a></li><!----><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278=""><i data-v-ad718278="" class="fengwei fw-draft"></i><span data-v-ad718278="">草稿</span></a></li></ul><ul data-v-ad718278="" class="nav-menu-item-group"><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/user/5aa105a7518825555f0c8a90"><i data-v-ad718278="" class="fengwei fw-person"></i><span data-v-ad718278="">我的主页</span></a></li><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/user/5aa105a7518825555f0c8a90/likes"><i data-v-ad718278="" class="fengwei fw-like"></i><span data-v-ad718278="">我喜欢的</span></a></li><!----><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/user/5aa105a7518825555f0c8a90/collections"><i data-v-ad718278="" class="fengwei fw-collection"></i><span data-v-ad718278="">我的收藏集</span></a></li><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/user/5aa105a7518825555f0c8a90/books?type=bought"><i data-v-ad718278="" class="fengwei fw-bought"></i><span data-v-ad718278="">已购</span></a></li><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/subscribe"><i data-v-ad718278="" class="fengwei fw-tag"></i><span data-v-ad718278="">标签管理</span></a></li></ul><ul data-v-ad718278="" class="nav-menu-item-group"><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/user/settings"><i data-v-ad718278="" class="fengwei fw-setting"></i><span data-v-ad718278="">设置</span></a></li><li data-v-ad718278="" class="nav-menu-item more"><a data-v-ad718278=""><i data-v-ad718278="" class="fengwei fw-info"></i><span data-v-ad718278="">关于</span><i data-v-ad718278="" class="ion-chevron-right more-icon"></i></a><div data-v-ad718278="" class="nav-menu more-dropdown-list"><ul data-v-ad718278="" class="nav-menu-item-group"><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/app" target="_blank">下载应用</a></li><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://juejin.im/about" target="_blank">关于</a></li><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://xitu.io/jobs" target="_blank">加入我们</a></li><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://github.com/xitu/gold-miner" rel="nofollow noopener noreferrer" target="_blank">翻译计划</a></li><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278="" href="https://bd.juejin.im/?utm_campaign=bd&utm_source=web&utm_medium=nav" target="_blank">合作伙伴</a></li></ul></div></li></ul><ul data-v-ad718278="" class="nav-menu-item-group"><li data-v-ad718278="" class="nav-menu-item"><a data-v-ad718278=""><i data-v-ad718278="" class="fengwei fw-logout"></i><span data-v-ad718278="">登出</span></a></li></ul></div></div><!----></div><!----></div><div data-v-54b8e7d6="" class="book-body transition--next"><div data-v-4842038c="" data-v-54b8e7d6="" class="section-view book-section-content"><div data-v-f8875076="" data-v-4842038c="" class="section-content"><div data-v-f8875076="" class="section-page book-section-view"><div data-v-f8875076="" class="entry-content article-content"><h1 class="heading" data-id="heading-0">React 常考进阶知识点</h1>
<p>这一章节我们将来学习 React 的一些经常考到的进阶知识点，并且这章节还需要配合第十九章阅读，其中的内容经常会考到。</p>
<h2 class="heading" data-id="heading-1">HOC 是什么？相比 mixins 有什么优点？</h2>
<p>很多人看到高阶组件（HOC）这个概念就被吓到了，认为这东西很难，其实这东西概念真的很简单，我们先来看一个例子。</p>
<pre><code class="hljs js" lang="js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">add</span>(<span class="hljs-params">a, b</span>) </span>{
<span class="hljs-keyword">return</span> a + b
}
</code></pre><p>现在如果我想给这个 <code>add</code> 函数添加一个输出结果的功能，那么你可能会考虑我直接使用 <code>console.log</code> 不就实现了么。说的没错，但是如果我们想做的更加优雅并且容易复用和扩展，我们可以这样去做：</p>
<pre><code class="hljs js" lang="js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">withLog</span> (<span class="hljs-params">fn</span>) </span>{
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">a, b</span>) </span>{
<span class="hljs-keyword">const</span> result = fn(a, b)
<span class="hljs-built_in">console</span>.log(result)
<span class="hljs-keyword">return</span> result
}
<span class="hljs-keyword">return</span> wrapper
}
<span class="hljs-keyword">const</span> withLogAdd = withLog(add)
withLogAdd(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>)
</code></pre><p>其实这个做法在函数式编程里称之为高阶函数，大家都知道 React 的思想中是存在函数式编程的，高阶组件和高阶函数就是同一个东西。我们实现一个函数，传入一个组件，然后在函数内部再实现一个函数去扩展传入的组件，最后返回一个新的组件，这就是高阶组件的概念，作用就是为了更好的复用代码。</p>
<p>其实 HOC 和 Vue 中的 mixins 作用是一致的，并且在早期 React 也是使用 mixins 的方式。但是在使用 class 的方式创建组件以后，mixins 的方式就不能使用了，并且其实 mixins 也是存在一些问题的，比如：</p>
<ul>
<li>隐含了一些依赖，比如我在组件中写了某个 <code>state</code> 并且在 <code>mixin</code> 中使用了，就这存在了一个依赖关系。万一下次别人要移除它，就得去 <code>mixin</code> 中查找依赖</li>
<li>多个 <code>mixin</code> 中可能存在相同命名的函数，同时代码组件中也不能出现相同命名的函数，否则就是重写了，其实我一直觉得命名真的是一件麻烦事。。</li>
<li>雪球效应，虽然我一个组件还是使用着同一个 <code>mixin</code>，但是一个 <code>mixin</code> 会被多个组件使用，可能会存在需求使得 <code>mixin</code> 修改原本的函数或者新增更多的函数，这样可能就会产生一个维护成本</li>
</ul>
<p>HOC 解决了这些问题，并且它们达成的效果也是一致的，同时也更加的政治正确（毕竟更加函数式了）。</p>
<h2 class="heading" data-id="heading-2">事件机制</h2>
<p>React 其实自己实现了一套事件机制，首先我们考虑一下以下代码：</p>
<pre><code class="hljs jsx" lang="jsx"><span class="hljs-keyword">const</span> Test = <span class="hljs-function">(<span class="hljs-params">{ list, handleClick }</span>) =></span> ({
list.map(<span class="hljs-function">(<span class="hljs-params">item, index</span>) =></span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{handleClick}</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span>></span>{index}<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
))
})
</code></pre><p>以上类似代码想必大家经常会写到，但是你是否考虑过点击事件是否绑定在了每一个标签上？事实当然不是，JSX 上写的事件并没有绑定在对应的真实 DOM 上，而是通过事件代理的方式，将所有的事件都统一绑定在了 <code>document</code> 上。这样的方式不仅减少了内存消耗，还能在组件挂载销毁时统一订阅和移除事件。</p>
<p>另外冒泡到 <code>document</code> 上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件（SyntheticEvent）。因此我们如果不想要事件冒泡的话，调用 <code>event.stopPropagation</code> 是无效的，而应该调用 <code>event.preventDefault</code>。</p>
<p>那么实现合成事件的目的是什么呢？总的来说在我看来好处有两点，分别是：</p>
<ul>
<li>合成事件首先抹平了浏览器之间的兼容问题，另外这是一个跨浏览器原生事件包装器，赋予了跨浏览器开发的能力</li>
<li>对于原生浏览器事件来说，浏览器会给监听器创建一个事件对象。如果你有很多的事件监听，那么就需要分配很多的事件对象，造成高额的内存分配问题。但是对于合成事件来说，有一个事件池专门来管理它们的创建和销毁，当事件需要被使用时，就会从池子中复用对象，事件回调结束后，就会销毁事件对象上的属性，从而便于下次复用事件对象。</li>
</ul>
<h2 class="heading" data-id="heading-3">更新内容</h2>
<ul>
<li><a target="_blank" href="https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FKieSun%2FDream%2Fissues%2F15" rel="nofollow noopener noreferrer">React 进阶系列：Hooks 该怎么用</a></li>
</ul>
<h2 class="heading" data-id="heading-4">小结</h2>
<p>你可能会惊讶于这一章节的内容并不多的情况，其实你如果将两章 React 以及第十九章的内容全部学习完后，基本上 React 的大部分面试问题都可以解决。</p>
<p>当然你可能会觉得看的还不过瘾，这不需要担心。我已经决定写一个免费专栏「React 进阶」，专门讲解有难度的问题。比如组件的设计模式、新特性、部分源码解析等等内容。当然这些内容都是需要好好打磨的，所以更新的不会很快，有兴趣的可以持续关注，都会更新链接在这一章节中。</p>
</div><section data-v-f8875076="" class="book-comments"><div data-v-f8875076="" class="box-title">留言</div><div data-v-f8875076="" class="comment-box"><div data-v-805e4f50="" data-v-f8875076="" class="comment-form comment-form" id="comment"><div data-v-6795359b="" data-v-67a669a2="" data-v-805e4f50="" data-src="https://mirror-gold-cdn.xitu.io/168e08e4f81e924deaa?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar loaded" style="background-image: url("https://mirror-gold-cdn.xitu.io/168e08e4f81e924deaa?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1");"></div><div data-v-b84335ea="" data-v-805e4f50="" class="auth-card"><div data-v-b84335ea="" class="auth-cover"><span data-v-b84335ea="" class="hint"></span>您需要<a data-v-b84335ea="">绑定手机号</a>后才可在掘金社区内发布内容。</div><textarea data-v-805e4f50="" data-v-b84335ea="" placeholder="评论将在后台进行审核，审核通过后对所有人可见" class="content-input" style="overflow: hidden; overflow-wrap: break-word; height: 60px;"></textarea></div><div data-v-805e4f50="" class="action-box" style="display: none;"><div data-v-76be0714="" data-v-805e4f50="" class="image-uploader image-uploader" style="display: none;"><input data-v-76be0714="" type="file" class="input"><button data-v-76be0714="" class="upload-btn"><i data-v-76be0714="" class="icon ion-image"></i><span data-v-76be0714="">上传图片</span></button></div><div data-v-805e4f50="" class="submit-box"><span data-v-805e4f50="" class="submit-text">Ctrl or ⌘ + Enter</span><button data-v-805e4f50="" class="submit-btn">评论</button></div></div><!----></div></div><ul data-v-4c55bf38="" data-v-f8875076="" st:block="commentList" class="comment-list comment-list"><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5c91ad28518825638621a936" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/5c91ad28518825638621a936" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://mirror-gold-cdn.xitu.io/169990c6bb1910c9e04?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5c91ad28518825638621a936" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/5c91ad28518825638621a936" target="_blank" rel="" class="username" data-v-340b99e1="">王唯佳<a data-v-7bb9dea1="" data-v-3052f648="" href="https://juejin.im/book/5c90640c5188252d7941f5bb/section/5c9065385188252da6320022" target="_blank" rel="" class="rank"><img data-v-7bb9dea1="" src="./23.React 常考进阶知识点_files/lv-1.636691c.svg" alt="lv-1"></a></a></div><div data-v-3e0a9536="" class="position">developer @ 哈啰</div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">另外冒泡到 document 上的事件也不是原生浏览器事件，而是 React 自己实现的合成事件（SyntheticEvent）。因此我们如果不想要事件冒泡的话，调用 event.stopPropagation 是无效的，而应该调用 event.preventDefault。
event.preventDefault 是阻止 控件的默认 行为，无法阻止冒泡的
event.stopPropagation 才是阻止冒泡的 方法
这个地方写错了吧</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">0</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">收起评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style=""></div></span><span data-v-3e0a9536="" class="date">2月前</span><!----></div><div data-v-42ee4f35="" data-v-3e0a9536="" class="sub-comment-box sub-comment-box"><div data-v-42ee4f35="" class="sub-comment-box__top"><div data-v-42ee4f35="" class="icon-close"></div><h3 data-v-42ee4f35="">评论</h3></div><div data-v-42ee4f35="" class="sub-comment-box__inner"><div data-v-42ee4f35=""><ul data-v-42ee4f35="" class="sub-comment-list"><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5c91ad28518825638621a936" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://mirror-gold-cdn.xitu.io/169990c6bb1910c9e04?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5c91ad28518825638621a936" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/5c91ad28518825638621a936" target="_blank" rel="" class="username username" data-v-340b99e1="">王唯佳<a data-v-7bb9dea1="" data-v-3052f648="" href="https://juejin.im/book/5c90640c5188252d7941f5bb/section/5c9065385188252da6320022" target="_blank" rel="" class="rank"><img data-v-7bb9dea1="" src="./23.React 常考进阶知识点_files/lv-1.636691c.svg" alt="lv-1"></a></a></div><div data-v-b9a92622="" class="position">developer @ 哈啰</div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">event.stopPropagation 阻止合成事件 冒泡的方法</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">2月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li></ul><!----></div><form data-v-42ee4f35="" class="reply-form"><div data-v-b84335ea="" data-v-42ee4f35="" class="auth-card"><div data-v-b84335ea="" class="auth-cover"><span data-v-b84335ea="" class="hint"></span>您需要<a data-v-b84335ea="">绑定手机号</a>后才可在掘金社区内发布内容。</div><textarea data-v-42ee4f35="" data-v-b84335ea="" rows="1" maxlength="1024" placeholder="评论审核通过后显示" style="overflow: hidden; overflow-wrap: break-word; height: 31px;"></textarea></div><button data-v-42ee4f35="" class="reply-btn">评论</button></form></div></div></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="59e88738f265da43195563e6" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/59e88738f265da43195563e6" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://mirror-gold-cdn.xitu.io/168e08a690801f5926d?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="59e88738f265da43195563e6" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/59e88738f265da43195563e6" target="_blank" rel="" class="username" data-v-340b99e1="">欧阳在掘金<!----></a></div><div data-v-3e0a9536="" class="position"></div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">连政治正确都来了，真是......</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">0</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style="display: none;"></div></span><span data-v-3e0a9536="" class="date">2月前</span><!----></div><!----></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5796cf5e128fe10056cb8eaa" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/5796cf5e128fe10056cb8eaa" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://user-gold-cdn.xitu.io/2016/11/29/8d35d756d09033e27b1b1264fa4578bc?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5796cf5e128fe10056cb8eaa" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/5796cf5e128fe10056cb8eaa" target="_blank" rel="" class="username" data-v-340b99e1="">石子路<!----></a></div><div data-v-3e0a9536="" class="position">视觉体验还原师 @ 滴滴出行</div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">这一章节，含金量不高</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">6</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style="display: none;"></div></span><span data-v-3e0a9536="" class="date">3月前</span><!----></div><!----></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5c54f5d06fb9a049b13ea494" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/5c54f5d06fb9a049b13ea494" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5c54f5d06fb9a049b13ea494" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/5c54f5d06fb9a049b13ea494" target="_blank" rel="" class="username" data-v-340b99e1="">666啊<!----></a></div><div data-v-3e0a9536="" class="position"></div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">阻止冒泡不是 `e.nativeEvent.stopImmediatePropagation();` 这个吗？</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">0</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style="display: none;"></div></span><span data-v-3e0a9536="" class="date">3月前</span><!----></div><!----></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5c54f5d06fb9a049b13ea494" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/5c54f5d06fb9a049b13ea494" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5c54f5d06fb9a049b13ea494" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/5c54f5d06fb9a049b13ea494" target="_blank" rel="" class="username" data-v-340b99e1="">666啊<!----></a></div><div data-v-3e0a9536="" class="position"></div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">不是调用阻止冒泡不是 `e.nativeEvent.stopImmediatePropagation();` 这个吗？</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">0</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style="display: none;"></div></span><span data-v-3e0a9536="" class="date">3月前</span><!----></div><!----></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5b3609006fb9a00e3a5ab14a" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/5b3609006fb9a00e3a5ab14a" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://mirror-gold-cdn.xitu.io/168e0917a407ccc0e0b?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5b3609006fb9a00e3a5ab14a" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/5b3609006fb9a00e3a5ab14a" target="_blank" rel="" class="username" data-v-340b99e1="">我只有三块钱<!----></a></div><div data-v-3e0a9536="" class="position">php @ 点击查看</div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">捕获函数式推崇者一枚</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">0</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style="display: none;"></div></span><span data-v-3e0a9536="" class="date">3月前</span><!----></div><!----></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5c04d9a9e51d457d7939c38f" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/5c04d9a9e51d457d7939c38f" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://mirror-gold-cdn.xitu.io/168e096d732ef8c24b2?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5c04d9a9e51d457d7939c38f" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/5c04d9a9e51d457d7939c38f" target="_blank" rel="" class="username" data-v-340b99e1="">日明<a data-v-7bb9dea1="" data-v-3052f648="" href="https://juejin.im/book/5c90640c5188252d7941f5bb/section/5c9065385188252da6320022" target="_blank" rel="" class="rank"><img data-v-7bb9dea1="" src="./23.React 常考进阶知识点_files/lv-2.f597b88.svg" alt="lv-2"></a></a></div><div data-v-3e0a9536="" class="position">前端工程师 @ 无业游民，备考状态</div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">react这两篇感觉没啥用啊..</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">0</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style="display: none;"></div></span><span data-v-3e0a9536="" class="date">3月前</span><!----></div><!----></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5ad87a5ef265da504c169008" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/5ad87a5ef265da504c169008" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://mirror-gold-cdn.xitu.io/168e08f004ce42dbac6?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="5ad87a5ef265da504c169008" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/5ad87a5ef265da504c169008" target="_blank" rel="" class="username" data-v-340b99e1="">ZedCoding<!----></a></div><div data-v-3e0a9536="" class="position">前端</div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">没啥用</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">6</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style="display: none;"></div></span><span data-v-3e0a9536="" class="date">3月前</span><!----></div><!----></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="55fbe11060b27cb221c13426" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/55fbe11060b27cb221c13426" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://user-gold-cdn.xitu.io/2016/11/29/61a5dc8254ca0622682079e0b7157f0e?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="55fbe11060b27cb221c13426" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/55fbe11060b27cb221c13426" target="_blank" rel="" class="username" data-v-340b99e1="">笨拙的乡村铁匠<!----></a></div><div data-v-3e0a9536="" class="position">前端 @ 宝尊</div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">老实说，受限于篇幅长度，这篇「 React 进阶」确实有点浅。不如附加一个 React 进阶路线图</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">0</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style="display: none;"></div></span><span data-v-3e0a9536="" class="date">3月前</span><!----></div><!----></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="58d4c6ba570c350058cab142" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/58d4c6ba570c350058cab142" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://user-gold-cdn.xitu.io/2019/2/21/1690e7fd47b865d0?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="58d4c6ba570c350058cab142" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/58d4c6ba570c350058cab142" target="_blank" rel="" class="username" data-v-340b99e1="">张熙沐枫<!----></a></div><div data-v-3e0a9536="" class="position">高级前端</div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">0.0</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">0</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style="display: none;"></div></span><span data-v-3e0a9536="" class="date">3月前</span><!----></div><!----></div><!----></div></li><li data-v-4c55bf38="" class="item"><div data-v-3e0a9536="" data-v-4c55bf38="" class="comment"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="59959f3e6fb9a024927a199d" class="user-popover-box"><!----><a data-v-3e0a9536="" href="https://juejin.im/user/59959f3e6fb9a024927a199d" target="_blank" rel="" data-v-340b99e1=""><div data-v-6795359b="" data-v-67a669a2="" data-v-3e0a9536="" data-src="https://mirror-gold-cdn.xitu.io/168e087a71dd6fff28e?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" style="background-image: none;"></div></a></div><div data-v-3e0a9536="" class="content-box"><div data-v-3e0a9536="" class="header"><div data-v-3e0a9536="" class="user-info"><div data-v-340b99e1="" data-v-3e0a9536="" st:block="userPopover" st:state="59959f3e6fb9a024927a199d" class="user-popover-box"><!----><a data-v-3052f648="" data-v-3e0a9536="" href="https://juejin.im/user/59959f3e6fb9a024927a199d" target="_blank" rel="" class="username" data-v-340b99e1="">小林其<!----></a></div><div data-v-3e0a9536="" class="position">软件工程师 @ 没得公司</div></div></div><div data-v-3e0a9536="" class="content"><!----><span data-v-3e0a9536="" class="content-html">不知道怎么说，进阶先讲了hoc，却不深入讲一下柯里化和高阶组件的生命周期；我很不熟的render props和render callback也不讲一下吗？</span><!----></div><div data-v-3e0a9536="" class="footer"><button data-v-3e0a9536="" class="like-btn"><i data-v-3e0a9536="" class="collection-arrow-ion ion-arrow-up-b"></i><span data-v-3e0a9536="">0</span></button><span data-v-3e0a9536="" class="sub-comment-btn text-pointer"><span data-v-3e0a9536="" class="title">收起评论</span><div data-v-3e0a9536="" class="sub-comment--arrow" style=""></div></span><span data-v-3e0a9536="" class="date">3月前</span><!----></div><div data-v-42ee4f35="" data-v-3e0a9536="" class="sub-comment-box sub-comment-box"><div data-v-42ee4f35="" class="sub-comment-box__top"><div data-v-42ee4f35="" class="icon-close"></div><h3 data-v-42ee4f35="">评论</h3></div><div data-v-42ee4f35="" class="sub-comment-box__inner"><div data-v-42ee4f35=""><ul data-v-42ee4f35="" class="sub-comment-list"><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://user-gold-cdn.xitu.io/2018/10/30/166c3fd3666b5d05?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="574f8d8d2e958a005fd4edac" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/574f8d8d2e958a005fd4edac" target="_blank" rel="" class="username username" data-v-340b99e1="">yck<a data-v-7bb9dea1="" data-v-3052f648="" href="https://juejin.im/book/5c90640c5188252d7941f5bb/section/5c9065385188252da6320022" target="_blank" rel="" class="rank"><img data-v-7bb9dea1="" src="./23.React 常考进阶知识点_files/lv-6.74bd93a.svg" alt="lv-6"></a></a></div><div data-v-b9a92622="" class="position">前端开发 @ 宋小菜</div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">柯里化就更加是 FP 的东西了，说了会有更多人更加模糊，另外高阶组件的生命周期还和别的生命周期不一样了？
其他你说的 render props 这些，近期会更新新的文章的</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">3月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="57bf16bba633bd005d590355" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="57bf16bba633bd005d590355" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/57bf16bba633bd005d590355" target="_blank" rel="" class="username username" data-v-340b99e1="">正正果实<!----></a></div><div data-v-b9a92622="" class="position">前端工程师</div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">期待React进阶</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">3月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="587c1d7361ff4b0065fee1b6" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="587c1d7361ff4b0065fee1b6" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/587c1d7361ff4b0065fee1b6" target="_blank" rel="" class="username username" data-v-340b99e1="">乔1484529011000<!----></a></div><div data-v-b9a92622="" class="position">web前端工程师</div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">这个进阶有待丰富</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">3月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5c11fb3ef265da615304a34a" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://user-gold-cdn.xitu.io/2019/3/14/1697b13fcb7b7ba5?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5c11fb3ef265da615304a34a" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/5c11fb3ef265da615304a34a" target="_blank" rel="" class="username username" data-v-340b99e1="">Mr_lemon<!----></a></div><div data-v-b9a92622="" class="position">前端</div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">这，我刚看了一个开头就结束了？有一种买了一个肉包，吧唧一口没吃到肉，你以为你没有咬到，其实它就是个馒头</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">3月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li><li data-v-42ee4f35="" class="item"><div data-v-b9a92622="" data-v-42ee4f35="" class="sub-comment sub-comment"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5c91ad28518825638621a936" class="user-popover-box user-popover--avatar"><!----><div data-v-6795359b="" data-v-67a669a2="" data-v-b9a92622="" data-src="https://mirror-gold-cdn.xitu.io/169990c6bb1910c9e04?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" class="lazy avatar avatar" data-v-340b99e1="" style="background-image: none;"></div></div><div data-v-b9a92622="" class="content-box"><div data-v-b9a92622="" class="header"><div data-v-b9a92622="" class="user-info"><div data-v-340b99e1="" data-v-b9a92622="" st:block="userPopover" st:state="5c91ad28518825638621a936" class="user-popover-box user-popover--info"><!----><a data-v-3052f648="" data-v-b9a92622="" href="https://juejin.im/user/5c91ad28518825638621a936" target="_blank" rel="" class="username username" data-v-340b99e1="">王唯佳<a data-v-7bb9dea1="" data-v-3052f648="" href="https://juejin.im/book/5c90640c5188252d7941f5bb/section/5c9065385188252da6320022" target="_blank" rel="" class="rank"><img data-v-7bb9dea1="" src="./23.React 常考进阶知识点_files/lv-1.636691c.svg" alt="lv-1"></a></a></div><div data-v-b9a92622="" class="position">developer @ 哈啰</div></div></div><div data-v-b9a92622="" class="content"><!----><span data-v-b9a92622="" class="content-html">因此我们如果不想要事件冒泡的话，调用 event.stopPropagation 是无效的，而应该调用 event.preventDefault。
event.preventDefault 是阻止默认行为吧， 就是应该用 event.stopPropagation 来阻止 合成事件的 冒泡</span><!----></div><div data-v-b9a92622="" class="footer"><span data-v-b9a92622="" class="date">2月前</span><a data-v-b9a92622="" class="reply-btn">回复</a><!----></div></div><!----></div></li></ul><!----></div><form data-v-42ee4f35="" class="reply-form"><div data-v-b84335ea="" data-v-42ee4f35="" class="auth-card"><div data-v-b84335ea="" class="auth-cover"><span data-v-b84335ea="" class="hint"></span>您需要<a data-v-b84335ea="">绑定手机号</a>后才可在掘金社区内发布内容。</div><textarea data-v-42ee4f35="" data-v-b84335ea="" rows="1" maxlength="1024" placeholder="评论审核通过后显示" style="overflow: hidden; overflow-wrap: break-word; height: 31px;"></textarea></div><button data-v-42ee4f35="" class="reply-btn">评论</button></form></div></div></div><!----></div></li><!----></ul></section></div></div><!----><!----></div></div><div data-v-5cee32d6="" data-v-54b8e7d6="" class="book-handle book-direction"><div data-v-5cee32d6="" class="step-btn step-btn--prev"><img data-v-5cee32d6="" src="./23.React 常考进阶知识点_files/prev.87ad47e.svg"></div><div data-v-5cee32d6="" class="step-btn step-btn--next"><img data-v-5cee32d6="" src="./23.React 常考进阶知识点_files/next.54d8a35.svg"></div><!----><!----></div><!----></div></div></section><!----><!----><!----><div data-v-cd2ca6a6="" data-v-54b8e7d6="" class="image-viewer-box"><!----></div></div><!----></div>
<script type="text/javascript" src="./23.React 常考进阶知识点_files/runtime.9706721e848de1201705.js"></script><script type="text/javascript" src="./23.React 常考进阶知识点_files/0.8216307424ab4cc6932c.js"></script><script type="text/javascript" src="./23.React 常考进阶知识点_files/1.245e4b7164597257667b.js"></script>
</body></html>