脚本宝典收集整理的这篇文章主要介绍了

React入门 (1)—使用指南(包括ES5和ES6对比)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>前言<br />  本篇会简明扼要的介绍一下<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>的使用方法。代码会用<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a>+ES5和<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a>+ES6两种方式实现。  </p> <p><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>简介  <br />  <a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a>来自Facebook,于2013年开源。至今不断修改完善,现在已经到达了版本0.14.2。可以注意到版本还没有到1.0, 普遍应用到大部分产品中还需要一定的时间。2015年3月份,FaceBook发布了React Native,一个用react来构建native app的框架。<br />  步入正题,React是一个<a href="http://www.js-code.com/tag/java" title="java" target="_blank">java</a>script的类库,用于构建用户界面。</p> <p>三个特点</p> <p>JUST THE UI<br />  不同于<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>js框架,React不属于MVC框架,它可以算是MVC里面的V层,所以相对来说入门也简单一下(只指入门,深度研究的话也不简单)。</p> <p>VIRTUAL <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>——虚拟<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a><br />  虚拟<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m其实是轻量的js对象,只保留了原生<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m的一些常用的属性和方法。<br />自定义标签<br />  学习React需要有一种全新的思路去看待view层的构建。除了使用html原生的标签,开发者还可以自定义标签(即虚拟<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>,最终给浏览器渲染的时候会解析成原生<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>m),自然代码解耦的效果会很明显,也更易读。<br />性能提升<br />  在大家优化代码性能的时候,一定会关注有没有多余的dom操作,这是因为dom相关的操作耗时比较长。就算是创建一个空标签,也许要初始化它的各种默认属性和事件。<br />  React渲染页面并不直接操作dom,而是先通过d<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>f算法比较前后虚拟dom的差异。这最大程度的简化dom操作,大大提高了性能。由于只是局部更新dom,所以只是局部刷新。<br />  换而言之,虚拟dom的出现,是因为目前js的性能比DOM渲染的性能要好,所以可以用更多的js操作换取更少的dom操作。也不排除如果将来有一天dom的性能和js差不多的时候,虚拟dom也许就没那么大的意义了。<br />DATA FLOW<br />React是单向响应的数据流。</p> <p>React相关知识简介<br />jsx</p> <p>  一种特殊的js语法,可以在js代码中直接使用html标签。是个语法糖,提高编写代码效率。<br />  要注意不能在标签的中间添加注释,因为最终还是要翻译成原生js,标签中添加注释相当于在一行代码还没完的时候就添加注释。<br />  在jsx中,变量用花括号包围起来,花括号内的语句将以js代码的方式解析。<br />  例如:</p> <p>// 用纯js在react中创建a标签<br /><a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a>Dom=&lt;React.createElement('a', {href: '<a href="https://facebook.github.io/react/" rel="nofollow noreferrer" target="_blank">https://facebook.github.io/re...</a>'}, 'Hello!');<br />// 用jsx在react中创建a标签<br /><a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a>Dom=<a href="https://facebook.github.io/react/" rel="nofollow noreferrer" target="_blank">Hello!</a>;<br />  要让浏览器认识这种新的语法,就需要下面介绍的<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>了。</p> <p><a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a></p> <p>   是一个<a href="http://www.js-code.com/tag/java" title="java" target="_blank">java</a>script代码转换器,在这里我们可以用于jsx转换为原生js,<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>转换为<a href="http://www.js-code.com/tag/es5" title="es5" target="_blank">es5</a>(大部分都能转换)。当然它的功能不只这些,有兴趣的可以去<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>官网看看。它还有个线上的转换器,代码比较简单的时候用这个排查问题或练习<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>很方便。<br />  介绍两种常用的使用方式:</p> <p>一种是浏览器来编译,因为实时编译会很慢,所以适合代码量比较小的。只需在html中引用:<br />&lt;script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js%22&gt;&lt;/script&gt;" rel="nofollow noreferrer" target="_blank">https://cdnjs.cloudflare.com/...</a><br />一种是本地使用。通过npm安装,在webpack中配置:<br />//在webpack.config.js文件中配置<br />module.<a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a>s = {</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="module: { loaders: [{ test: /.jsx?$/, loader: 'babel' }] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">module</span>: { <span class="hljs-attribute">loaders</span>: [{ test: /.jsx?$/, loader: <span class="hljs-string">'babel'</span> }] }</code></pre> <p>}<br />  可以在本地编译好代码后,再将编译后的代码给html引用,提高性能,适合大项目。</p> <p>webpack</p> <p>  一个模块打包工具,它把不同的、相互依赖的静态资源都视作模块,并且打包成我们想要的静态资源。<br />  另外可以方便的配置多种预处理器,如babel。<br />  使用webpack,让代码组织更清晰,一个文件就是一个模块。</p> <p>ES6</p> <p>  ES6,也叫<a href="http://www.js-code.com/tag/ecmascript" title="ECMAScript" target="_blank">ECMAScript</a>2015(以下统称ES6),是<a href="http://www.js-code.com/tag/ecmascript" title="ECMAScript" target="_blank">ECMAScript</a>标准的最新版本。详细可见ES6的特性简述(译+部分解析)</p> <p>搭建简单的运行环境<br />方式一:直接引入react、reactdom、babel的库。<br />  因为这种方式是浏览器负责即时编译的,所以可想而知项目大了得时候解析速度会很慢,不建议使用。但是我们只是学习react语法嘛,当然要搭的环境越简单越好。<br />  这种方式就是官网给出的实例所使用的方式。注意写jsx的的js块的type="<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>/babel",这样才能被浏览器识别并用babel编译。<br />  以下是本章要用到的代码框架(一个helloword的demo) :<br />&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br /> &lt;head&gt;</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<meta charset=&quot;utf-8&quot;><br /> <title>demo</title>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"utf-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>demo<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span></code></pre> <p>&lt;/head&gt;<br /> &lt;body&gt;</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>="</p> <div id='example'></div> <p><script src=&quot;./build/react.js&quot;></script><br /> <script src=&quot;./build/react-dom.js&quot;></script><br /> <script src=&quot;./build/browser.min.js&quot;></script><br /> <script type=&quot;text/babel&quot;> // react代码写到这里 ReactDOM.render(</p> <h1>hello word!</h1> <p>,<a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.getElementById('example')); </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">'example'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./build/react.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./build/react-dom.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./build/browser.m<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>&gt;</span><span class="javascript"> <span class="hljs-comment">// react代码写到这里</span> ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>hello word!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>,<span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.getElementById(<span class="hljs-string">'example'</span>)); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>&lt;/body&gt;<br />&lt;/html&gt;<br />方式二:使用npm + webpack<br />  篇幅限制,下篇说,欢迎看第二篇。<br />学会react的基本语法<br />  一般从定义到使用组件的流程是:定义组件creat<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>,实现render方法-&gt;将组件渲染到页面ReactDOM.render()。</p> <p>创建ReactElement</p> <p>  ReactElement对象可以看成是虚拟DOM树。它既是渲染组件ReactDOM.render(root,conta<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>er)的第一个参数,又是创建组件React.create<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>中render方法的返回值。记住ReactElement是唯一父节点的’dom树‘就好。</p> <p>react原生实现<br />React.createElement(<br /> str<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>g/React<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a> type, //type组件类型可以是内置的标签,如<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>;也可以是由React.createClass(object spec<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>ication)创建的虚拟组件<br /> [object props], // 标签属性,<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a><br /> [children ...],// 标签的innerHtml<br />)//返回类型是ReactElement<br /><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a> <a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a>Dom=React.createElement('a', {href: '<a href="https://facebook.github.io/react/" rel="nofollow noreferrer" target="_blank">https://facebook.github.io/re...</a>'}, 'Hello!');<br />jsx实现<br /><a>Hello</a><br />把组件渲染到浏览器中</p> <p>  react-dom模块中的方法。<br />  ReactDom.render(root, container); root为ReactElement类型,表示root替换container中的元素。注意是替换不是追加,所以有些情况父元素应该设置为空。</p> <p>react原生<br />var content=React.createElement('h1',{},'hello');<br />ReactDOM.render(content,<a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.getElementById('example'));<br />jsx<br />ReactDOM.render(&lt;h1&gt;hello word!&lt;/h1&gt;,document.getElementById('example'));<br />创建组件</p> <p>  组件是一个自定义的js对象,在<a href="http://www.js-code.com/tag/es5" title="es5" target="_blank">es5</a>中使用React.createClass();在<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a>中必须继承React.component。<br />  其中有个特殊的render方法,返回ReactElement对象。该方法会在我们使用<a href="http://www.js-code.com/tag/jsx" title="浏览关于“JSX”的文章" target="_blank" class="tag_link">JSX</a>语法的标签时被调用,因此我们在渲染组件时第一个参数可以使用自定义标签或者createElement。<br />  如:ReactDOM.render(&lt;MyElement /&gt;,document.getElementById('example'))     </p> <p><a href="http://www.js-code.com/tag/es5" title="浏览关于“es5”的文章" target="_blank" class="tag_link">es5</a><br />var NewDom = React.createClass({//类名一定要大写开头</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-text="render: <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>() {<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> (</p> <ol> {<br /> React.Children.map(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.children, <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> (child) {<br /> //获得元素的子元素<br /> console.info(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>);<br /> console.info('child:'+child);<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> </p> <li>{child}</li> <p>;//变量用花括号标识<br /> })//因为有多个子元素,所以返回的是<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>。按照JSX变量是<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>来解析。<br /> } </ol> <p> );<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code>render: <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span><span class="hljs-params">()</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> ( &lt;ol&gt; { React.Children.map(<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.props.children, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(child)</span> </span>{ <span class="hljs-comment">//获得元素的子元素</span> console.info(<span class="hljs-keyword">this</span>); console.info(<span class="hljs-string">'child:'</span>+child); <span class="hljs-keyword">return</span> &lt;li&gt;{child}&lt;/li&gt;;<span class="hljs-comment">//变量用花括号标识</span> })<span class="hljs-comment">//因为有多个子元素,所以返回的是数组。按照JSX变量是数组来解析。</span> } &lt;/ol&gt; ); }</code></pre> <p>});<br />ReactDOM.render(</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<NewDom><br /> <span>lala</span><br /> <span>ass</span><br /> </NewDom>,<br /> document.getElementById('example')" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">NewDom</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>lala<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>ass<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">NewDom</span>&gt;</span>, document.getElementById('example')</code></pre> <p>);<br />es6<br />class NewDom <a href="http://www.js-code.com/tag/extends" title="extends" target="_blank">extends</a> React.Component{</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="render() {//开头花括号一定要和小括号隔一个空格,否则识别不出来 <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> </p> <ol>//标签开头一定要和<a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a>一行<br /> {<br /> React.Children.map(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.children, <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> (child) {<br /> return </p> <li>{child}</li> <p>;<br /> })<br /> } </ol> <p>;<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code>render() {<span class="hljs-comment">//开头花括号一定要和小括号隔一个空格,否则识别不出来</span> <span class="hljs-keyword">return</span> &lt;ol&gt;<span class="hljs-comment">//标签开头一定要和return一行</span> { React.Children.map(<span class="hljs-keyword">this</span>.props.children, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(child)</span> </span>{ <span class="hljs-keyword">return</span> &lt;li&gt;{child}&lt;/li&gt;; }) } &lt;/ol&gt;; }</code></pre> <p>} <br />ReactDOM.render(</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<NewDom><br /> <span>lala</span><br /> <span>ass</span><br /> </NewDom>,<br /> document.getElementById('example')" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">NewDom</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>lala<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>ass<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">NewDom</span>&gt;</span>, document.getElementById('example')</code></pre> <p>); <br />组件的属性props</p> <p>一个js对象,对应于dom的属性。</p> <p>原生属性<br />某些html的属性名因为正好是js得保留字,所以需要重新命名。<br />class<br />因为js中class为保留字,所以要写成className。<br /><a></a><br />style<br />style属性接受由css属性构成的js对象。对于jsx来说第一是变量,第二是对象,因此要两个花括号,key值用驼峰命名法转化了,value值用引号括起来<br /><a></a><br />新增属性<br /><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.children 表示组件的所有子节点,上一小节的示范代码中有介绍<br />传递属性值<br />在ReactDOM.Render第一个参数中直接写入带属性的标签即可: <a></a> 。这样就可以在<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props['new<a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>']中读取值<br />设置默认属性<br />在ES6中为属性:<a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a><a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>s(可以标识<a href="http://www.js-code.com/tag/static" title="static" target="_blank">static</a>定义在class内,也可以定义在class外)<br />在ES5中为方法:getDefault<a href="http://www.js-code.com/tag/prop" title="浏览关于“Prop”的文章" target="_blank" class="tag_link">Prop</a>s: <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){return {<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>:value}};<br />属性的读取<br /><a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props['propName']获得属性<br />新增功能:属性校验器propTypes<br />见代码示例<br />代码示范<br />es5<br />var NewDom = React.createClass({//类名一定要大写开头</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="getDefaultProps: function() {//设置默认属性 return {title:'133'}; }, propTypes: { title:React.PropTypes.string, },//属性校验器,表示必须是string render: function() { return <div>{this.props.title}</div> <p>;//变量用花括号标识<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>getDefaultProps: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{<span class="hljs-comment">//设置默认属性</span> <span class="hljs-keyword">return</span> {<span class="hljs-attr">title</span>:<span class="hljs-string">'133'</span>}; }, <span class="hljs-attr">propTypes</span>: { <span class="hljs-attr">title</span>:React.PropTypes.string, },<span class="hljs-comment">//属性校验器,表示必须是string</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">div</span>&gt;</span>{this.props.title}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;<span class="hljs-comment">//变量用花括号标识</span> }</code></pre> <p>});<br />es6<br />class NewDom <a href="http://www.js-code.com/tag/extends" title="extends" target="_blank">extends</a> React.Component{<br /> //不能再组件定义的时候定义一个属性<br /> render() {</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" return <div >1{this.props.title}</div> <p>;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;"> <span class="hljs-keyword">return</span> &lt;div &gt;<span class="hljs-number">1</span>{<span class="hljs-keyword">this</span>.props.title}&lt;/div&gt;;</code></pre> <p>}//开头花括号一定要和小括号隔一个空格,否则识别不出来<br />}<br />//es6 这两个属性不能写在class内。<br />NewDom.propTypes={//属性校验器,表示改属性必须是bool,否则报错<br /> title: React.PropTypes.bool,<br />}<br />NewDom.<a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a>Props={title:'133'};//设置默认属性<br />组件的状态state</p> <p>  一个js对象,存储着组件当前的状态以及其值的集合。<br />  个人觉得这也是react的创新点之一,可以把组件看成一个“状态机”. 根据不同的<a href="http://www.js-code.com/tag/status" title="status" target="_blank">status</a>有不同的UI展示。只要使用set<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>改变状态值,根据d<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>f算法算出来有差以后,就会执行ReactDom的render方法,重新渲染页面。<br />  这避免了开发者直接操作dom对象已达到重新渲染页面。开发者只需要关注state这个中间人,控制它就可以控制页面刷新。第二篇中评论框的渲染就是使用的state来控制。<br />  是不是感觉和props有些类似?一般区分两个的原则是,可变的放在state中,不可变的放在props中。 </p> <p>初始化<br />es5<br />class <em>*</em> <a href="http://www.js-code.com/tag/extends" title="浏览关于“extends”的文章" target="_blank" class="tag_link">extends</a> React.Component{<br /> getInitial<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>: function() {</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="return {liked: false};" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code style="word-break: break-word; white-space: initial;"><span class="hljs-selector-tag">return</span> {<span class="hljs-attribute">liked</span>: <a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a>};</code></pre> <p>}<br />}<br />es6<br />class <em>*</em> extends React.Component{<br /> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a>ructor(props) {</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="super(props); this.state = {liked: false};" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/super" title="浏览关于“super”的文章" target="_blank" class="tag_link">super</a></span>(props); <span class="hljs-keyword">this</span>.state = {<span class="hljs-string">liked:</span> <span class="hljs-literal">false</span>};</code></pre> <p>}<br />}<br />修改值<br />es5和es6中使用方法相同。<br />this.<a href="http://www.js-code.com/tag/setstate" title="setState" target="_blank">setState</a>(新的state对象);<br />读取值<br />其实就是读取一个js对象。<br />事件</p> <p>事件名<br />和属性名类似,到了react中,事件名也成了驼峰命名法,比如<a href="http://www.js-code.com/tag/onclick" title="onclick" target="_blank">onclick</a>变为了onClick.</p> <p>事件定义<br />一定要注意es6中元素如何使用自定义事件。见代码。<br />es5<br />var NewDom = React.createClass({//类名一定要大写开头</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="btnClick:function(ele){ console.info(ele); console.info(this.refs.tex); }, render: function() { return <div > <input type=&quot;text&quot; ref=&quot;tex&quot; /><br /> <input type=&quot;button&quot; onClick={this.btnClick} value='click me' /> </div> <p>;//变量用花括号标识<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>btnClick:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(ele)</span></span>{ console.info(ele); console.info(this.refs.tex); }, render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span> { <span class="hljs-keyword">return</span> &lt;div &gt; &lt;<span class="hljs-built_in">input</span> <span class="hljs-built_in">type</span>=<span class="hljs-string">"text"</span> ref=<span class="hljs-string">"tex"</span> /&gt; &lt;<span class="hljs-built_in">input</span> <span class="hljs-built_in">type</span>=<span class="hljs-string">"button"</span> onClick={this.btnClick} value=<span class="hljs-string">'click me'</span> /&gt; &lt;/div&gt;;//变量用花括号标识 }</code></pre> <p>});<br />es6<br />class NewDom extends React.Component{</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="btnClick(){ console.info(this);//this为该组件类 console.info(this.refs.tex);//this.refs.tex为组件里面索引为tex的 } render() { return <div > <input type=&quot;text&quot; ref=&quot;tex&quot; /><br /> <input type=&quot;button&quot; onClick={this.btnClick.bind(this)} value='click me' /> </div> <p>;//注意bind后面的this<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code>btnClick(){ console.info(<span class="hljs-keyword">this</span>);<span class="hljs-comment">//this为该组件类</span> console.info(<span class="hljs-keyword">this</span>.refs.tex);<span class="hljs-comment">//this.refs.tex为组件里面索引为tex的</span> } render() { <span class="hljs-keyword">return</span> &lt;div &gt; &lt;input type=<span class="hljs-string">"text"</span> ref=<span class="hljs-string">"tex"</span> /&gt; &lt;input type=<span class="hljs-string">"button"</span> onClick={<span class="hljs-keyword">this</span>.btnClick.bind(<span class="hljs-keyword">this</span>)} value=<span class="hljs-string">'click me'</span> /&gt; &lt;/div&gt;;<span class="hljs-comment">//注意bind后面的this</span> }</code></pre> <p>}<br />事件target<br />下面是一个事件对应要执行的函数的定义:<br />handleChange: function(<a href="http://www.js-code.com/tag/event" title="event" target="_blank">event</a>) {</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="this.setState({value: event.target.value});//event.target.value元素的值" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs fortran"><code style="word-break: break-word; white-space: initial;">this.<a href="http://www.js-code.com/tag/setstate" title="浏览关于“setState”的文章" target="_blank" class="tag_link">setState</a>({<span class="hljs-keyword">value</span>: <a href="http://www.js-code.com/tag/event" title="浏览关于“event”的文章" target="_blank" class="tag_link">event</a>.<span class="hljs-keyword">target</span>.<span class="hljs-keyword">value</span>});//event.<span class="hljs-keyword">target</span>.<span class="hljs-keyword">value</span>元素的值</code></pre> <p>}<br />每个控件取值不一样,value是指input控件,下拉框为<a href="http://www.js-code.com/tag/select" title="select" target="_blank">select</a>ed,<a href="http://www.js-code.com/tag/radio" title="radio" target="_blank">radio</a>button为checked。a标签是innerHtml。可以自己通过console.info(e.target) 调试出自己想要的那个字段</p> <p>ES6的坑<br />类名(组件名)一定要用大写开头,否则自定义的组件无法编译,识别不出来。<br />类中定义render函数要注意两点,见代码注释。<br />render() {//开头花括号一定要和小括号隔一个空格,否则识别不出来<br /> return &lt;ol&gt;//标签前一半一定要和return一行</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" { React.Children.map(this.props.children, function (child) { return <li>{child}</li> <p>;<br /> })<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs clojure"><code> { React.Children.map(<span class="hljs-name">this.props.children</span>, function (<span class="hljs-name">child</span>) { return &lt;li&gt;{child}&lt;/li&gt;; }) }</code></pre> <p>&lt;/ol&gt;;<br />}<br />在class中使用class的变量或者方法,一定要加个this。如this.handlerclick。<br />es6 绑定事件需要onClick={this.func1.bind(this)}。<br />这样func1和bind里面的参数‘this’的作用域才绑定到了一起(注意es5是不需要这个bind(this)的),func1中如果有this.<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>这类语句,相当于是使用参数‘this’里面的变量值;或者使用<a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="箭头函数" target="_blank">箭头函数</a>func1= (e)=&gt; {函数体}<br />小结<br />  经过这番简单的练习后,如果还想看看做一个项目中如何使用react参见下章,一个模仿微博展示的demo(编写ing)。<br />  本文没有对react作深入的研究。通过学习react的使用方法可以看到,react入门的话相对于其他框架还是比较简单的,代码逻辑也很清晰,好维护也好使用。重要的是,需要使用者把从前直接对dom操作的思维方式转换过来,相信会爱上它的。<br />  ps: react 还在发展期,学习的话建议英语好的直接看官方文档,可以少走一些弯路。<br />本文转载自 <a href="http://www.cnblogs.com/Mrs-cc/p/4969755.html" rel="nofollow noreferrer" target="_blank">http://www.cnblogs.com/Mrs-cc...</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

React入门 (1)—使用指南(包括ES5和ES6对比)

全部内容,希望文章能够帮你解决

React入门 (1)—使用指南(包括ES5和ES6对比)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过