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 /> React来自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原生的标签，开发者还可以自定义标签（即虚拟DOM，最终给浏览器渲染的时候会解析成原生dom），自然代码解耦的效果会很明显，也更易读。<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=<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>(大部分都能转换)。当然它的功能不只这些，有兴趣的可以去babel官网看看。它还有个线上的转换器，代码比较简单的时候用这个排查问题或练习<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>很方便。<br /> 介绍两种常用的使用方式：</p>
<p>一种是浏览器来编译，因为实时编译会很慢，所以适合代码量比较小的。只需在html中引用：<br /><script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js%22></script>" 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 /><!DOCTYPE html><br /><html><br /> <head></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="utf-8"><br />
<title>demo</title>" title="" data-original-title="复制"></span>
</div>
</p></div>
<pre class="hljs xml"><code><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>demo<span class="hljs-tag"></<span class="hljs-name">title</span>></span></code></pre>
<p></head><br /> <body></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-text="</p>
<div id='example'></div>
<p><script src="./build/react.js"></script><br />
<script src="./build/react-dom.js"></script><br />
<script src="./build/browser.min.js"></script><br />
<script type="text/babel">
// 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"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'example'</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./build/react.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./build/react-dom.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./build/browser.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/babel"</span>></span><span class="javascript">
<span class="hljs-comment">// react代码写到这里</span>
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>hello word!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></span>,<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example'</span>));
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
<p></body><br /></html><br />方式二：使用npm + webpack<br /> 篇幅限制，下篇说，欢迎看第二篇。<br />学会react的基本语法<br /> 一般从定义到使用组件的流程是：定义组件creat<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>,实现render方法->将组件渲染到页面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/ReactClass 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 />var newDom=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(<h1>hello word!</h1>,document.getElementById('example'));<br />创建组件</p>
<p> 组件是一个自定义的js对象，在<a href="http://www.js-code.com/tag/es5" title="es5" target="_blank">es5</a>中使用React.createClass();在es6中必须继承React.component。<br /> 其中有个特殊的render方法，返回ReactElement对象。该方法会在我们使用JSX语法的标签时被调用，因此我们在渲染组件时第一个参数可以使用自定义标签或者createElement。<br /> 如：ReactDOM.render(<MyElement />,document.getElementById('example')) </p>
<p>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="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变量是数组来解析。<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">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> (
<ol>
{
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-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> <li>{child}</li>;<span class="hljs-comment">//变量用花括号标识</span>
})<span class="hljs-comment">//因为有多个子元素，所以返回的是数组。按照JSX变量是数组来解析。</span>
}
</ol>
);
}</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"><<span class="hljs-name">NewDom</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>lala<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>ass<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">NewDom</span>></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> <ol><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> <li>{child}</li>;
})
}
</ol>;
}</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"><<span class="hljs-name">NewDom</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>lala<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"><<span class="hljs-name">span</span>></span>ass<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
<span class="hljs-tag"></<span class="hljs-name">NewDom</span>></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中为方法：getDefaultProps: <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"><<span class="hljs-name">div</span>></span>{this.props.title}<span class="hljs-tag"></<span class="hljs-name">div</span>></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> <div ><span class="hljs-number">1</span>{<span class="hljs-keyword">this</span>.props.title}</div>;</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>改变状态值，根据diff算法算出来有差以后，就会执行ReactDom的render方法，重新渲染页面。<br /> 这避免了开发者直接操作dom对象已达到重新渲染页面。开发者只需要关注state这个中间人，控制它就可以控制页面刷新。第二篇中评论框的渲染就是使用的state来控制。<br /> 是不是感觉和props有些类似？一般区分两个的原则是，可变的放在state中，不可变的放在props中。 </p>
<p>初始化<br />es5<br />class <em>*</em> extends 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>: false};</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">super</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="text" ref="tex" /><br />
<input type="button" 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> <div >
<<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> />
<<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> />
</div>;//变量用花括号标识
}</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="text" ref="tex" /><br />
<input type="button" 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> <div >
<input type=<span class="hljs-string">"text"</span> ref=<span class="hljs-string">"tex"</span> />
<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> />
</div>;<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.setState({<span class="hljs-keyword">value</span>: event.<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 <ol>//标签前一半一定要和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 <li>{child}</li>;
})
}</code></pre>
<p></ol>;<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)=> {函数体}<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>
