<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title><![CDATA[刘新修]]></title> 
<link>http://pic1.liuxinxiu.com:80/index.php</link> 
<description><![CDATA[刘新修的个人博客 (Liuxinxiu'S Blog)]]></description> 
<language>zh-cn</language> 
<copyright><![CDATA[刘新修]]></copyright>
<item>
<link>http://pic1.liuxinxiu.com:80/React_component/</link>
<title><![CDATA[React - component组件的生命周期]]></title> 
<author>刘新修 &lt;admin@yourname.com&gt;</author>
<category><![CDATA[H5/JS/CSS]]></category>
<pubDate>Sun, 09 Oct 2016 03:05:49 +0000</pubDate> 
<guid>http://pic1.liuxinxiu.com:80/React_component/</guid> 
<description>
<![CDATA[ 
	<p><span style="font-family: 'microsoft yahei'; line-height: 26px;">component的生命周期图</span></p><p><img src="http://at.liuxinxiu.com/2016/10/image/React_component.jpg" width="500" height="608" alt="" /></p><h2 id="getdefaultprops" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; font-family: 'microsoft yahei'; line-height: 26px;">getDefaultProps</h2><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;"><code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">object getDefaultProps()</code></p><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">执行过一次后，被创建的类会有缓存，映射的值会存在<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">this.props</code>,前提是这个prop不是父组件指定的&nbsp;<br style="box-sizing: border-box;" />这个方法在对象被创建之前执行，因此不能在方法内调用<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">this.props</code>&nbsp;，另外，注意任何<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">getDefaultProps()</code>返回的对象在实例中共享，不是复制</p><h2 id="getinitialstate" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; font-family: 'microsoft yahei'; line-height: 26px;"><a name="t1" style="color: rgb(202, 0, 0); box-sizing: border-box;"></a>getInitialState</h2><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;"><code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">object getInitialState()</code></p><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">控件加载之前执行，返回值会被用于state的初始化值</p><h2 id="componentwillmount" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; font-family: 'microsoft yahei'; line-height: 26px;"><a name="t2" style="color: rgb(202, 0, 0); box-sizing: border-box;"></a>componentWillMount</h2><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;"><code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">void componentWillMount()</code></p><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">执行一次，在初始化<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">render</code>之前执行，如果在这个方法内调用<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">setState</code>，<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">render()</code>知道state发生变化，并且只执行一次</p><h2 id="render" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; font-family: 'microsoft yahei'; line-height: 26px;"><a name="t3" style="color: rgb(202, 0, 0); box-sizing: border-box;"></a>render</h2><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;"><code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">ReactElement render()</code></p><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">render的时候会调用<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">render()</code>会被调用&nbsp;<br style="box-sizing: border-box;" />调用<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">render()</code>方法时，首先检查<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">this.props</code>和<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">this.state</code>返回一个子元素，子元素可以是DOM组件或者其他自定义复合控件的虚拟实现&nbsp;<br style="box-sizing: border-box;" />如果不想渲染可以返回null或者false，这种场景下，React渲染一个<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">&lt;noscript&gt;</code>标签，当返回null或者false时，<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">ReactDOM.findDOMNode(this)</code>返回null&nbsp;<br style="box-sizing: border-box;" /><code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">render()</code>方法是很纯净的，这就意味着不要在这个方法里初始化组件的state，每次执行时返回相同的值，不会读写DOM或者与服务器交互，如果必须如服务器交互，在<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">componentDidMount()</code>方法中实现或者其他生命周期的方法中实现，保持<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">render()</code>方法纯净使得服务器更准确，组件更简单</p><h2 id="componentdidmount" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; font-family: 'microsoft yahei'; line-height: 26px;"><a name="t4" style="color: rgb(202, 0, 0); box-sizing: border-box;"></a>componentDidMount</h2><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;"><code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">void componentDidMount()</code></p><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">在初始化render之后只执行一次，在这个方法内，可以访问任何组件，<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">componentDidMount()</code>方法中的子组件在父组件之前执行</p><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求</p><h2 id="shouldcomponentupdate" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; font-family: 'microsoft yahei'; line-height: 26px;"><a name="t5" style="color: rgb(202, 0, 0); box-sizing: border-box;"></a>shouldComponentUpdate</h2><pre class="prettyprint" name="code" style="white-space: nowrap; word-wrap: break-word; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro', monospace; padding: 5px 5px 5px 60px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); border: 1px solid rgba(128, 128, 128, 0.0745098); border-radius: 0px; background-color: rgba(128, 128, 128, 0.0470588);"><code class="hljs vbnet has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-size: inherit; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">boolean</span> shouldComponentUpdate(&nbsp;&nbsp; <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">object</span> nextProps, <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">object</span> nextState )</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-bottom: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-bottom: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul></pre><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">这个方法在初始化<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">render</code>时不会执行，当props或者state发生变化时执行，并且是在<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">render</code>之前，当新的<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">props</code>或者<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">state</code>不需要更新组件时，返回false</p><pre class="prettyprint" name="code" style="white-space: nowrap; word-wrap: break-word; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro', monospace; padding: 5px 5px 5px 60px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); border: 1px solid rgba(128, 128, 128, 0.0745098); border-radius: 0px; background-color: rgba(128, 128, 128, 0.0470588);"><code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-size: inherit; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">shouldComponentUpdate: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(nextProps, nextState)</span> &#123;</span>&nbsp;&nbsp; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> nextProps.id !== <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.id; &#125;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-bottom: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-bottom: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul></pre><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">当<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">shouldComponentUpdate</code>方法返回false时，讲不会执行<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">render()</code>方法，<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">componentWillUpdate</code>和<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">componentDidUpdate</code>方法也不会被调用</p><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">默认情况下，<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">shouldComponentUpdate</code>方法返回true防止<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">state</code>快速变化时的问题，但是如果&middot;<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">state</code>不变，<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">props</code>只读，可以直接覆盖<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">shouldComponentUpdate</code>用于比较<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">props</code>和<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">state</code>的变化，决定UI是否更新，当组件比较多时，使用这个方法能有效提高应用性能</p><h2 id="componentwillupdate" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; font-family: 'microsoft yahei'; line-height: 26px;"><a name="t6" style="color: rgb(202, 0, 0); box-sizing: border-box;"></a>componentWillUpdate</h2><pre class="prettyprint" name="code" style="white-space: nowrap; word-wrap: break-word; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro', monospace; padding: 5px 5px 5px 60px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); border: 1px solid rgba(128, 128, 128, 0.0745098); border-radius: 0px; background-color: rgba(128, 128, 128, 0.0470588);"><code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-size: inherit; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> componentWillUpdate(&nbsp;&nbsp; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">object</span> nextProps, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">object</span> nextState )</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-bottom: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-bottom: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul></pre><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">当<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">props</code>和<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">state</code>发生变化时执行，并且在<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">render</code>方法之前执行，当然初始化render时不执行该方法，需要特别注意的是，在这个函数里面，你就不能使用<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">this.setState</code>来修改状态。这个函数调用之后，就会把<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">nextProps</code>和<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">nextState</code>分别设置到<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">this.props</code>和<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">this.state</code>中。紧接着这个函数，就会调用<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">render()</code>来更新界面了</p><h2 id="componentdidupdate" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; font-family: 'microsoft yahei'; line-height: 26px;"><a name="t7" style="color: rgb(202, 0, 0); box-sizing: border-box;"></a>componentDidUpdate</h2><pre class="prettyprint" name="code" style="white-space: nowrap; word-wrap: break-word; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro', monospace; padding: 5px 5px 5px 60px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); border: 1px solid rgba(128, 128, 128, 0.0745098); border-radius: 0px; background-color: rgba(128, 128, 128, 0.0470588);"><code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-size: inherit; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> componentDidUpdate(&nbsp;&nbsp; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">object</span> prevProps, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">object</span> prevState )</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-bottom: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-bottom: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul></pre><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">组件更新结束之后执行，在初始化<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">render</code>时不执行</p><h2 id="componentwillreceiveprops" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; font-family: 'microsoft yahei'; line-height: 26px;"><a name="t8" style="color: rgb(202, 0, 0); box-sizing: border-box;"></a>componentWillReceiveProps</h2><pre class="prettyprint" name="code" style="white-space: nowrap; word-wrap: break-word; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro', monospace; padding: 5px 5px 5px 60px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); border: 1px solid rgba(128, 128, 128, 0.0745098); border-radius: 0px; background-color: rgba(128, 128, 128, 0.0470588);"><code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-size: inherit; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> componentWillReceiveProps(&nbsp;&nbsp; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">object</span> nextProps )</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-bottom: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-bottom: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul></pre><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">当<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">props</code>发生变化时执行，初始化<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">render</code>时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">this.setState()</code>来更新你的组件状态，旧的属性还是可以通过<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">this.props</code>来获取,这里调用更新状态是安全的，并不会触发额外的<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">render</code>调用</p><pre class="prettyprint" name="code" style="white-space: nowrap; word-wrap: break-word; box-sizing: border-box; position: relative; overflow-y: hidden; overflow-x: auto; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro', monospace; padding: 5px 5px 5px 60px; line-height: 1.45; word-break: break-all; color: rgb(51, 51, 51); border: 1px solid rgba(128, 128, 128, 0.0745098); border-radius: 0px; background-color: rgba(128, 128, 128, 0.0470588);"><code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-size: inherit; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">componentWillReceiveProps: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(nextProps)</span> &#123;</span>&nbsp;&nbsp; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.setState(&#123;&nbsp;&nbsp;&nbsp;&nbsp; likesIncreasing: nextProps.likeCount &gt; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.props.likeCount&nbsp;&nbsp; &#125;); &#125;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-bottom: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 6px; padding-bottom: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul></pre><h2 id="componentwillunmount" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; font-family: 'microsoft yahei'; line-height: 26px;"><a name="t9" style="color: rgb(202, 0, 0); box-sizing: border-box;"></a>componentWillUnmount</h2><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;"><code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">void componentWillUnmount()</code></p><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">当组件要被从界面上移除的时候，就会调用<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">componentWillUnmount()</code>,在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等</p><h2 id="总结" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; font-family: 'microsoft yahei'; line-height: 26px;"><a name="t10" style="color: rgb(202, 0, 0); box-sizing: border-box;"></a>总结</h2><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">React Native的生命周期就介绍完了，其中最上面的虚线框和右下角的虚线框的方法一定会执行，左下角的方法根据<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">props</code>&nbsp;<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">state</code>是否变化去执行，其中建议只有在<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">componentWillMount</code>,<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">componentDidMount</code>,<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">componentWillReceiveProps</code>方法中可以修改<code style="box-sizing: border-box; font-family: 'Source Code Pro', monospace; padding: 2px 4px; font-size: 12.6px; color: rgb(63, 63, 63); white-space: nowrap; border-radius: 0px; background-color: rgba(128, 128, 128, 0.0745098);">state</code>值</p><p style="box-sizing: border-box; font-family: 'microsoft yahei'; line-height: 26px;">英文地址：<a href="https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods" style="color: rgb(202, 0, 0); text-decoration: none; box-sizing: border-box;">https://facebook.github.io/react/docs/component-specs.html#lifecycle-methods</a></p><p style="margin: 10px auto; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 28px;"><strong style="margin: 0px; padding: 0px;"><span style="margin: 0px; padding: 0px; line-height: 1.8;">组件的生命周期</span></strong></p><p style="margin: 10px auto; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 28px;">组件的生命周期分成三个状态：</p><ul class=" list-paddingleft-2" style="margin-right: 0px; margin-bottom: 1em; margin-left: 40px; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 28px;"><li style="margin: 0px; padding: 0px; list-style-type: disc;"><p style="margin: 10px auto;">Mounting：已插入真实 DOM</p></li><li style="margin: 0px; padding: 0px; list-style-type: disc;"><p style="margin: 10px auto;">Updating：正在被重新渲染</p></li><li style="margin: 0px; padding: 0px; list-style-type: disc;"><p style="margin: 10px auto;">Unmounting：已移出真实 DOM</p></li></ul><p style="margin: 10px auto; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 28px;">React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。</p><ul class=" list-paddingleft-2" style="margin-right: 0px; margin-bottom: 1em; margin-left: 40px; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 28px;"><li style="margin: 0px; padding: 0px; list-style-type: disc;"><p style="margin: 10px auto;">componentWillMount()</p></li><li style="margin: 0px; padding: 0px; list-style-type: disc;"><p style="margin: 10px auto;">componentDidMount()</p></li><li style="margin: 0px; padding: 0px; list-style-type: disc;"><p style="margin: 10px auto;">componentWillUpdate(object nextProps, object nextState)</p></li><li style="margin: 0px; padding: 0px; list-style-type: disc;"><p style="margin: 10px auto;">componentDidUpdate(object prevProps, object prevState)</p></li><li style="margin: 0px; padding: 0px; list-style-type: disc;"><p style="margin: 10px auto;">componentWillUnmount()</p></li></ul><p style="margin: 10px auto; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 28px;">此外，React 还提供两种特殊状态的处理函数。</p><ul class=" list-paddingleft-2" style="margin-right: 0px; margin-bottom: 1em; margin-left: 40px; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 28px;"><li style="margin: 0px; padding: 0px; list-style-type: disc;"><p style="margin: 10px auto;">componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用</p></li><li style="margin: 0px; padding: 0px; list-style-type: disc;"><p style="margin: 10px auto;">shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用</p></li></ul><br/>Tags - <a href="http://pic1.liuxinxiu.com:80/tags/react/" rel="tag">react</a> , <a href="http://pic1.liuxinxiu.com:80/tags/component/" rel="tag">component</a>
]]>
</description>
</item><item>
<link>http://pic1.liuxinxiu.com:80/React_component/#blogcomment</link>
<title><![CDATA[[评论] React - component组件的生命周期]]></title> 
<author> &lt;user@domain.com&gt;</author>
<category><![CDATA[评论]]></category>
<pubDate>Thu, 01 Jan 1970 00:00:00 +0000</pubDate> 
<guid>http://pic1.liuxinxiu.com:80/React_component/#blogcomment</guid> 
<description>
<![CDATA[ 
	
]]>
</description>
</item>
</channel>
</rss>