Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 214fd66

Browse files
xcj-codingxcj-coding
committed
修改下博客
1 parent f9a0ce8 commit 214fd66

File tree

25 files changed

+2999
-8796
lines changed

25 files changed

+2999
-8796
lines changed

‎2016/04/03/test/index.html

-507
This file was deleted.

‎2016/04/03/xcj1/index.html

-517
This file was deleted.

‎2016/04/03/xcj12/index.html

-517
This file was deleted.

‎2016/04/03/xcj123/index.html

-517
This file was deleted.

‎2016/04/03/xcj1234/index.html

-517
This file was deleted.

‎2016/04/03/xcj12345/index.html

-517
This file was deleted.

‎2016/04/03/xcj123456/index.html

-517
This file was deleted.

‎2016/04/03/xcj1234567/index.html

-517
This file was deleted.

‎2016/04/03/xcj12345678/index.html

-517
This file was deleted.

‎2016/04/03/xcj123456789/index.html

-517
This file was deleted.

‎2016/04/03/xcj1234567890/index.html

-517
This file was deleted.

‎2016/04/03/xcj12345678901/index.html

-517
This file was deleted.

‎2016/04/17/async/index.html

+723
Large diffs are not rendered by default.

‎2016/04/17/class/index.html

+733
Large diffs are not rendered by default.

‎2016/04/17/module/index.html

+737
Large diffs are not rendered by default.

‎2016/04/17/promise/index.html

+650
Large diffs are not rendered by default.

‎2016/04/03/xcj/index.html renamed to ‎2016/04/17/react生命周期/index.html

+66-22
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@
33
<head>
44
<meta charset="utf-8">
55

6-
<title>xcj | Yangtze Xiong--个人博客</title>
6+
<title>react生命周期方法 | Yangtze Xiong--个人博客</title>
77
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8-
<meta name="description">
8+
<meta name="description" content="生命周期方法">
99
<meta property="og:type" content="article">
10-
<meta property="og:title" content="xcj">
11-
<meta property="og:url" content="http://xiaox.coding.me/2016/04/03/xcj/index.html">
10+
<meta property="og:title" content="react生命周期方法">
11+
<meta property="og:url" content="http://xiaox.coding.me/2016/04/17/react生命周期/index.html">
1212
<meta property="og:site_name" content="Yangtze Xiong--个人博客">
13-
<meta property="og:description">
14-
<meta property="og:updated_time" content="2016-04-03T10:39:57.000Z">
13+
<meta property="og:description" content="生命周期方法">
14+
<meta property="og:updated_time" content="2016-04-17T14:42:24.000Z">
1515
<meta name="twitter:card" content="summary">
16-
<meta name="twitter:title" content="xcj">
17-
<meta name="twitter:description">
16+
<meta name="twitter:title" content="react生命周期方法">
17+
<meta name="twitter:description" content="生命周期方法">
1818

1919
<link rel="alternative" href="/" title="Yangtze Xiong--个人博客" type="application/atom+xml">
2020

@@ -232,11 +232,11 @@ <h1 class="header-author"><a href="/" title="回到主页">Yangtze Xiong</a></h1
232232
</header>
233233
</div>
234234
</nav>
235-
<div class="body-wrap"><article id="post-xcj" class="article article-type-post" itemscope itemprop="blogPost">
235+
<div class="body-wrap"><article id="post-react生命周期" class="article article-type-post" itemscope itemprop="blogPost">
236236

237237
<div class="article-meta">
238-
<a href="/2016/04/03/xcj/" class="article-date">
239-
<time datetime="2016-04-03T10:39:57.000Z" itemprop="datePublished">2016-04-03</time>
238+
<a href="/2016/04/17/react生命周期/" class="article-date">
239+
<time datetime="2016-04-17T13:51:25.000Z" itemprop="datePublished">2016-04-17</time>
240240
</a>
241241
</div>
242242

@@ -249,7 +249,7 @@ <h1 class="header-author"><a href="/" title="回到主页">Yangtze Xiong</a></h1
249249

250250

251251
<h1 class="article-title" itemprop="name">
252-
xcj
252+
react生命周期方法
253253
</h1>
254254

255255

@@ -266,21 +266,65 @@ <h1 class="article-title" itemprop="name">
266266
<div class="article-entry" itemprop="articleBody">
267267

268268

269-
269+
<p>生命周期方法</p>
270+
<a id="more"></a>
271+
<ol>
272+
<li><p>componentWillMount(){}</p>
273+
<blockquote>
274+
<p>挂载，服务端和客户端初始化只调用一次，在初始化渲染执行之前立刻调用</p>
275+
</blockquote>
276+
</li>
277+
<li><p>componentDidMount(){}</p>
278+
<blockquote>
279+
<p>挂载，在初始化渲染执行之后立刻调用一次，仅客户端有效，<br>组件拥有一次DOM展示，可以通过this.getDOMNode()来获取相应的DOM节点</p>
280+
</blockquote>
281+
</li>
282+
<li><p>componentWillReceiveProps(){}</p>
283+
<blockquote>
284+
<p>更新，在组件接收到新的props调用，初始化渲染的时候不会调用<br>可以作为react在prop传入之后，render()渲染之前更新state的机会，老的props可以通过this.props获取到。<br>在该函数中调用this.setState()将不会引起第二次渲染<br>componentWillReceiveProps(object nextProps){</p>
285+
<p>}<br>componentWillReceiveProps(nextProps){</p>
286+
<pre><code>this.setState({
287+
likesIncreasing: nextProps.likeCount &gt; this.props.likeCount
288+
})
289+
</code></pre><p>}</p>
290+
</blockquote>
291+
</li>
292+
<li><p>shouldComponentUpdate(nextProps,nextState){return nextProps.id !== this.props.id;}</p>
293+
<blockquote>
294+
<p>更新，确定新的props和state不会导致组件更新，此处返回false，render()将不会执行，直到下一次state改变<br>componentWillUpdate和componentDidUpdate也不会调用</p>
295+
</blockquote>
296+
</li>
297+
<li><p>componentWillUpdate(props, state){}</p>
298+
<blockquote>
299+
<p>更新，你不能在刚方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变<br>使用 componentWillReceiveProps</p>
300+
</blockquote>
301+
</li>
302+
<li><p>componentDidUpdata(prevProps, prevState){}</p>
303+
<blockquote>
304+
<p>在组件的更新同步到DOM中之后立刻被调用，初始化的时候不调用<br>访问DOM节点使用this.getDOMNode()</p>
305+
</blockquote>
306+
</li>
307+
<li><p>componentWillUnmount(){}</p>
308+
<blockquote>
309+
<p>在组件从DOM中移除的时候立刻调用<br>该方法中执行任何必要的清理</p>
310+
</blockquote>
311+
</li>
312+
</ol>
313+
270314

271315
</div>
272316

273317
</div>
274318

275319

276320
<div class="copyright">
277-
<p><span>本文标题:</span><a href="/2016/04/03/xcj/">xcj</a></p>
321+
<p><span>本文标题:</span><a href="/2016/04/17/react生命周期/">react生命周期方法</a></p>
278322
<p><span>文章作者:</span><a href="/" title="访问 Yangtze Xiong 的个人博客">Yangtze Xiong</a></p>
279-
<p><span>发布时间:</span>2016年04月03日 - 18时39分</p>
280-
<p><span>最后更新:</span>2016年04月03日 - 18时39分</p>
323+
<p><span>发布时间:</span>2016年04月17日 - 21时51分</p>
324+
<p><span>最后更新:</span>2016年04月17日 - 22时42分</p>
281325
<p>
282-
<span>原始链接:</span><a class="post-url" href="/2016/04/03/xcj/" title="xcj">http://xiaox.coding.me/2016/04/03/xcj/</a>
283-
<span class="copy-path" data-clipboard-text="原文: http://xiaox.coding.me/2016/04/03/xcj/　　作者: Yangtze Xiong" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
326+
<span>原始链接:</span><a class="post-url" href="/2016/04/17/react生命周期/" title="react生命周期方法">http://xiaox.coding.me/2016/04/17/react生命周期/</a>
327+
<span class="copy-path" data-clipboard-text="原文: http://xiaox.coding.me/2016/04/17/react生命周期/　　作者: Yangtze Xiong" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
284328
<script src="/js/clipboard.min.js"></script>
285329
<script> var clipboard = new Clipboard('.copy-path'); </script>
286330
</p>
@@ -293,11 +337,11 @@ <h1 class="article-title" itemprop="name">
293337

294338
<nav id="article-nav">
295339

296-
<a href="/2016/04/03/xcj1/" id="article-nav-newer" class="article-nav-link-wrap">
340+
<a href="/2016/04/17/module/" id="article-nav-newer" class="article-nav-link-wrap">
297341
<strong class="article-nav-caption"><</strong>
298342
<div class="article-nav-title">
299343

300-
xcj1
344+
ES6 -- Module
301345

302346
</div>
303347
</a>
@@ -375,7 +419,7 @@ <h1 class="article-title" itemprop="name">
375419

376420
<div class="scroll" id="post-nav-button">
377421

378-
<a href="/2016/04/03/xcj1/" title="上一篇: xcj1">
422+
<a href="/2016/04/17/module/" title="上一篇: ES6 -- Module">
379423
<i class="fa fa-angle-left"></i>
380424
</a>
381425

@@ -384,7 +428,7 @@ <h1 class="article-title" itemprop="name">
384428
<a href="/" title="回到主页"><i class="fa fa-home"></i></a>
385429

386430
</div>
387-
<ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2016/04/03/test/">test</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/03/xcj12345678901/">xcj12345678901</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/03/xcj1234567890/">xcj1234567890</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/03/xcj123456789/">xcj123456789</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/03/xcj12345678/">xcj12345678</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/03/xcj1234567/">xcj1234567</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/03/xcj123456/">xcj123456</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/03/xcj12345/">xcj12345</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/03/xcj1234/">xcj1234</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/03/xcj123/">xcj123</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/03/xcj12/">xcj12</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/03/xcj1/">xcj1</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/03/xcj/">xcj</a></li></ul>
431+
<ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2016/04/17/promise/">ES6 -- Promise对象</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/17/async/">ES6 -- 异步操作和Async函数</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/17/class/">ES6 -- Class</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/17/module/">ES6 -- Module</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/04/17/react生命周期/">react生命周期方法</a></li></ul>
388432
<script src="http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js"></script>
389433
<script>
390434
$(".post-list").addClass("toc-article");

‎archives/2016/04/index.html

+15-154
Original file line numberDiff line numberDiff line change
@@ -248,14 +248,14 @@ <h1 class="header-author"><a href="/" title="回到主页">Yangtze Xiong</a></h1
248248
<div class="archive-article-inner">
249249
<header class="archive-article-header">
250250
<div class="article-meta">
251-
<a href="/2016/04/03/test/" class="archive-article-date">
252-
<time datetime="2016-04-03T11:48:39.000Z" itemprop="datePublished">04-03</time>
251+
<a href="/2016/04/17/promise/" class="archive-article-date">
252+
<time datetime="2016-04-17T14:50:10.000Z" itemprop="datePublished">04-17</time>
253253
</a>
254254
</div>
255255

256256

257257
<h1 itemprop="name">
258-
<a class="archive-article-title" href="/2016/04/03/test/">test</a>
258+
<a class="archive-article-title" href="/2016/04/17/promise/">ES6 -- Promise对象</a>
259259
</h1>
260260

261261

@@ -275,14 +275,14 @@ <h1 itemprop="name">
275275
<div class="archive-article-inner">
276276
<header class="archive-article-header">
277277
<div class="article-meta">
278-
<a href="/2016/04/03/xcj12345678901/" class="archive-article-date">
279-
<time datetime="2016-04-03T10:57:55.000Z" itemprop="datePublished">04-03</time>
278+
<a href="/2016/04/17/async/" class="archive-article-date">
279+
<time datetime="2016-04-17T14:47:40.000Z" itemprop="datePublished">04-17</time>
280280
</a>
281281
</div>
282282

283283

284284
<h1 itemprop="name">
285-
<a class="archive-article-title" href="/2016/04/03/xcj12345678901/">xcj12345678901</a>
285+
<a class="archive-article-title" href="/2016/04/17/async/">ES6 -- 异步操作和Async函数</a>
286286
</h1>
287287

288288

@@ -302,14 +302,14 @@ <h1 itemprop="name">
302302
<div class="archive-article-inner">
303303
<header class="archive-article-header">
304304
<div class="article-meta">
305-
<a href="/2016/04/03/xcj1234567890/" class="archive-article-date">
306-
<time datetime="2016-04-03T10:45:54.000Z" itemprop="datePublished">04-03</time>
305+
<a href="/2016/04/17/class/" class="archive-article-date">
306+
<time datetime="2016-04-17T14:44:36.000Z" itemprop="datePublished">04-17</time>
307307
</a>
308308
</div>
309309

310310

311311
<h1 itemprop="name">
312-
<a class="archive-article-title" href="/2016/04/03/xcj1234567890/">xcj1234567890</a>
312+
<a class="archive-article-title" href="/2016/04/17/class/">ES6 -- Class</a>
313313
</h1>
314314

315315

@@ -329,14 +329,14 @@ <h1 itemprop="name">
329329
<div class="archive-article-inner">
330330
<header class="archive-article-header">
331331
<div class="article-meta">
332-
<a href="/2016/04/03/xcj123456789/" class="archive-article-date">
333-
<time datetime="2016-04-03T10:45:51.000Z" itemprop="datePublished">04-03</time>
332+
<a href="/2016/04/17/module/" class="archive-article-date">
333+
<time datetime="2016-04-17T14:38:49.000Z" itemprop="datePublished">04-17</time>
334334
</a>
335335
</div>
336336

337337

338338
<h1 itemprop="name">
339-
<a class="archive-article-title" href="/2016/04/03/xcj123456789/">xcj123456789</a>
339+
<a class="archive-article-title" href="/2016/04/17/module/">ES6 -- Module</a>
340340
</h1>
341341

342342

@@ -356,149 +356,14 @@ <h1 itemprop="name">
356356
<div class="archive-article-inner">
357357
<header class="archive-article-header">
358358
<div class="article-meta">
359-
<a href="/2016/04/03/xcj12345678/" class="archive-article-date">
360-
<time datetime="2016-04-03T10:45:48.000Z" itemprop="datePublished">04-03</time>
359+
<a href="/2016/04/17/react生命周期/" class="archive-article-date">
360+
<time datetime="2016-04-17T13:51:25.000Z" itemprop="datePublished">04-17</time>
361361
</a>
362362
</div>
363363

364364

365365
<h1 itemprop="name">
366-
<a class="archive-article-title" href="/2016/04/03/xcj12345678/">xcj12345678</a>
367-
</h1>
368-
369-
370-
<div class="article-info info-on-archive">
371-
372-
373-
374-
</div>
375-
<div class="clearfix"></div>
376-
</header>
377-
</div>
378-
</article>
379-
380-
381-
382-
<article class="archive-article archive-type-post">
383-
<div class="archive-article-inner">
384-
<header class="archive-article-header">
385-
<div class="article-meta">
386-
<a href="/2016/04/03/xcj1234567/" class="archive-article-date">
387-
<time datetime="2016-04-03T10:45:46.000Z" itemprop="datePublished">04-03</time>
388-
</a>
389-
</div>
390-
391-
392-
<h1 itemprop="name">
393-
<a class="archive-article-title" href="/2016/04/03/xcj1234567/">xcj1234567</a>
394-
</h1>
395-
396-
397-
<div class="article-info info-on-archive">
398-
399-
400-
401-
</div>
402-
<div class="clearfix"></div>
403-
</header>
404-
</div>
405-
</article>
406-
407-
408-
409-
<article class="archive-article archive-type-post">
410-
<div class="archive-article-inner">
411-
<header class="archive-article-header">
412-
<div class="article-meta">
413-
<a href="/2016/04/03/xcj123456/" class="archive-article-date">
414-
<time datetime="2016-04-03T10:45:43.000Z" itemprop="datePublished">04-03</time>
415-
</a>
416-
</div>
417-
418-
419-
<h1 itemprop="name">
420-
<a class="archive-article-title" href="/2016/04/03/xcj123456/">xcj123456</a>
421-
</h1>
422-
423-
424-
<div class="article-info info-on-archive">
425-
426-
427-
428-
</div>
429-
<div class="clearfix"></div>
430-
</header>
431-
</div>
432-
</article>
433-
434-
435-
436-
<article class="archive-article archive-type-post">
437-
<div class="archive-article-inner">
438-
<header class="archive-article-header">
439-
<div class="article-meta">
440-
<a href="/2016/04/03/xcj12345/" class="archive-article-date">
441-
<time datetime="2016-04-03T10:45:39.000Z" itemprop="datePublished">04-03</time>
442-
</a>
443-
</div>
444-
445-
446-
<h1 itemprop="name">
447-
<a class="archive-article-title" href="/2016/04/03/xcj12345/">xcj12345</a>
448-
</h1>
449-
450-
451-
<div class="article-info info-on-archive">
452-
453-
454-
455-
</div>
456-
<div class="clearfix"></div>
457-
</header>
458-
</div>
459-
</article>
460-
461-
462-
463-
<article class="archive-article archive-type-post">
464-
<div class="archive-article-inner">
465-
<header class="archive-article-header">
466-
<div class="article-meta">
467-
<a href="/2016/04/03/xcj1234/" class="archive-article-date">
468-
<time datetime="2016-04-03T10:45:36.000Z" itemprop="datePublished">04-03</time>
469-
</a>
470-
</div>
471-
472-
473-
<h1 itemprop="name">
474-
<a class="archive-article-title" href="/2016/04/03/xcj1234/">xcj1234</a>
475-
</h1>
476-
477-
478-
<div class="article-info info-on-archive">
479-
480-
481-
482-
</div>
483-
<div class="clearfix"></div>
484-
</header>
485-
</div>
486-
</article>
487-
488-
489-
490-
<article class="archive-article archive-type-post">
491-
<div class="archive-article-inner">
492-
<header class="archive-article-header">
493-
<div class="article-meta">
494-
<a href="/2016/04/03/xcj123/" class="archive-article-date">
495-
<time datetime="2016-04-03T10:45:33.000Z" itemprop="datePublished">04-03</time>
496-
</a>
497-
</div>
498-
499-
500-
<h1 itemprop="name">
501-
<a class="archive-article-title" href="/2016/04/03/xcj123/">xcj123</a>
366+
<a class="archive-article-title" href="/2016/04/17/react生命周期/">react生命周期方法</a>
502367
</h1>
503368

504369

@@ -517,10 +382,6 @@ <h1 itemprop="name">
517382

518383

519384

520-
<nav id="page-nav">
521-
<span class="page-number current">1</span><a class="page-number" href="/archives/2016/04/page/2/">2</a><a class="extend next" rel="next" href="/archives/2016/04/page/2/">Next &raquo;</a>
522-
</nav>
523-
524385

525386
</div>
526387
<footer id="footer">

0 commit comments

Comments
 (0)