root
/
myBlogs_2


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207
							
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>React/React Native 的ES5 ES6写法对照表 · 代码收集</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.1.1">
        
        
    <link rel="stylesheet" href="../../gitbook/style.css">

    
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search-pro/search.css">
                
            
                <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">
                
            
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">


    <link rel="next" href="03.html" />
    
    
    <link rel="prev" href="01.html" />
    

    </head>
    <body>
        
<div class="gb-page-wrapper">
    <header class="gb-page-header">
        <div class="container">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>


            <a href="../.." class="logo">
                <img src="../../gitbook/images/logo/128.png">
                <h1>代码收集</h1>
            </a>

            
<a href="https://github.com/seamong/myBlogs/blob/master/doc/JavaScript/cases/02.md" target="_blank" class="btn btn-link pull-right hidden-xs">
    <i class="octicon octicon-mark-github"></i> 在GitHub编辑本页
</a>
<a href="../../faq.md" class="btn btn-link pull-right hidden-xs">
    F.A.Q
</a>
<a href="https://github.com/seamong/myBlogs/README.md" target="_blank" class="btn btn-link pull-right hidden-xs">
    当前版本0.0.1
</a>

        
        </div>
    </header>

    <div class="gb-page-body">
        <div class="gb-page-inner">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        

    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">介绍</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../../" class="list-group-item ">
        

            关于本文档

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">JavaScript</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../principle/" class="list-group-item ">
        

            <i class="octicon octicon-chevron-right"></i>
            

            原理解析

        
        </a>
        

        <a href="./" class="list-group-item ">
        

            <i class="octicon octicon-chevron-down"></i>
            

            案例解析

        
        </a>
        

        <a href="0.html" class="list-group-item ">
        

            <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
            

            动态替换图片

        
        </a>
        

        <a href="01.html" class="list-group-item ">
        

            <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
            

            原生Ajax学习

        
        </a>
        

        <a href="02.html" class="list-group-item active">
        

            <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
            

            React/React Native 的ES5 ES6写法对照表

        
        </a>
        

        <a href="03.html" class="list-group-item ">
        

            <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
            

            战舰游戏

        
        </a>
        

        <a href="04.html" class="list-group-item ">
        

            <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
            

            正则截取指定字符串

        
        </a>
        

        <a href="05.html" class="list-group-item ">
        

            <i class="octicon octicon-chevron-down" style="opacity: 0"></i>
            

            常用功能收集

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">angular</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../../angular/study_notes/" class="list-group-item ">
        

            <i class="octicon octicon-chevron-right"></i>
            

            Study notes

        
        </a>
        

        <a href="../../angular/ng.html" class="list-group-item ">
        

            ng

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">css</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../../css/principle/" class="list-group-item ">
        

            原理解析

        
        </a>
        

        <a href="../../css/cases/" class="list-group-item ">
        

            <i class="octicon octicon-chevron-right"></i>
            

            案例收集

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">vue</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../../vue/components/" class="list-group-item ">
        

            <i class="octicon octicon-chevron-right"></i>
            

            components

        
        </a>
        

        <a href="../../vue/router/" class="list-group-item ">
        

            <i class="octicon octicon-chevron-right"></i>
            

            router

        
        </a>
        

        <a href="../../vue/vuex/" class="list-group-item ">
        

            VUE

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">ubuntu</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../../ubuntu/serves/" class="list-group-item ">
        

            <i class="octicon octicon-chevron-right"></i>
            

            服务器生存指南

        
        </a>
        

        <a href="../../ubuntu/instruction.html" class="list-group-item ">
        

            常用指令

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading">
            <h3 class="panel-title">GIT</h3>
        </div>
        

        <div class="list-group">
            
    
        <a href="../../git/git.html" class="list-group-item ">
        

            git 命令

        
        </a>
        

        </div>
    </div>
    
    <div class="panel panel-default">
        

        <div class="list-group">
            
    
        <a href="../../other/faq.html" class="list-group-item ">
        

            FAQ

        
        </a>
        

        <a href="../../other/examples.html" class="list-group-item ">
        

            Examples

        
        </a>
        

        </div>
    </div>
    

                    </div>
                    <div class="col-md-9">
                        
<div id="book-search-results">
    <div class="search-noresults">
    
                            
                            <div class="gb-markdown book-page-inner">
                                <h1 id="reactreact-native-&#x7684;es5-es6&#x5199;&#x6CD5;&#x5BF9;&#x7167;&#x8868;">React/React Native &#x7684;ES5 ES6&#x5199;&#x6CD5;&#x5BF9;&#x7167;&#x8868;</h1>
<h2 id="&#x6765;&#x6E90;&#xFF1A;">&#x6765;&#x6E90;&#xFF1A;<br></h2>
<blockquote>
<p><a href="https://babeljs.io/blog/2015/06/07/react-on-es6-plus" target="_blank">React on ES6+</a><br><a href="http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8" target="_blank">React/React Native &#x7684;ES5 ES6&#x5199;&#x6CD5;&#x5BF9;&#x7167;&#x8868;</a></p>
</blockquote>
<h2 id="class&#x5B9A;&#x4E49;&#x8BED;&#x6CD5;">class&#x5B9A;&#x4E49;&#x8BED;&#x6CD5;</h2>
<blockquote>
<p>&#x503C;&#x5F97;&#x6CE8;&#x610F;&#x7684;&#x662F;&#xFF0C;&#x6211;&#x4EEC;&#x5DF2;&#x7ECF;&#x5220;&#x9664;&#x4E86;&#x4E24;&#x4E2A;&#x62EC;&#x53F7;&#x548C;&#x4E00;&#x4E2A;&#x540E;&#x7F00;&#x5206;&#x53F7;&#xFF0C;&#x800C;&#x5BF9;&#x4E8E;&#x6BCF;&#x4E2A;&#x58F0;&#x660E;&#x7684;&#x65B9;&#x6CD5;&#xFF0C;&#x6211;&#x4EEC;&#x90FD;&#x7701;&#x7565;&#x4E86;&#x4E00;&#x4E2A;&#x5192;&#x53F7;&#xFF0C;&#x4E00;&#x4E2A;function&#x5173;&#x952E;&#x5B57;&#x548C;&#x4E00;&#x4E2A;&#x9017;&#x53F7;&#x3002;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Photo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
    render() {
        <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">{this.props.caption}</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{this.props.src}</span> /&gt;</span>
    }
}
// The ES5 way
var Photo = React.createClass({
    handleDoubleTap: function(e) { ... }
    render: function() { ... }
})
//ThE ES6 way
class Photo extends React.Component {
    handleDoubleTap(e) { ... }
    render() { ... }
}
</span></code></pre>
<h2 id="&#x751F;&#x547D;&#x5468;&#x671F;&#x65B9;&#x6CD5;">&#x751F;&#x547D;&#x5468;&#x671F;&#x65B9;&#x6CD5;</h2>
<blockquote>
<p>&#x6240;&#x6709;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x65B9;&#x6CD5;&#xFF0C;&#x4F46;&#x53EF;&#x4EE5;&#x5B9A;&#x4E49;&#x4E3A;&#x4F7F;&#x7528;&#x65B0;&#x7684;&#x7C7B;&#x8BED;&#x6CD5;&#x671F;&#x671B;&#x7684;&#x3002;&#x8BE5;&#x8BFE;&#x7A0B;constructor&#x73B0;&#x5728;&#x627F;&#x62C5;&#x4EE5;&#x524D;&#x586B;&#x5199;&#x7684;&#x89D2;&#x8272;componentWillMount&#xFF1A;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-comment">// es5</span>
<span class="hljs-keyword">var</span> EmbedModal = React.createClass({
    componentWillMount: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ ... }
})
<span class="hljs-comment">// es6</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">EmbedModal</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">createClass</span> (
    <span class="hljs-title">construtor</span>(<span class="hljs-title">props</span>) </span>{
        <span class="hljs-keyword">super</span>(props);
        <span class="hljs-comment">// Operations usually carried out in componentWillMount go here</span>
    }
)
</code></pre>
<h2 id="&#x5C5E;&#x6027;&#x521D;&#x59CB;&#x5316;">&#x5C5E;&#x6027;&#x521D;&#x59CB;&#x5316;</h2>
<blockquote>
<p>ES7&#x5C5E;&#x6027;&#x521D;&#x59CB;&#x5316;&#x5668;&#x5728;&#x7C7B;&#x7684;&#x6784;&#x9020;&#x51FD;&#x6570;&#x4E2D;&#x8FD0;&#x884C;&#xFF0C;&#x5176;&#x4E2D;this&#x6307;&#x7684;&#x662F;&#x6B63;&#x5728;&#x6784;&#x5EFA;&#x7684;&#x7C7B;&#x7684;&#x5B9E;&#x4F8B;&#xFF0C;&#x6240;&#x4EE5;&#x521D;&#x59CB;&#x72B6;&#x6001;&#x4ECD;&#x7136;&#x53EF;&#x4EE5;&#x4F9D;&#x8D56;&#x4E8E;this.props&#x3002;&#x503C;&#x5F97;&#x6CE8;&#x610F;&#x7684;&#x662F;&#xFF0C;&#x6211;&#x4EEC;&#x4E0D;&#x518D;&#x9700;&#x8981;&#x6839;&#x636E;&#x5438;&#x6C14;&#x529F;&#x80FD;&#x5B9A;&#x4E49;&#x9053;&#x5177;&#x9ED8;&#x8BA4;&#x503C;&#x548C;&#x521D;&#x59CB;&#x72B6;&#x6001;&#x5BF9;&#x8C61;&#x3002;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-comment">// es5 </span>
<span class="hljs-keyword">var</span> Video = React.createClass({
    getDefaultProps: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">return</span> {
            autoPlay: flase,
            maxLoops: <span class="hljs-number">10</span>,
        };
    },
    getInitalState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">return</span> {
            loopsRemaining: <span class="hljs-keyword">this</span>.props.maxloops,
        };
    },
    propsTypes: {
        autoPlay: React.PropsTypes.bool.isRequired,
        maxloops: React.PropsTypes.number.isRequired,
        posterFrameSrc: React.PropsTypes.string.isRequired,
        videoSrc: React.PropsTypes.string.isRequired
    },
});
<span class="hljs-comment">// es6</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Video</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
    <span class="hljs-keyword">static</span> defaultProps = {
        autoPlay: <span class="hljs-literal">false</span>,
        maxloops: <span class="hljs-number">10</span>
    }
    <span class="hljs-keyword">static</span> propsTypes = {
        autoPlay: React.PropsTypes.bool.isRequired,
        maxloops: React.propsTypes.number.isRequired,
        posterFrameSrc: React.PropsTypes.string.isRequired,
        videoSrc: React.PropsTypes.string.isRequired
    }
    state = {
        loopsRemaining: <span class="hljs-keyword">this</span>.props.maxloops,
    }
}
</code></pre>
<h2 id="&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x8BF4;&#x660E;">&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x8BF4;&#x660E;</h2>
<blockquote>
<p>&#x8BE5;React.createClass&#x65B9;&#x6CD5;&#x7528;&#x4E8E;&#x5BF9;&#x7EC4;&#x4EF6;&#x7684;&#x5B9E;&#x4F8B;&#x65B9;&#x6CD5;&#x6267;&#x884C;&#x4E00;&#x4E9B;&#x989D;&#x5916;&#x7684;&#x7ED1;&#x5B9A;&#x5DE5;&#x4F5C;&#xFF0C;&#x4EE5;&#x786E;&#x4FDD;&#x5176;&#x4E2D;&#x7684;this&#x5173;&#x952E;&#x5B57;&#x5C06;&#x5F15;&#x7528;&#x8BE5;&#x7EC4;&#x4EF6;&#x7684;&#x5B9E;&#x4F8B;&#x3002;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-comment">// &#x81EA;&#x52A8;&#x7ED1;&#x5B9A;React.createClass</span>
<span class="hljs-keyword">var</span> PostInfo = React.createClass({
    handleOptionsButtonClick: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
        <span class="hljs-comment">// &#x8FD9;&#x91CC;&#xFF0C;&apos;this&apos; &#x662F;&#x6307;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x3002;</span>
        <span class="hljs-keyword">this</span>.setState({showOptionModal: <span class="hljs-literal">true</span>});
    },
});
</code></pre>
<blockquote>
<p>&#x7531;&#x4E8E;&#x6211;&#x4EEC;React.createClass&#x5728;&#x4F7F;&#x7528;ES6 +&#x7C7B;&#x8BED;&#x6CD5;&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;&#x65F6;&#x4E0D;&#x6D89;&#x53CA;&#x8BE5;&#x65B9;&#x6CD5;&#xFF0C;&#x6240;&#x4EE5;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x624B;&#x52A8;&#x7ED1;&#x5B9A;&#x5B9E;&#x4F8B;&#x65B9;&#x6CD5;&#xFF0C;&#x65E0;&#x8BBA;&#x6211;&#x4EEC;&#x60F3;&#x8981;&#x8FD9;&#x79CD;&#x884C;&#x4E3A;&#xFF1A;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-comment">// &#x624B;&#x52A8;&#x7ED1;&#x5B9A;&#xFF0C;&#x65E0;&#x8BBA;&#x4F60;&#x662F;&#x5426;&#x9700;&#x8981;</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PostInfo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
    construtor(props) {
        <span class="hljs-keyword">super</span>(props);
        <span class="hljs-comment">// &#x624B;&#x52A8;&#x5C06;&#x6B64;&#x65B9;&#x6CD5;&#x7ED1;&#x5B9A;&#x5230;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x4E2D;&#x2026;</span>
        <span class="hljs-keyword">this</span>.handleOptionsButtonClick = <span class="hljs-keyword">this</span>.handleOptionsButtonClick.bind(<span class="hljs-keyword">this</span>);
    }
    handleOptionsButtonClick(e) {
        <span class="hljs-comment">// &#x2026;&#x4E3A;&#x4E86;&#x786E;&#x4FDD;&apos;this&apos;&#x6307;&#x7684;&#x662F;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x3002;</span>
        <span class="hljs-keyword">this</span>.setState({showOptionsModal: <span class="hljs-literal">true</span>});
    }
}
</code></pre>
<blockquote>
<p>&#x5E78;&#x8FD0;&#x7684;&#x662F;&#xFF0C;&#x901A;&#x8FC7;&#x7EC4;&#x5408;&#x4E24;&#x4E2A;ES6 +&#x529F;&#x80FD; - &#x7BAD;&#x5934;&#x51FD;&#x6570;&#x548C;&#x5C5E;&#x6027;&#x521D;&#x59CB;&#x503C;&#x8BBE;&#x7F6E; - &#x9009;&#x62E9;&#x52A0;&#x5165;&#x5230;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x7684;&#x7ED1;&#x5B9A;&#x53D8;&#x5F97;&#x8F7B;&#x800C;&#x6613;&#x4E3E;&#xFF1A;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PostInfo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
    handleOptionsButtonClick = (e) =&gt; {
        <span class="hljs-keyword">this</span>.setState({showOptionsModal: <span class="hljs-literal">true</span>});
    }
}
</code></pre>
<blockquote>
<p>ES6&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x7684;&#x4E3B;&#x4F53;&#x5177;&#x6709;&#x4E0E;&#x5B83;&#x4EEC;&#x5468;&#x56F4;this&#x7684;&#x4EE3;&#x7801;&#x76F8;&#x540C;&#x7684;&#x8BCD;&#x6C47;&#xFF0C;&#x8FD9;&#x4F7F;&#x5F97;&#x6211;&#x4EEC;&#x83B7;&#x5F97;&#x4E86;&#x671F;&#x671B;&#x7684;&#x7ED3;&#x679C;&#xFF0C;&#x56E0;&#x4E3A;ES7&#x5C5E;&#x6027;&#x521D;&#x59CB;&#x5316;&#x5668;&#x7684;&#x4F5C;&#x7528;&#x57DF;&#x7684;&#x65B9;&#x5F0F;&#x3002;&#x5728;&#x7F69;&#x4E0B;&#x770B;&#xFF0C;&#x770B;&#x770B;&#x4E3A;&#x4EC0;&#x4E48;&#x8FD9;&#x4E2A;&#x5DE5;&#x4F5C;&#x3002;</p>
</blockquote>
<h2 id="&#x52A8;&#x6001;&#x5C5E;&#x6027;&#x540D;&#x79F0;&#x548C;&#x6A21;&#x677F;&#x5B57;&#x7B26;&#x4E32;">&#x52A8;&#x6001;&#x5C5E;&#x6027;&#x540D;&#x79F0;&#x548C;&#x6A21;&#x677F;&#x5B57;&#x7B26;&#x4E32;</h2>
<blockquote>
<p>&#x5176;&#x4E2D;&#x7684;&#x589E;&#x5F3A;&#x5BF9;&#x8C61;&#x6587;&#x672C;&#x5305;&#x62EC;&#x5206;&#x914D;&#x7ED9;&#x6D3E;&#x751F;&#x5C5E;&#x6027;&#x540D;&#x79F0;&#x7684;&#x80FD;&#x529B;&#x3002;&#x6211;&#x4EEC;&#x539F;&#x672C;&#x53EF;&#x4EE5;&#x505A;&#x8FD9;&#x6837;&#x7684;&#x4E8B;&#x60C5;&#x6765;&#x8BBE;&#x5B9A;&#x4E00;&#x4E2A;&#x72B6;&#x6001;&#xFF1A;
```js
var From = React.createClass({
    onChange: function(inputName, e) {
        var stateToSet = {};
        stateToSet[inputName + &apos;Value&apos;] = e.targe.value;
        this.setState(stateToset);
    },
});
// &#x73B0;&#x5728;&#xFF0C;&#x6211;&#x4EEC;&#x6709;&#x80FD;&#x529B;&#x6784;&#x5EFA;&#x5728;&#x8FD0;&#x884C;&#x65F6;&#x7531;JavaScript&#x8868;&#x8FBE;&#x5F0F;&#x51B3;&#x5B9A;&#x5176;&#x5C5E;&#x6027;&#x540D;&#x79F0;&#x7684;&#x5BF9;&#x8C61;&#x3002;&#x5728;&#x8FD9;&#x91CC;&#xFF0C;&#x6211;&#x4EEC;&#x4F7F;&#x7528;&#x6A21;&#x677F;&#x5B57;&#x7B26;&#x4E32;&#x6765;&#x786E;&#x5B9A;&#x8981;&#x8BBE;&#x7F6E;&#x7684;&#x5C5E;&#x6027;&#xFF1A;
class From extends React.Component {
    onChange(inpuntName, e){
        this.setState({</p>
</blockquote>
<pre><code>        [`$(inputName)value`]: e.targe.value,
    });
}
</code></pre><p>}</p>
<pre><code>
## &#x89E3;&#x6784;&#x548C;&#x4F20;&#x64AD;&#x5C5E;&#x6027;
&gt;&#x901A;&#x5E38;&#x5728;&#x7EC4;&#x6210;&#x7EC4;&#x4EF6;&#x65F6;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x80FD;&#x5E0C;&#x671B;&#x5C06;&#x5927;&#x90E8;&#x5206;&#x7236;&#x7EC4;&#x4EF6;&#x7684;&#x9053;&#x5177;&#x4F20;&#x9012;&#x7ED9;&#x5B50;&#x7EC4;&#x4EF6;&#xFF0C;&#x4F46;&#x5E76;&#x4E0D;&#x662F;&#x5168;&#x90E8;&#x3002;&#x5C06;ES6 + &#x89E3;&#x6784;&#x4E0E;JSX &#x4F20;&#x64AD;&#x5C5E;&#x6027;&#x76F8;&#x7ED3;&#x5408;&#xFF0C;&#x65E0;&#x9700;&#x4EEA;&#x5F0F;&#x5373;&#x53EF;&#x5B9E;&#x73B0;&#xFF1A;

```js
class AutoloadingPostsGrid extends React.Component {
    render() {
        const {
            className,
            ...others // &#x5305;&#x542B;&#x6240;&#x6709;&#x7279;&#x6027;this.props&#x9664;&#x4E86;&#x7C7B;&#x540D;
        } = this.props;
        return (
            &lt;div className={className}&gt;
                &lt;PostsGrid {...others} /&gt;
                &lt;button onClick={this.handleLoadMoreClick}&gt;Load more&lt;/button&gt;
            &lt;/div&gt;
        );
    }
}
// &#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x5C06;JSX&#x4F20;&#x64AD;&#x5C5E;&#x6027;&#x4E0E;&#x5E38;&#x89C4;&#x5C5E;&#x6027;&#x7ED3;&#x5408;&#x8D77;&#x6765;&#xFF0C;&#x5229;&#x7528;&#x7B80;&#x5355;&#x7684;&#x4F18;&#x5148;&#x7EA7;&#x89C4;&#x5219;&#x6765;&#x5B9E;&#x73B0;&#x8986;&#x76D6;&#x548C;&#x9ED8;&#x8BA4;&#x503C;&#x3002;&#x8BE5;&#x5143;&#x7D20;&#x5C06;&#x83B7;&#x5F97;className&#x201C;&#x8986;&#x76D6;&#x201D;&#xFF0C;&#x5373;&#x4F7F;&#x5B58;&#x5728;&#x4E00;&#x4E2A;className&#x8D22;&#x4EA7;this.props&#xFF1A;
&lt;div {...this.props} className=&quot;override&quot;&gt;
    ...
&lt;/div&gt;
// This element will regularly have the &#x201C;base&#x201D; unless there exists a property in to override it:
&lt;div className=&quot;base&quot; {...this.props}&gt;
  ...
&lt;/div&gt;
</code></pre><h2 id="&#x6A21;&#x5757;">&#x6A21;&#x5757;</h2>
<pre><code class="lang-javascript"><span class="hljs-comment">// &#x5F15;&#x7528;</span>
<span class="hljs-comment">// es5</span>
<span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;react&quot;</span>);
<span class="hljs-keyword">var</span> {
    Component,
    PropsTypes
} = React; <span class="hljs-comment">//&#x5F15;&#x7528;react&#x62BD;&#x8C61;&#x7EC4;&#x4EF6;</span>

<span class="hljs-keyword">var</span> ReactNative = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;react-native&quot;</span>);
<span class="hljs-keyword">var</span> {
    Image,
    Text,
} = ReactNative; <span class="hljs-comment">// &#x5F15;&#x7528;&#x5177;&#x4F53;&#x7684;React Native&#x7EC4;&#x4EF6;</span>

<span class="hljs-comment">// es6 import&#x5199;&#x6CD5;&#x66F4;&#x4E3A;&#x6807;&#x51C6;</span>
<span class="hljs-keyword">import</span> React, {
    Component,
    PropsTypes,
} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {
    imange&#xFF0C;
    Text,
} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-native&apos;</span>
</code></pre>
<h2 id="&#x5BFC;&#x51FA;&#x5355;&#x4E2A;&#x7C7B;">&#x5BFC;&#x51FA;&#x5355;&#x4E2A;&#x7C7B;</h2>
<blockquote>
<p>&#x5728;ES5&#x91CC;&#xFF0C;&#x8981;&#x5BFC;&#x51FA;&#x4E00;&#x4E2A;&#x7C7B;&#x7ED9;&#x522B;&#x7684;&#x6A21;&#x5757;&#x7528;&#xFF0C;&#x4E00;&#x822C;&#x901A;&#x8FC7;module.exports&#x6765;&#x5BFC;&#x51FA;</p>
</blockquote>
<pre><code>// es5
var MyComponent = React.createClass({
     // &#x51FD;&#x6570;
})
// es6
export default class MyComponent extends Component{
    // &#x51FD;&#x6570;
}
// &#x5F15;&#x7528; class
// es5 
var MyComponent = require((&apos;./MyComponent&apos;));
// es6
import MyComponent from &apos;./MyComponent&apos;;
</code></pre><h2 id="&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;">&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;</h2>
<blockquote>
<p>es5  &#x5728;ES5&#x91CC;&#xFF0C;&#x901A;&#x5E38;&#x901A;&#x8FC7;React.createClass&#x6765;&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x7C7B;&#xFF0C;&#x50CF;&#x8FD9;&#x6837;&#xFF1A;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> Photo = React.createClass({
    render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Image</span> <span class="hljs-attr">source</span>=<span class="hljs-string">{this.props.source}</span> /&gt;</span>
        )
    }
})
</span></code></pre>
<blockquote>
<p>&#x5728;ES6&#x91CC;&#xFF0C;&#x6211;&#x4EEC;&#x901A;&#x8FC7;&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x7EE7;&#x627F;&#x81EA;React.Component&#x7684;class&#x6765;&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x7C7B;&#xFF0C;&#x50CF;&#x8FD9;&#x6837;&#xFF1A;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Photo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Image</span> <span class="hljs-attr">source</span>=<span class="hljs-string">{this.props.source}</span> /&gt;</span>
        );
    }
}
</span></code></pre>
<h2 id="&#x7ED9;&#x7EC4;&#x4EF6;&#x5B9A;&#x4E49;&#x65B9;&#x6CD5;">&#x7ED9;&#x7EC4;&#x4EF6;&#x5B9A;&#x4E49;&#x65B9;&#x6CD5;</h2>
<blockquote>
<p>&#x7ED9;&#x7EC4;&#x4EF6;&#x5B9A;&#x4E49;&#x65B9;&#x6CD5;&#x4E0D;&#x518D;&#x7528; &#x540D;&#x5B57;: function()&#x7684;&#x5199;&#x6CD5;&#xFF0C;&#x800C;&#x662F;&#x76F4;&#x63A5;&#x7528;&#x540D;&#x5B57;()&#xFF0C;&#x5728;&#x65B9;&#x6CD5;&#x7684;&#x6700;&#x540E;&#x4E5F;&#x4E0D;&#x80FD;&#x6709;&#x9017;&#x53F7;&#x4E86;&#x3002;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-comment">// es5</span>
<span class="hljs-keyword">var</span> Photo = React.createClass({
    componentWillMount: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-comment">// &#x51FD;&#x6570;</span>
    },
    render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">return</span> (
            &lt;Image source={this.props.source} /&gt;
        );
    },
});

// es6 
class Photo extends React.Component {
    componentWillMount() {
        // &#x51FD;&#x6570;
    },
    render() {
        return (
            &lt;Image source={this.props.source} /&gt;
        );
    }
}
</code></pre>
<h2 id="&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;&#x7684;&#x5C5E;&#x6027;&#x7C7B;&#x578B;&#x548C;&#x9ED8;&#x8BA4;&#x5C5E;&#x6027;">&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;&#x7684;&#x5C5E;&#x6027;&#x7C7B;&#x578B;&#x548C;&#x9ED8;&#x8BA4;&#x5C5E;&#x6027;</h2>
<blockquote>
<p>&#x5728;ES5&#x91CC;&#xFF0C;&#x5C5E;&#x6027;&#x7C7B;&#x578B;&#x548C;&#x9ED8;&#x8BA4;&#x5C5E;&#x6027;&#x5206;&#x522B;&#x901A;&#x8FC7;propTypes&#x6210;&#x5458;&#x548C;getDefaultProps&#x65B9;&#x6CD5;&#x6765;&#x5B9E;&#x73B0;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-comment">// es5</span>
<span class="hljs-keyword">var</span> video = React.createClass({
    getDefaultProps: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">return</span> {
            autoPlay: <span class="hljs-literal">false</span>,
            maxloops: <span class="hljs-number">10</span>,
        };
    },
    PropsTypes: {
        autoPlay: React.PropsTypes.bool.isRequired,
        maxloops: React.PropsTypes.number.isRequired,
        posterFrameSrc: React.PropsTypes.string.isRequired,
        videoSrc: React.PropsTypes.string.isRequired,
    },
    render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">return</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
            &lt;View /&gt;
        };
    }
})
</code></pre>
<blockquote>
<p>&#x5728;ES6&#x91CC;&#xFF0C;&#x53EF;&#x4EE5;&#x7EDF;&#x4E00;&#x4F7F;&#x7528;static&#x6210;&#x5458;&#x6765;&#x5B9E;&#x73B0;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-comment">//es6</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Video</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
    <span class="hljs-keyword">static</span> defaultProps = {
        autoPlay: flase,
        maxloops: <span class="hljs-number">10</span>,
    }; <span class="hljs-comment">// &#x6CE8;&#x610F;&#x8FD9;&#x91CC;&#x6709;&#x5206;&#x53F7;</span>
    <span class="hljs-keyword">static</span> propsTypes = {
        autoPlay: React.PropsTypes.bool.isRequired,
        maxloops: React.PropsTypes.number.isRequired,
        posterFrameSrc: React.PropsTypes.string.isRequired,
        videoSrc: React.PropsTypes.string.isRequired,
    }; <span class="hljs-comment">// &#x6CE8;&#x610F;&#x8FD9;&#x91CC;&#x6709;&#x5206;&#x53F7;</span>
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> /&gt;</span>
        )
    }
}
</span></code></pre>
<blockquote>
<p>&#x4E5F;&#x6709;&#x4EBA;&#x8FD9;&#x4E48;&#x5199;&#xFF0C;&#x867D;&#x7136;&#x4E0D;&#x63A8;&#x8350;&#xFF0C;&#x4F46;&#x8BFB;&#x5230;&#x4EE3;&#x7801;&#x7684;&#x65F6;&#x5019;&#x4F60;&#x5E94;&#x5F53;&#x80FD;&#x660E;&#x767D;&#x5B83;&#x7684;&#x610F;&#x601D;&#xFF1A;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-comment">//es6</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Videlo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Video</span> /&gt;</span>
        );
    }
}
Video.defauleftProps = {
    autoPlay: false,
    maxloops: 10,
};
Video.propsTypes = {
    autoPlay: React.PropsTypes.bool.isRequired,
    maxloops: React.PropsTypes.number.isRequired,
    posterFrameSrc: React.PropsTypes.string.isRequired,
    videoSrc: React.PropsTypes.string.isRequired,
}
// &#x6CE8;&#x610F;: &#x5BF9;React&#x5F00;&#x53D1;&#x8005;&#x800C;&#x8A00;&#xFF0C;static&#x6210;&#x5458;&#x5728;IE10&#x53CA;&#x4E4B;&#x524D;&#x7248;&#x672C;&#x4E0D;&#x80FD;&#x88AB;&#x7EE7;&#x627F;&#xFF0C;&#x800C;&#x5728;IE11&#x548C;&#x5176;&#x5B83;&#x6D4F;&#x89C8;&#x5668;&#x4E0A;&#x53EF;&#x4EE5;&#xFF0C;&#x8FD9;&#x6709;&#x65F6;&#x5019;&#x4F1A;&#x5E26;&#x6765;&#x4E00;&#x4E9B;&#x95EE;&#x9898;&#x3002;React Native&#x5F00;&#x53D1;&#x8005;&#x53EF;&#x4EE5;&#x4E0D;&#x7528;&#x62C5;&#x5FC3;&#x8FD9;&#x4E2A;&#x95EE;&#x9898;&#x3002;
</span></code></pre>
<h2 id="&#x521D;&#x59CB;&#x5316;state">&#x521D;&#x59CB;&#x5316;STATE</h2>
<pre><code class="lang-javascript"><span class="hljs-comment">// es5</span>
<span class="hljs-keyword">var</span> video = React.createClass({
    getInitalState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">return</span> {
            loopsRemaining: <span class="hljs-keyword">this</span>.props.maxloops,
        };
    }
    })
<span class="hljs-comment">// ES6&#x4E0B;&#xFF0C;&#x6709;&#x4E24;&#x79CD;&#x5199;&#x6CD5;&#xFF1A;</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Video</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
    state = {
        loopsRemaining: <span class="hljs-keyword">this</span>.props.maxloops,
    }
}
<span class="hljs-comment">// &#x4E0D;&#x8FC7;&#x6211;&#x4EEC;&#x63A8;&#x8350;&#x66F4;&#x6613;&#x7406;&#x89E3;&#x7684;&#x5728;&#x6784;&#x9020;&#x51FD;&#x6570;&#x4E2D;&#x521D;&#x59CB;&#x5316;&#xFF08;&#x8FD9;&#x6837;&#x4F60;&#x8FD8;&#x53EF;&#x4EE5;&#x6839;&#x636E;&#x9700;&#x8981;&#x505A;&#x4E00;&#x4E9B;&#x8BA1;&#x7B97;&#xFF09;&#xFF1A;</span>
<span class="hljs-comment">// es6</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Video</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
    construtor(props){
        <span class="hljs-keyword">super</span>(props);
        <span class="hljs-keyword">this</span>.state = {
            loopsRemaining: <span class="hljs-keyword">this</span>.props.maxloops,
        }
    }
}
</code></pre>
<h2 id="&#x628A;&#x65B9;&#x6CD5;&#x4F5C;&#x4E3A;&#x56DE;&#x8C03;&#x63D0;&#x4F9B;">&#x628A;&#x65B9;&#x6CD5;&#x4F5C;&#x4E3A;&#x56DE;&#x8C03;&#x63D0;&#x4F9B;</h2>
<blockquote>
<p>&#x5F88;&#x591A;&#x4E60;&#x60EF;&#x4E8E;ES6&#x7684;&#x7528;&#x6237;&#x53CD;&#x800C;&#x4E0D;&#x7406;&#x89E3;&#x5728;ES5&#x4E0B;&#x53EF;&#x4EE5;&#x8FD9;&#x4E48;&#x505A;&#xFF1A;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> PostInfo = React.createClass({
    handleOptionsButtonClick: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
        <span class="hljs-comment">// Here,&apos;this&apos; refers to the component instance</span>
        <span class="hljs-keyword">this</span>.setState({showOptionModel: <span class="hljs-literal">true</span>});
    },
    render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">TouchableHighlight</span> <span class="hljs-attr">onPress</span>=<span class="hljs-string">{this.handleOptionsButtonClick}</span> &gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>{this.props.label}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">TouchableHighlight</span>&gt;</span></span>
        )
    },
});
</code></pre>
<blockquote>
<p>&#x5728;ES5&#x4E0B;&#xFF0C;React.createClass&#x4F1A;&#x628A;&#x6240;&#x6709;&#x7684;&#x65B9;&#x6CD5;&#x90FD;bind&#x4E00;&#x904D;&#xFF0C;&#x8FD9;&#x6837;&#x53EF;&#x4EE5;&#x63D0;&#x4EA4;&#x5230;&#x4EFB;&#x610F;&#x7684;&#x5730;&#x65B9;&#x4F5C;&#x4E3A;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#xFF0C;&#x800C;this&#x4E0D;&#x4F1A;&#x53D8;&#x5316;&#x3002;&#x4F46;&#x5B98;&#x65B9;&#x73B0;&#x5728;&#x9010;&#x6B65;&#x8BA4;&#x4E3A;&#x8FD9;&#x53CD;&#x800C;&#x662F;&#x4E0D;&#x6807;&#x51C6;&#x3001;&#x4E0D;&#x6613;&#x7406;&#x89E3;&#x7684;&#x3002;</p>
</blockquote>
<p>&#x5728;ES6&#x4E0B;&#xFF0C;&#x4F60;&#x9700;&#x8981;&#x901A;&#x8FC7;bind&#x6765;&#x7ED1;&#x5B9A;this&#x5F15;&#x7528;&#xFF0C;&#x6216;&#x8005;&#x4F7F;&#x7528;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#xFF08;&#x5B83;&#x4F1A;&#x7ED1;&#x5B9A;&#x5F53;&#x524D;scope&#x7684;this&#x5F15;&#x7528;&#xFF09;&#x6765;&#x8C03;&#x7528;</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// es6</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PostInfo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span>
</span>{
    handleOptionsButtonClick(e){
        <span class="hljs-keyword">this</span>.setState({showOptionsModal: <span class="hljs-literal">true</span>});
    }
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">TouchableHighlight</span>
                <span class="hljs-attr">onpress</span>=<span class="hljs-string">{this.handleOptionsButtonClick.bind(this)}</span>
                <span class="hljs-attr">onpress</span>=<span class="hljs-string">{e=</span>&gt;</span>this.handleOptionsButtonClick(e)}
                &gt;
                <span class="hljs-tag">&lt;<span class="hljs-name">Text</span>&gt;</span>{this.props.label}<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">TouchableHighlight</span>&gt;</span></span>
        )
    },
}
</code></pre>
<h2 id="&#x7BAD;&#x5934;&#x51FD;&#x6570;">&#x7BAD;&#x5934;&#x51FD;&#x6570;</h2>
<blockquote>
<p>&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x5B9E;&#x9645;&#x4E0A;&#x662F;&#x5728;&#x8FD9;&#x91CC;&#x5B9A;&#x4E49;&#x4E86;&#x4E00;&#x4E2A;&#x4E34;&#x65F6;&#x7684;&#x51FD;&#x6570;&#xFF0C;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x7684;&#x7BAD;&#x5934;=&gt;&#x4E4B;&#x524D;&#x662F;&#x4E00;&#x4E2A;&#x7A7A;&#x62EC;&#x53F7;&#x3001;&#x5355;&#x4E2A;&#x7684;&#x53C2;&#x6570;&#x540D;&#x3001;&#x6216;&#x7528;&#x62EC;&#x53F7;&#x62EC;&#x8D77;&#x7684;&#x591A;&#x4E2A;&#x53C2;&#x6570;&#x540D;&#xFF0C;&#x800C;&#x7BAD;&#x5934;&#x4E4B;&#x540E;&#x53EF;&#x4EE5;&#x662F;&#x4E00;&#x4E2A;&#x8868;&#x8FBE;&#x5F0F;&#xFF08;&#x4F5C;&#x4E3A;&#x51FD;&#x6570;&#x7684;&#x8FD4;&#x56DE;&#x503C;&#xFF09;&#xFF0C;&#x6216;&#x8005;&#x662F;&#x7528;&#x82B1;&#x62EC;&#x53F7;&#x62EC;&#x8D77;&#x7684;&#x51FD;&#x6570;&#x4F53;&#xFF08;&#x9700;&#x8981;&#x81EA;&#x884C;&#x901A;&#x8FC7;return&#x6765;&#x8FD4;&#x56DE;&#x503C;&#xFF0C;&#x5426;&#x5219;&#x8FD4;&#x56DE;&#x7684;&#x662F;undefined&#xFF09;&#x3002;</p>
</blockquote>
<pre><code class="lang-javascript"><span class="hljs-comment">// &#x7BAD;&#x5934;&#x51FD;&#x6570;&#x5B9E;&#x4F8B;</span>
()=&gt;<span class="hljs-number">1</span>
v=&gt;v+<span class="hljs-number">1</span>
(a,b)=&gt;a+b
()=&gt;{
    alert(<span class="hljs-string">&apos;foo&apos;</span>);
}
e=&gt;{
    <span class="hljs-keyword">if</span> (e == <span class="hljs-number">0</span>){
        <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
    }
    <span class="hljs-keyword">return</span> <span class="hljs-number">1000</span>/e;
}
</code></pre>
<blockquote>
<p>&#x9700;&#x8981;&#x6CE8;&#x610F;&#x7684;&#x662F;&#xFF0C;&#x4E0D;&#x8BBA;&#x662F;bind&#x8FD8;&#x662F;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#xFF0C;&#x6BCF;&#x6B21;&#x88AB;&#x6267;&#x884C;&#x90FD;&#x8FD4;&#x56DE;&#x7684;&#x662F;&#x4E00;&#x4E2A;&#x65B0;&#x7684;&#x51FD;&#x6570;&#x5F15;&#x7528;&#xFF0C;&#x56E0;&#x6B64;&#x5982;&#x679C;&#x4F60;&#x8FD8;&#x9700;&#x8981;&#x51FD;&#x6570;&#x7684;&#x5F15;&#x7528;&#x53BB;&#x505A;&#x4E00;&#x4E9B;&#x522B;&#x7684;&#x4E8B;&#x60C5;&#xFF08;&#x8B6C;&#x5982;&#x5378;&#x8F7D;&#x76D1;&#x542C;&#x5668;&#xFF09;&#xFF0C;&#x90A3;&#x4E48;&#x4F60;&#x5FC5;&#x987B;&#x81EA;&#x5DF1;&#x4FDD;&#x5B58;&#x8FD9;&#x4E2A;&#x5F15;&#x7528;</p>
</blockquote>
<pre><code>// &#x9519;&#x8BEF;&#x7684;&#x505A;&#x6CD5;
class PaussMenu extends React.Component{
    componentWillMount() {
        AppStateIOS.addEventListener(&apos;change&apos;, this.onAppPaused.bind(this));
    }
    componentDidUnmount() {
        AppStateIOS.removeEventListener(&apos;change&apos;, this.onAppPaused.buid(this));
    }
    onAppPaused(event){

    }
}

// &#x6B63;&#x786E;&#x7684;&#x505A;&#x6CD5;
class PaussMenu extends React.Component{
    construtor(props) {
        super(props);
        this._OnAppPaused = this.onAppPaused.bind(this);
    }
    componentWillMount() {
        AppStateIOS.addEventListener(&apos;change&apos;, this._OnAppPaused);
    }
    componentDidUnmount() {
        AppStateIOS.removeEventListener(&apos;change&apos;, this_onAppPaused);
    }
    onAppPaused(event) {

    }
}
// &#x4ECE;&#x8FD9;&#x4E2A;&#x5E16;&#x5B50;[&#x8FD9;&#x4E2A;&#x5E16;&#x5B50;](http://www.tuicool.com/articles/Rj6RFnm)&#x4E2D;&#x6211;&#x4EEC;&#x8FD8;&#x5B66;&#x4E60;&#x5230;&#x4E00;&#x79CD;&#x65B0;&#x7684;&#x505A;&#x6CD5;&#xFF1A;
// &#x6B63;&#x786E;&#x7684;&#x505A;&#x6CD5;
class PaussMenu extends React.createClass{
    componentWillMount() {
        AppStateIOS.addEventListener(&apos;change&apos;, this.onAppPaused);
    }
    componentDidUnmount() {
        AppStateIOS.removeEventListener(&apos;change&apos;, this.onAppPaused);
    }
    onAppPaused = (event) =&gt; {
        // &#x628A;&#x65B9;&#x6CD5;&#x76F4;&#x63A5;&#x4F5C;&#x4E3A;&#x4E00;&#x4E2A;arrow function&#x7684;&#x5C5E;&#x6027;&#x6765;&#x5B9A;&#x4E49;&#xFF0C;&#x521D;&#x59CB;&#x5316;&#x7684;&#x65F6;&#x5019;&#x5C31;&#x7ED1;&#x5B9A;&#x597D;&#x4E86;this&#x7684;&#x6307;&#x9488;
    }
}
</code></pre><h2 id="mixins">Mixins</h2>
<blockquote>
<p>&#x5728;ES5&#x4E0B;&#xFF0C;&#x6211;&#x4EEC;&#x7ECF;&#x5E38;&#x4F7F;&#x7528;minxin&#x6765;&#x4E3A;&#x6211;&#x4EEC;&#x7684;&#x7C7B;&#x6DFB;&#x52A0;&#x4E00;&#x4E9B;&#x65B0;&#x7684;&#x65B9;&#x6CD5;&#xFF0C;&#x8B6C;&#x5982;PureRenderMinxin
```
var PurRenderMixin = require(&apos;react-addins-pure-render-minxin&apos;);
React.createClass({
    mixin: [PurRenderMixin],</p>
</blockquote>
<pre><code>render: function() {
    return &lt;div className={this.props.className}&gt;foo&lt;/div&gt;;
}
</code></pre><p>})</p>
<pre><code>
&gt; &#x7136;&#x800C;&#x73B0;&#x5728;&#x5B98;&#x65B9;&#x5DF2;&#x7ECF;&#x4E0D;&#x518D;&#x6253;&#x7B97;&#x5728;ES6&#x91CC;&#x7EE7;&#x7EED;&#x63A8;&#x884C;Mixin&#xFF0C;&#x4ED6;&#x4EEC;&#x8BF4;&#xFF1A;Mixins Are Dead. Long Live Composition&#x3002;&lt;br/&gt;
&#x5C3D;&#x7BA1;&#x5982;&#x679C;&#x8981;&#x7EE7;&#x7EED;&#x4F7F;&#x7528;mixin&#xFF0C;&#x8FD8;&#x662F;&#x6709;&#x4E00;&#x4E9B;&#x7B2C;&#x4E09;&#x65B9;&#x7684;&#x65B9;&#x6848;&#x53EF;&#x4EE5;&#x7528;&#xFF0C;&#x8B6C;&#x5982;&#x8FD9;&#x4E2A;&#x65B9;&#x6848;&lt;br&gt;
&#x4E0D;&#x8FC7;&#x5B98;&#x65B9;&#x63A8;&#x8350;&#xFF0C;&#x5BF9;&#x4E8E;&#x5E93;&#x7F16;&#x5199;&#x8005;&#x800C;&#x8A00;&#xFF0C;&#x5E94;&#x5F53;&#x5C3D;&#x5FEB;&#x653E;&#x5F03;Mixin&#x7684;&#x7F16;&#x5199;&#x65B9;&#x5F0F;&#xFF0C;&#x6587;&#x4E2D;&#x63D0;&#x5230;Sebastian Markb&#xE5;ge&#x7684;&#x4E00;&#x6BB5;&#x4EE3;&#x7801;&#x63A8;&#x8350;&#x4E86;&#x4E00;&#x79CD;&#x65B0;&#x7684;&#x7F16;&#x7801;&#x65B9;&#x5F0F;&#xFF1A;
</code></pre><p>//Enhance.js
import { Component } from &apos;React&apos;</p>
<p>extends var Enhance = ComposedComponent =&gt; class extends Component {
    construtor() {
        this.state = {dtaa:null}
    }
    componentDidUnmount() {
        this.setState({ data: &apos;Hello&apos; });
    }
    render() {
        renturn <composedcomponent {...this.props}="" data="{this.state.data}">
    }
}</composedcomponent></p>
<p>// HigherOrderComponent.js
import { Enhance } from &quot;./Enhance&quot;;</p>
<p>class MyComponent {
    render() {
        if (!this.data) return <div>Waiting...</div>;
        return <div>{this.data}</div>;
    }
}</p>
<p>export defaule Enhance(MyComponent); // Enhance component
//&#x7528;&#x4E00;&#x4E2A;&#x201C;&#x589E;&#x5F3A;&#x51FD;&#x6570;&#x201D;&#xFF0C;&#x6765;&#x67D0;&#x4E2A;&#x7C7B;&#x589E;&#x52A0;&#x4E00;&#x4E9B;&#x65B9;&#x6CD5;&#xFF0C;&#x5E76;&#x4E14;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x65B0;&#x7C7B;&#xFF0C;&#x8FD9;&#x65E0;&#x7591;&#x80FD;&#x5B9E;&#x73B0;mixin&#x6240;&#x5B9E;&#x73B0;&#x7684;&#x5927;&#x90E8;&#x5206;&#x9700;&#x6C42;&#x3002;</p>
<pre><code>
## ES6+&#x5E26;&#x6765;&#x7684;&#x5176;&#x5B83;&#x597D;&#x5904;
### &#x89E3;&#x6784;&amp;&#x5C5E;&#x6027;&#x5EF6;&#x5C55;
&gt; &#x7ED3;&#x5408;&#x4F7F;&#x7528;ES6+&#x7684;&#x89E3;&#x6784;&#x548C;&#x5C5E;&#x6027;&#x5EF6;&#x5C55;&#xFF0C;&#x6211;&#x4EEC;&#x7ED9;&#x5B69;&#x5B50;&#x4F20;&#x9012;&#x4E00;&#x6279;&#x5C5E;&#x6027;&#x66F4;&#x4E3A;&#x65B9;&#x4FBF;&#x4E86;&#x3002;&#x8FD9;&#x4E2A;&#x4F8B;&#x5B50;&#x628A;className&#x4EE5;&#x5916;&#x7684;&#x6240;&#x6709;&#x5C5E;&#x6027;&#x4F20;&#x9012;&#x7ED9;div&#x6807;&#x7B7E;&#xFF1A;
</code></pre><p>class AutoloadingPostsGrid extends React.Component {
    render() {
        var {
            className,
            ...others,
        } = this.props;
        return (
            <div classname="{className}">
                <postsgrid {...others}="">
                <button onclick="{this.handleOptionsButtonClick}">Load more</button>
            </postsgrid></div>
        );
    }
}</p>
<pre><code>
&gt; &#x4E0B;&#x9762;&#x8FD9;&#x79CD;&#x5199;&#x6CD5;&#xFF0C;&#x5219;&#x662F;&#x4F20;&#x9012;&#x6240;&#x6709;&#x5C5E;&#x6027;&#x7684;&#x540C;&#x65F6;&#xFF0C;&#x7528;&#x8986;&#x76D6;&#x65B0;&#x7684;className&#x503C;&#xFF1A;
</code></pre><p><div {...this.props}="" classname="override">
    ...
</div></p>
<pre><code>
&gt; &#x8FD9;&#x4E2A;&#x4F8B;&#x5B50;&#x5219;&#x76F8;&#x53CD;&#xFF0C;&#x5982;&#x679C;&#x5C5E;&#x6027;&#x4E2D;&#x6CA1;&#x6709;&#x5305;&#x542B;className&#xFF0C;&#x5219;&#x63D0;&#x4F9B;&#x9ED8;&#x8BA4;&#x7684;&#x503C;&#xFF0C;&#x800C;&#x5982;&#x679C;&#x5C5E;&#x6027;&#x4E2D;&#x5DF2;&#x7ECF;&#x5305;&#x542B;&#x4E86;&#xFF0C;&#x5219;&#x4F7F;&#x7528;&#x5C5E;&#x6027;&#x4E2D;&#x7684;&#x503C;
</code></pre><p><div classname="base" {...this.props}="">
  ...
</div>
```</p>

                            </div>
                            
<hr>
<div class="btn-group btn-group-justified">
    
    <a class="btn" href="01.html"><b>上一页:</b> 原生Ajax学习</a>
    
    
    <a class="btn" href="03.html"><b>下一页:</b> 战舰游戏</a>
    
</div>

                        
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="gb-page-footer">
        <div class="container">
            <ul class="menu">
                <li class="pull-right">
                    <span class="service-info">Copyright GitBook 2018</span>
                </li>
                <li>
                    <a href="#">Return to the top</a>
                </li>
                <li>
                    <a href="#">Updated May 30th 18</a>
                </li>
            </ul>
        </div>
    </footer>
</div>

<script src="../../gitbook/gitbook.js"></script>

    
    <script src="../../gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
    

    <script src="../../gitbook/gitbook-plugin-search-pro/search.js"></script>
    

    <script src="../../gitbook/gitbook-plugin-livereload/plugin.js"></script>
    

    <script src="../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
    

    <script src="../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
    

<script>
(function() {
    gitbook.page.hasChanged({"page":{"title":"React/React Native 的ES5 ES6写法对照表","level":"2.2.3","depth":2,"next":{"title":"战舰游戏","level":"2.2.4","depth":2,"path":"JavaScript/cases/03.md","ref":"JavaScript/cases/03.md","articles":[]},"previous":{"title":"原生Ajax学习","level":"2.2.2","depth":2,"path":"JavaScript/cases/01.md","ref":"JavaScript/cases/01.md","articles":[]},"dir":"ltr"},"config":{"plugins":["theme-official@2.1.1","-sharing","-fontsettings","sitemap","-search","search-pro","livereload"],"root":"./docs/","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"sitemap":{"hostname":"https://blog.honghaitao.net/"},"search-pro":{"cutWordLib":"nodejieba","defineWord":["小需求","基础建设"]},"livereload":{},"highlight":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"theme-official":{},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{"version":"0.0.1"},"title":"代码收集","gitbook":"3.1.1"},"file":{"path":"JavaScript/cases/02.md","mtime":"2018-05-30T08:23:34.364Z","type":"markdown"},"gitbook":{"version":"3.1.1","time":"2018-05-30T08:24:15.757Z"},"basePath":"../..","book":{"language":""}});
})();
</script>

        
    </body>
</html>