1+ <!DOCTYPE html>
2+ < html >
3+ < head >
4+ < meta charset ="utf-8 ">
5+
6+
7+
8+ < title > react进阶 | Colin‘s Blog</ title >
9+ < meta name ="viewport " content ="width=device-width, initial-scale=1, maximum-scale=1 ">
10+ < meta name ="description " content ="react原理1、JSX (传入) =&gt; React.creatElement() =&gt;（输出）ReactElement2、生命周期3、虚拟dom4、shouldComponentUpdate(nextProps, nextState):性能优化、定制5、setState是什么鬼： 对状态的更新是异步的（多次set，只render一次） 队列机制（pending队列 =&g ">
11+ < meta name ="keywords " content ="react ">
12+ < meta property ="og:type " content ="article ">
13+ < meta property ="og:title " content ="react进阶 ">
14+ < meta property ="og:url " content ="http://yoursite.com/2019/01/23/react进阶/index.html ">
15+ < meta property ="og:site_name " content ="Colin‘s Blog ">
16+ < meta property ="og:description " content ="react原理1、JSX (传入) =&gt; React.creatElement() =&gt;（输出）ReactElement2、生命周期3、虚拟dom4、shouldComponentUpdate(nextProps, nextState):性能优化、定制5、setState是什么鬼： 对状态的更新是异步的（多次set，只render一次） 队列机制（pending队列 =&g ">
17+ < meta property ="og:locale " content ="default ">
18+ < meta property ="og:updated_time " content ="2019-01-27T14:02:29.950Z ">
19+ < meta name ="twitter:card " content ="summary ">
20+ < meta name ="twitter:title " content ="react进阶 ">
21+ < meta name ="twitter:description " content ="react原理1、JSX (传入) =&gt; React.creatElement() =&gt;（输出）ReactElement2、生命周期3、虚拟dom4、shouldComponentUpdate(nextProps, nextState):性能优化、定制5、setState是什么鬼： 对状态的更新是异步的（多次set，只render一次） 队列机制（pending队列 =&g ">
22+
23+ < link rel ="alternate " href ="/atom.xml " title ="Colin‘s Blog " type ="application/atom+xml ">
24+
25+
26+ < link rel ="icon " href ="/favicon.png ">
27+
28+
29+ < link href ="//fonts.googleapis.com/css?family=Source+Code+Pro " rel ="stylesheet " type ="text/css ">
30+
31+ < link rel ="stylesheet " href ="/css/style.css ">
32+ </ head >
33+
34+ < body >
35+ < div id ="container ">
36+ < div id ="wrap ">
37+ < header id ="header ">
38+ < div id ="banner "> </ div >
39+ < div id ="header-outer " class ="outer ">
40+ < div id ="header-title " class ="inner ">
41+ < h1 id ="logo-wrap ">
42+ < a href ="/ " id ="logo "> Colin‘s Blog</ a >
43+ </ h1 >
44+
45+ </ div >
46+ < div id ="header-inner " class ="inner ">
47+ < nav id ="main-nav ">
48+ < a id ="main-nav-toggle " class ="nav-icon "> </ a >
49+
50+ < a class ="main-nav-link " href ="/ "> Home</ a >
51+
52+ < a class ="main-nav-link " href ="/archives "> Archives</ a >
53+
54+ </ nav >
55+ < nav id ="sub-nav ">
56+
57+ < a id ="nav-rss-link " class ="nav-icon " href ="/atom.xml " title ="RSS Feed "> </ a >
58+
59+ < a id ="nav-search-btn " class ="nav-icon " title ="Search "> </ a >
60+ </ nav >
61+ < div id ="search-form-wrap ">
62+ < form action ="//google.com/search " method ="get " accept-charset ="UTF-8 " class ="search-form "> < input type ="search " name ="q " class ="search-form-input " placeholder ="Search "> < button type ="submit " class ="search-form-submit "> </ button > < input type ="hidden " name ="sitesearch " value ="http://yoursite.com "> </ form >
63+ </ div >
64+ </ div >
65+ </ div >
66+ </ header >
67+ < div class ="outer ">
68+ < section id ="main "> < article id ="post-react进阶 " class ="article article-type-post " itemscope itemprop ="blogPost ">
69+ < div class ="article-meta ">
70+ < a href ="/2019/01/23/react进阶/ " class ="article-date ">
71+ < time datetime ="2019-01-23T13:24:06.000Z " itemprop ="datePublished "> 2019-01-23</ time >
72+ </ a >
73+
74+ </ div >
75+ < div class ="article-inner ">
76+
77+
78+ < header class ="article-header ">
79+
80+
81+ < h1 class ="article-title " itemprop ="name ">
82+ react进阶
83+ </ h1 >
84+
85+
86+ </ header >
87+
88+ < div class ="article-entry " itemprop ="articleBody ">
89+
90+ < h2 id ="react原理 "> < a href ="#react原理 " class ="headerlink " title ="react原理 "> </ a > react原理</ h2 > < p > 1、JSX (传入) => React.creatElement() =>（输出）ReactElement< br > 2、生命周期< br > 3、虚拟dom< br > 4、shouldComponentUpdate(nextProps, nextState):性能优化、定制< br > 5、setState是什么鬼：< br > 对状态的更新是异步的（多次set，只render一次）< br > 队列机制（pending队列 => 队列更新 => update最高效）< br > render中不要执行setState（因为setState会执行render）</ p >
91+ < h2 id ="redux-redux原理 "> < a href ="#redux-redux原理 " class ="headerlink " title ="redux-redux原理 "> </ a > redux-redux原理</ h2 > < pre > < code > 未完成
92+ </ code > </ pre > < h2 id ="React性能优化 "> < a href ="#React性能优化 " class ="headerlink " title ="React性能优化 "> </ a > React性能优化</ h2 > < h3 id ="React组件性能优化 "> < a href ="#React组件性能优化 " class ="headerlink " title ="React组件性能优化 "> </ a > React组件性能优化</ h3 > < p > 1、属性传递优化< br > 2、多组件优化< br > 3、key< br > 4、immutablejs的意义< br > 定义不可变的对象< br > 比较两个对象是否相等，复杂度较低< br > react中的使用：shouldComponentUpdate比较对象< br > seamless-immutable</ p >
93+ < h3 id ="Redux性能优化 "> < a href ="#Redux性能优化 " class ="headerlink " title ="Redux性能优化 "> </ a > Redux性能优化</ h3 > < p > 1、reselect:缓存数据、减少重复计算< br > 2、key属性：虚拟dom渲染中通过key来判断元素，从而提升效率</ p >
94+ < h3 id ="React同构 "> < a href ="#React同构 " class ="headerlink " title ="React同构 "> </ a > React同构</ h3 > < h2 id ="项目总结 "> < a href ="#项目总结 " class ="headerlink " title ="项目总结 "> </ a > 项目总结</ h2 > < h3 id ="Eslint "> < a href ="#Eslint " class ="headerlink " title ="Eslint "> </ a > Eslint</ h3 > < p > 相关规范：airbnb</ p >
95+ < h3 id ="async、await优化代码 "> < a href ="#async、await优化代码 " class ="headerlink " title ="async、await优化代码 "> </ a > async、await优化代码</ h3 > < p > 历史：< br > 1、call back （call back hell）< br > 2、promise< br > 3、async、await配合使用（ES7）</ p >
96+ < h3 id ="React动画解决方案 "> < a href ="#React动画解决方案 " class ="headerlink " title ="React动画解决方案 "> </ a > React动画解决方案</ h3 > < p > ReactCSSTransitionGroup< br > Ant Motion</ p >
97+ < h3 id ="项目打包编译 "> < a href ="#项目打包编译 " class ="headerlink " title ="项目打包编译 "> </ a > 项目打包编译</ h3 > < h3 id ="React-SSR "> < a href ="#React-SSR " class ="headerlink " title ="React SSR "> </ a > React SSR</ h3 >
98+
99+ </ div >
100+ < footer class ="article-footer ">
101+ < a data-url ="http://yoursite.com/2019/01/23/react进阶/ " data-id ="cjrlqo3am000364ztp7esbogm " class ="article-share-link "> Share</ a >
102+
103+
104+ < ul class ="article-tag-list "> < li class ="article-tag-list-item "> < a class ="article-tag-list-link " href ="/tags/react/ "> react</ a > </ li > </ ul >
105+
106+ </ footer >
107+ </ div >
108+
109+
110+ < nav id ="article-nav ">
111+
112+ < a href ="/2019/01/27/项目总结/ " id ="article-nav-newer " class ="article-nav-link-wrap ">
113+ < strong class ="article-nav-caption "> Newer</ strong >
114+ < div class ="article-nav-title ">
115+
116+ 项目总结
117+
118+ </ div >
119+ </ a >
120+
121+
122+ < a href ="/2018/11/04/Redux基础原理与实例/ " id ="article-nav-older " class ="article-nav-link-wrap ">
123+ < strong class ="article-nav-caption "> Older</ strong >
124+ < div class ="article-nav-title "> Redux基础原理与实例</ div >
125+ </ a >
126+
127+ </ nav >
128+
129+
130+ </ article >
131+
132+ </ section >
133+
134+ < aside id ="sidebar ">
135+
136+
137+
138+
139+
140+ < div class ="widget-wrap ">
141+ < h3 class ="widget-title "> Tags</ h3 >
142+ < div class ="widget ">
143+ < ul class ="tag-list "> < li class ="tag-list-item "> < a class ="tag-list-link " href ="/tags/react/ "> react</ a > </ li > < li class ="tag-list-item "> < a class ="tag-list-link " href ="/tags/redux-react-redux/ "> redux react-redux</ a > </ li > </ ul >
144+ </ div >
145+ </ div >
146+
147+
148+
149+
150+ < div class ="widget-wrap ">
151+ < h3 class ="widget-title "> Tag Cloud</ h3 >
152+ < div class ="widget tagcloud ">
153+ < a href ="/tags/react/ " style ="font-size: 10px; "> react</ a > < a href ="/tags/redux-react-redux/ " style ="font-size: 10px; "> redux react-redux</ a >
154+ </ div >
155+ </ div >
156+
157+
158+
159+ < div class ="widget-wrap ">
160+ < h3 class ="widget-title "> Archives</ h3 >
161+ < div class ="widget ">
162+ < ul class ="archive-list "> < li class ="archive-list-item "> < a class ="archive-list-link " href ="/archives/2019/02/ "> February 2019</ a > </ li > < li class ="archive-list-item "> < a class ="archive-list-link " href ="/archives/2019/01/ "> January 2019</ a > </ li > < li class ="archive-list-item "> < a class ="archive-list-link " href ="/archives/2018/11/ "> November 2018</ a > </ li > < li class ="archive-list-item "> < a class ="archive-list-link " href ="/archives/2018/08/ "> August 2018</ a > </ li > </ ul >
163+ </ div >
164+ </ div >
165+
166+
167+
168+
169+ < div class ="widget-wrap ">
170+ < h3 class ="widget-title "> Recent Posts</ h3 >
171+ < div class ="widget ">
172+ < ul >
173+
174+ < li >
175+ < a href ="/2019/02/01/React-router4基础/ "> React-router4基础</ a >
176+ </ li >
177+
178+ < li >
179+ < a href ="/2019/01/27/项目总结/ "> 项目总结</ a >
180+ </ li >
181+
182+ < li >
183+ < a href ="/2019/01/23/react进阶/ "> react进阶</ a >
184+ </ li >
185+
186+ < li >
187+ < a href ="/2018/11/04/Redux基础原理与实例/ "> Redux基础原理与实例</ a >
188+ </ li >
189+
190+ < li >
191+ < a href ="/2018/08/26/hello-world/ "> Hello World</ a >
192+ </ li >
193+
194+ </ ul >
195+ </ div >
196+ </ div >
197+
198+
199+ </ aside >
200+
201+ </ div >
202+ < footer id ="footer ">
203+
204+ < div class ="outer ">
205+ < div id ="footer-info " class ="inner ">
206+ © 2019 Colin Gao< br >
207+ Powered by < a href ="http://hexo.io/ " target ="_blank "> Hexo</ a >
208+ </ div >
209+ </ div >
210+ </ footer >
211+ </ div >
212+ < nav id ="mobile-nav ">
213+
214+ < a href ="/ " class ="mobile-nav-link "> Home</ a >
215+
216+ < a href ="/archives " class ="mobile-nav-link "> Archives</ a >
217+
218+ </ nav >
219+
220+
221+ < script src ="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js "> </ script >
222+
223+
224+ < link rel ="stylesheet " href ="/fancybox/jquery.fancybox.css ">
225+ < script src ="/fancybox/jquery.fancybox.pack.js "> </ script >
226+
227+
228+ < script src ="/js/script.js "> </ script >
229+
230+
231+
232+ </ div >
233+ </ body >
234+ </ html >
0 commit comments