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

react入门学习笔记(一)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>这两天得空,特意来折腾了以下时下火热的前端框架react,至于为什么选react,作为一个初学者react和vue在技术上的优劣我无权评论,也就不妄加评论了。选择react的主要原因大概是因为该框架出现较早,感觉上会相对成熟,日后学习中遇到问题想要查找答案相对简单一些,对,就是这么简单。</p> <p>在官网文档做了简单了解之后我,我想作为初学者首先还是从react基本知识了解,当然其中涉及到<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a>语法和ES6的相关知识,这些我没有太深入了解,毕竟还是要跟着学习react的主线来走的,跟着官方给的例子,大致了解用法就行,这个不难实现。至于网上说的react全家桶之类的,作为初学者,我暂时也是没去理会的。多说无益,接下来开始react的学习,我按照我学习中带着的问题来一一解答,完成我的入门笔记。</p> <p><strong>一、react在实际开发中能给我们带来什么样的便捷</strong></p> <p>学一个新的库或者新的框架,我总是先联合实际,明白了我将要学习的东西能给我带来什么,我才能有目的地去学习。不知道大家是否也是一样。react主要是针对前端UI的组件化开发。就是前端的一个页面包括Header,Content,footer,等等元素都可以是react里面的一个组件,可以多次重复使用。如果大家做过页面开发就知道,固然有bootstrap这样的布局神器,为我们搭建网页节省了不少时间,但是想要做到一个组件的多次重复使用依然是很难的。所以react正是来解决这个问题的,至于如何解决相信往下看了实际的例子就能明白了。</p> <p><strong>二、学习react需要了解的一些概念</strong></p> <p><strong>1、react的安装</strong><br />本人最忌麻烦,所以没有从react官网下载文件,直接用的网上的资源,一心一意写<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>me,本文的例子引用下面三个文件就可以了:</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>="<script src=&quot;https://cdn.bootcss.com/react/15.4.2/react.min.js&quot;></script><br /> <script src=&quot;https://cdn.bootcss.com/react/15.4.2/react-dom.min.js&quot;></script><br /> <script src=&quot;https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js&quot;></script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/react/15.4.2/react.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">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/react/15.4.2/react-<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>m.min.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">"https://cdn.bootcss.com/<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-standalone/6.22.1/babel.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p><strong>2、react中的最小单元组件的概念、创建方式</strong><br /> 组件是react中用于呈现到页面的元素,组件可大可小,下面是我所知道的四种创建方法:</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>="/*<br /> * 组件定义方法一<br /> */<br /> //react元素也可以用来表示组件<br /> //<a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> <a href="http://www.js-code.com/tag/element" title="element" target="_blank">element</a> = </p> <h1>Hello World</h1> <p> // <a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a><a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>.render(<br /> // <a href="http://www.js-code.com/tag/element" title="element" target="_blank">element</a>,<br /> // <a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.getElementById('example')<br /> // );</p> <p> /*<br /> * 组件定义方法二<br /> */<br /> //定义组件最简单的方法就是定义一个<a href="http://www.js-code.com/tag/java" title="java" target="_blank">java</a>script函数<br /> // <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> Welcome(props){<br /> // <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> </p> <h1>Hello {props.<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>}</h1> <p>;<br /> // }<br /> // <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> <a href="http://www.js-code.com/tag/element" title="浏览关于“element”的文章" target="_blank" class="tag_link">element</a> = <Welcome name=&quot;huanglw&quot; ></Welcome><br /> // <a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a><a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>.render(<br /> // element,<br /> // <a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>cument.getElementById('example')<br /> // );</p> <p> /*<br /> * 方法三<br /> */<br /> //ES6类来定义一个组件<br /> // class Welcome <a href="http://www.js-code.com/tag/extends" title="extends" target="_blank">extends</a> <a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a>.Component {<br /> // render() {<br /> // <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> </p> <h1>Hello, {<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>}</h1> <p>;<br /> // }<br /> // }<br /> // React<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>.render(<br /> // <Welcome name=&quot;huanglw&quot; ></Welcome>,<br /> // <a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.getElementById('example')<br /> // );</p> <p> /*<br /> * 方法四<br /> */<br /> //react自带的创建组件的方法<br /> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> Welcome = React.create<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a> ({<br /> 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> <h1>Hello, {<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>}</h1> <p>;<br /> }<br /> });<br /> ReactDOM.render(<br /> <Welcome name=&quot;huanglw&quot; ></Welcome>,<br /> document.getElementById('example')<br /> );" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">/* * 组件定义方法一 */</span> <span class="hljs-comment">//react元素也可以用来表示组件</span> <span class="hljs-comment">//<a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a> element = &lt;h1&gt;Hello World&lt;/h1&gt;</span> <span class="hljs-comment">// ReactDOM.render(</span> <span class="hljs-comment">// element,</span> <span class="hljs-comment">// <a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a>.getElementById('example')</span> <span class="hljs-comment">// );</span> <span class="hljs-comment">/* * 组件定义方法二 */</span> <span class="hljs-comment">//定义组件最简单的方法就是定义一个<a href="http://www.js-code.com/tag/java" title="浏览关于“java”的文章" target="_blank" class="tag_link">java</a>script函数</span> <span class="hljs-comment">// <a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a> Welcome(props){</span> <span class="hljs-comment">// <a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a> &lt;h1&gt;Hello {props.name}&lt;/h1&gt;;</span> <span class="hljs-comment">// }</span> <span class="hljs-comment">// const element = &lt;Welcome name="huanglw" /&gt;</span> <span class="hljs-comment">// ReactDOM.render(</span> <span class="hljs-comment">// element,</span> <span class="hljs-comment">// document.getElementById('example')</span> <span class="hljs-comment">// );</span> <span class="hljs-comment">/* * 方法三 */</span> <span class="hljs-comment">//ES6类来定义一个组件</span> <span class="hljs-comment">// class Welcome <a href="http://www.js-code.com/tag/extends" title="浏览关于“extends”的文章" target="_blank" class="tag_link">extends</a> React.Component {</span> <span class="hljs-comment">// render() {</span> <span class="hljs-comment">// return &lt;h1&gt;Hello, {<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.props.name}&lt;/h1&gt;;</span> <span class="hljs-comment">// }</span> <span class="hljs-comment">// }</span> <span class="hljs-comment">// ReactDOM.render(</span> <span class="hljs-comment">// &lt;Welcome name="huanglw" /&gt;,</span> <span class="hljs-comment">// document.getElementById('example')</span> <span class="hljs-comment">// );</span> <span class="hljs-comment">/* * 方法四 */</span> <span class="hljs-comment">//react自带的创建组件的方法</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> Welcome = React.create<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a> ({ <span class="hljs-attr">render</span>:<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">h1</span>&gt;</span>Hello, {this.props.name}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>; } }); ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Welcome</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"huanglw"</span> /&gt;</span>, document.getElementById('example') );</span></code></pre> <p>下面这张关于<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a>对象的对应关系的图片需要了解一下,有助于理解代码:</p> <p><span class="img-wrap"><img data-src="/img/bVQPXl?w=306&amp;h=99" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVQPXu?w=356&amp;h=139" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><strong>3、组件怎么显示到页面上去</strong><br />组件要显示到页面上去就要提及react中最重要的方法ReactDOM.render()方法了,通过该方法将react元素渲染到页面中指定的DOM节点中去:</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-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>="<a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> element = </p> <h1>Hello, world</h1> <p>;<br /> ReactDOM.render(<br /> element,<br /> //此处只能用原生方法获取DOM节点,不可用jq方法<br /> document.getElementById('root')<br /> );<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">const</span> element = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello, world<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>; ReactDOM.render( element, <span class="hljs-comment">//此处只能用原生方法获取DOM节点,不可用jq方法</span> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'root'</span>) ); </code></pre> <p><strong>4、组件更新</strong><br />组件也可以更新,下面例子是一个实时更新显示当前时间的组件</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=" <script type=&quot;text/babel&quot;> <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> tick(){ <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> element = ( //相邻的<a href="http://www.js-code.com/tag/jsx" title="浏览关于“JSX”的文章" target="_blank" class="tag_link">JSX</a>元素必须包裹早封闭的标签中,如果没有</p> <div>标签会报语法错误</p> <div> <h1>Hello World</h1> <h2>This is {<a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> <a href="http://www.js-code.com/tag/Date" title="Date" target="_blank">Date</a>().toLocaleTimeStr<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>g()}.</h2> </p></div> <p> ); ReactDOM.render( element, document.getElementById('example') ); } //<a href="http://www.js-code.com/tag/setInterval" title="setInterval" target="_blank">setInterval</a>(&quot;tick()&quot;,1000); <a href="http://www.js-code.com/tag/setInterval" title="setInterval" target="_blank">setInterval</a>(tick,1000); </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <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="actionscript"> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">tick</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">const</span> element = ( <span class="hljs-comment">//相邻的JSX元素必须包裹早封闭的标签中,如果没有&lt;<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>&gt;标签会报语法错误</span> &lt;div&gt; &lt;h1&gt;Hello World&lt;/h1&gt; &lt;h2&gt;This <span class="hljs-keyword">is</span> {<span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> <a href="http://www.js-code.com/tag/Date" title="浏览关于“Date”的文章" target="_blank" class="tag_link">Date</a>().toLocaleTime<a href="http://www.js-code.com/tag/String" title="浏览关于“String”的文章" target="_blank" class="tag_link">String</a>()}.&lt;/h2&gt; &lt;/div&gt; ); ReactDOM.render( element, document.getElementById(<span class="hljs-string">'example'</span>) ); } <span class="hljs-comment">//<a href="http://www.js-code.com/tag/setInterval" title="浏览关于“setInterval”的文章" target="_blank" class="tag_link">setInterval</a>("tick()",1000);</span> setInterval(tick,<span class="hljs-number">1000</span>); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p><strong>5、组件可以包含子组件,从而构建一个大的组件</strong><br />组件可大可小,一个大的组件可以拆分成很多小的组件,一个个小的组件可以通过层层包含构成一个大的组件甚至应用,并且各个小组件都是相互独立的,可多次复用,这也是react的重要思想之一吧!</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="<script type=&quot;text/babel&quot;> //这是定义好了的一个组件 <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> Welcome(props){ <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> </p> <h1>Hello {props.name}</h1> <p>; } //这是另外一个组件,并且可以引用组件Welcome function App(){ return (</p> <div> <Welcome name=&quot;Jack&quot; ></Welcome> <Welcome name=&quot;Sara&quot; ></Welcome> <Welcome name=&quot;Rose&quot; ></Welcome> </div> <p> ) } ReactDOM.render( <App ></App>, document.getElementById('example') ); </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><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="actionscript"> <span class="hljs-comment">//这是定义好了的一个组件</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Welcome</span><span class="hljs-params">(props)</span></span>{ <span class="hljs-keyword">return</span> &lt;h1&gt;Hello {props.name}&lt;/h1&gt;; } <span class="hljs-comment">//这是另外一个组件,并且可以引用组件Welcome</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">return</span> ( &lt;div&gt; &lt;Welcome name=<span class="hljs-string">"Jack"</span> /&gt; &lt;Welcome name=<span class="hljs-string">"Sara"</span> /&gt; &lt;Welcome name=<span class="hljs-string">"Rose"</span> /&gt; &lt;/div&gt; ) } ReactDOM.render( &lt;App /&gt;, document.getElementById(<span class="hljs-string">'example'</span>) ); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p><strong>6、react事件处理</strong><br />首先需要了解以下js的<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind" rel="nofollow noreferrer" target="_blank">bind</a>的用法和<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions" rel="nofollow noreferrer" target="_blank">箭头函数</a>。</p> <p><span class="img-wrap"><img data-src="/img/bVQQfN?w=391&amp;h=292" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>其次还需要了解ES6的相关语法,由于我自身也还在学习,所以不敢深入讲解,主要讲讲reac事件处理中主要可以设置组件的初始状态,以及一些点击事件什么的设定。具体例子可以看官网文档,我自知对这章理解不深。所以ES6的知识提前掌握还是比较好的。</p> <p><strong>7、react实现一个评论模块</strong></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="<script type=&quot;text/jsx&quot;> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> data = [ {author: &quot;Pete Hunt&quot;, text: &quot;This is one comment&quot;}, {author: &quot;Jordan Walke&quot;, text: &quot;This is *another* comment&quot;}, {author: &quot;Huanglw&quot;, text: &quot;I like JavaScript&quot;} ];</p> <p> // 创建<a href="http://www.js-code.com/tag/react%e7%bb%84%e4%bb%b6" title="React组件" target="_blank">React组件</a> var CommentBox = React.create<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>({ // 在组件的生命周期中仅执行一次,用于设置初始状态 getInitial<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>: function() { return {data: []}; }, onCommentSubmit: function(comment) {</p> <p> data.push(comment);</p> <p> var <a href="http://www.js-code.com/tag/self" title="self" target="_blank">self</a> = <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>; <a href="http://www.js-code.com/tag/setTimeout" title="setTimeout" target="_blank">setTimeout</a>(function() { // 动态更新state <a href="http://www.js-code.com/tag/self" title="self" target="_blank">self</a>.<a href="http://www.js-code.com/tag/setstate" title="setState" target="_blank">setState</a>({data: data}); }, 500); }, // 当组件render完成后自动被调用 componentDidMount: function() { var <a href="http://www.js-code.com/tag/self" title="浏览关于“self”的文章" target="_blank" class="tag_link">self</a> = <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>; <a href="http://www.js-code.com/tag/setTimeout" title="setTimeout" target="_blank">setTimeout</a>(function() { // 动态更新state self.set<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>({data: data}); }, 2000); }, render: function() { return ( // 并非是真正的DOM元素,是React的<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>组件,默认具有XSS保护</p> <div className=&quot;commentBox&quot;> <h1>Comments</h1> <p> <CommentList data={this.state.data} ></CommentList> <CommentForm onCommentSubmit={this.onCommentSubmit} ></CommentForm> </div> <p> ); } });</p> <p>var CommentList = React.createClass({ render: function() { var commentNodes = <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.data.map(function(comment) { return ( <Comment author={comment.author}> {comment.text} </Comment> ); });</p> <p> return (</p> <div className=&quot;commentList&quot;> {commentNodes} </div> <p> ); } });</p> <p> var converter = <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> Showdown.converter(); var Comment = React.createClass({ render: function() {</p> <p> // 通过<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.children访问元素的子元素 var rawHtml = converter.makeHtml(this.props.children.<a href="http://www.js-code.com/tag/toString" title="toString" target="_blank">toString</a>()); return ( // 通过this.props访问元素的属性 // 不转义,直接插入纯<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a></p> <div className=&quot;comment&quot;> <h2 className=&quot;commentAuthor&quot;>{this.props.author}</h2> <p> <span dangerouslySetInnerHTML={{__html: rawHtml}} ></span> </div> <p> ); } });</p> <p>var CommentForm = React.createClass({ handleSubmit: function(e) {</p> <p> e.pr<a href="http://www.js-code.com/tag/event" title="event" target="_blank">event</a>Default(); // e.returnValue = <a href="http://www.js-code.com/tag/false" title="false" target="_blank">false</a>; var author = this.refs.author.getDOMNode().value.trim(); var text = this.refs.text.getDOMNode().value.trim();</p> <p> <a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>(!text || !author) return;</p> <p> this.props.onCommentSubmit({author: author, text: text});</p> <p> // 获取原生DOM元素 this.refs.author.getDOMNode().value = ''; this.refs.text.getDOMNode().value = ''; }, render: function() { return ( // 为元素添加<a href="http://www.js-code.com/tag/submit" title="submit" target="_blank">submit</a>事件处理程序 // 用ref为子组件命名,并可以在this.refs中引用</p> <form className=&quot;commentForm&quot; onSubmit={this.handleSubmit}> <input type=&quot;text&quot; placeholder=&quot;Your name&quot; ref=&quot;author&quot;/> <input type=&quot;text&quot; placeholder=&quot;Say something...&quot; ref=&quot;text&quot;/> <input type=&quot;submit&quot; value=&quot;Post&quot;/> </form> <p> ); } });</p> <p> // render方法创建组件的根元素,并注入到DOM元素中(第二个参数) React.render( <CommentBox ></CommentBox>, document.getElementById('content') );</p> <p> </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>&lt;script type=<span class="hljs-string">"text/jsx"</span>&gt; <span class="hljs-keyword">var</span> data = [ {<span class="hljs-attr">author</span>: <span class="hljs-string">"Pete Hunt"</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">"This is one comment"</span>}, {<span class="hljs-attr">author</span>: <span class="hljs-string">"Jordan Walke"</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">"This is *another* comment"</span>}, {<span class="hljs-attr">author</span>: <span class="hljs-string">"Huanglw"</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">"I like JavaScript"</span>} ]; <span class="hljs-comment">// 创建<a href="http://www.js-code.com/tag/react%e7%bb%84%e4%bb%b6" title="浏览关于“React组件”的文章" target="_blank" class="tag_link">React组件</a></span> <span class="hljs-keyword">var</span> CommentBox = React.createClass({ <span class="hljs-comment">// 在组件的生命周期中仅执行一次,用于设置初始状态</span> getInitial<a href="http://www.js-code.com/tag/state" title="浏览关于“State”的文章" target="_blank" class="tag_link">State</a>: <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-attr">data</span>: []}; }, <span class="hljs-attr">onCommentSubmit</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">comment</span>) </span>{ data.push(comment); <span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>; <a href="http://www.js-code.com/tag/setTimeout" title="浏览关于“setTimeout”的文章" target="_blank" class="tag_link">setTimeout</a>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// 动态更新state</span> self.<a href="http://www.js-code.com/tag/setstate" title="浏览关于“setState”的文章" target="_blank" class="tag_link">setState</a>({<span class="hljs-attr">data</span>: data}); }, <span class="hljs-number">500</span>); }, <span class="hljs-comment">// 当组件render完成后自动被调用</span> componentDidMount: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> self = <span class="hljs-keyword">this</span>; setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// 动态更新state</span> self.setState({<span class="hljs-attr">data</span>: data}); }, <span class="hljs-number">2000</span>); }, <span class="hljs-attr">render</span>: <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-comment">// 并非是真正的DOM元素,是React的div组件,默认具有XSS保护</span> &lt;div className=<span class="hljs-string">"commentBox"</span>&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Comments<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span> &lt;CommentList data={<span class="hljs-keyword">this</span>.state.data} /&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">CommentForm</span> <span class="hljs-attr">onCommentSubmit</span>=<span class="hljs-string">{this.onCommentSubmit}</span> /&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> ); } }); <span class="hljs-keyword">var</span> CommentList = React.createClass({ <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> commentNodes = <span class="hljs-keyword">this</span>.props.data.map(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">comment</span>) </span>{ <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Comment</span> <span class="hljs-attr">author</span>=<span class="hljs-string">{comment.author}</span>&gt;</span> {comment.text} <span class="hljs-tag">&lt;/<span class="hljs-name">Comment</span>&gt;</span></span> ); }); <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"commentList"</span>&gt;</span> {commentNodes} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> ); } }); <span class="hljs-keyword">var</span> converter = <span class="hljs-keyword">new</span> Showdown.converter(); <span class="hljs-keyword">var</span> Comment = React.createClass({ <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-comment">// 通过this.props.children访问元素的子元素</span> <span class="hljs-keyword">var</span> rawHtml = converter.makeHtml(<span class="hljs-keyword">this</span>.props.children.<a href="http://www.js-code.com/tag/toString" title="浏览关于“toString”的文章" target="_blank" class="tag_link">toString</a>()); <span class="hljs-keyword">return</span> ( <span class="hljs-comment">// 通过this.props访问元素的属性</span> <span class="hljs-comment">// 不转义,直接插入纯<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a></span> &lt;div className=<span class="hljs-string">"comment"</span>&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"commentAuthor"</span>&gt;</span>{this.props.author}<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span> &lt;span dangerouslySetInnerHTML={{<span class="hljs-attr">__html</span>: rawHtml}} /&gt; <span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> ); } }); <span class="hljs-keyword">var</span> CommentForm = React.createClass({ <span class="hljs-attr">handleSubmit</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ e.pr<a href="http://www.js-code.com/tag/event" title="浏览关于“event”的文章" target="_blank" class="tag_link">event</a>Default(); <span class="hljs-comment">// e.returnValue = <a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a>;</span> <span class="hljs-keyword">var</span> author = <span class="hljs-keyword">this</span>.refs.author.getDOMNode().value.trim(); <span class="hljs-keyword">var</span> text = <span class="hljs-keyword">this</span>.refs.text.getDOMNode().value.trim(); <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span>(!text || !author) <span class="hljs-keyword">return</span>; <span class="hljs-keyword">this</span>.props.onCommentSubmit({<span class="hljs-attr">author</span>: author, <span class="hljs-attr">text</span>: text}); <span class="hljs-comment">// 获取原生DOM元素</span> <span class="hljs-keyword">this</span>.refs.author.getDOMNode().value = <span class="hljs-string">''</span>; <span class="hljs-keyword">this</span>.refs.text.getDOMNode().value = <span class="hljs-string">''</span>; }, <span class="hljs-attr">render</span>: <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-comment">// 为元素添加<a href="http://www.js-code.com/tag/submit" title="浏览关于“submit”的文章" target="_blank" class="tag_link">submit</a>事件处理程序</span> <span class="hljs-comment">// 用ref为子组件命名,并可以在this.refs中引用</span> &lt;<a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a> className=<span class="hljs-string">"commentForm"</span> onSubmit={<span class="hljs-keyword">this</span>.handleSubmit}&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Your name"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"author"</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Say something..."</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"text"</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Post"</span>/&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name"><a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>m</span>&gt;</span> ); } }); // render方法创建组件的根元素,并注入到DOM元素中(第二个参数) React.render( <span class="hljs-tag">&lt;<span class="hljs-name">CommentBox</span> /&gt;</span>, document.getElementById('content') ); <span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </span></code></pre> <p>写文章不易,主要是作为自己学习的笔记,又恐有遗漏不对的地方误导了像我一样的初学者。内心惶恐啊,所以如有不对的地方还望大家指正,我必然及时更正。</p> <p></code></p>

总结

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

react入门学习笔记(一)

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

react入门学习笔记(一)

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

80%的人都看过