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

React(1)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>入门</h2> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a> 是一个用于构建用户界面的 JAVASCRIPT 库。有以下特点:<br />&nbsp;&nbsp;&nbsp;1.声明式设计 −<a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a>采用声明范式,可以轻松描述应用。<br />&nbsp;&nbsp;&nbsp;2.高效 −React通过对<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 />&nbsp;&nbsp;&nbsp;3.灵活 −React可以与已知的库或框架很好地配合。<br />&nbsp;&nbsp;&nbsp;4.<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a> − <a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a> 是 JavaScript 语法的扩展。React 开发不一定使用 <a href="http://www.js-code.com/tag/jsx" title="浏览关于“JSX”的文章" target="_blank" class="tag_link">JSX</a> ,但速度快。<br />&nbsp;&nbsp;&nbsp;5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。<br />&nbsp;&nbsp;&nbsp;6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。</p> <p>Hello world例子:</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>="<!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=&quot;UTF-8&quot; /><br /> <title>Hello React!</title><br /> <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 /> </head><br /> <body></p> <div id=&quot;example&quot;></div> <p> <script type=&quot;text/babel&quot;> React<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>.render(</p> <h1>Hello, world!</h1> <p>, <a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>cument.getElementById('example') ); </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <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>Hello React!<span class="hljs-tag">&lt;/<span class="hljs-name">title</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.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> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <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">type</span>=<span class="hljs-string">"<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>/babel"</span>&gt;</span><span class="javascript"> ReactDOM.render( <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>, <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> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bVWDSq?w=735&amp;h=449" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>实例中我们引入了三个库: react.m<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>.js 、react-<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m.m<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>.js 和 <a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>.min.js:<br />react.min.js - React 的核心库<br />react-dom.min.js - 提供与 DOM 相关的功能<br /><a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(<a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>)一同使用可以让源码的语法渲染上升到一个全新的水平。</p> <p><strong>JSX语法:</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="<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>=" ReactDOM.render(</p> <h1>Hello, world!</h1> <p>,<br /> document.getElementById('example')<br /> );" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code> ReactDOM.render( <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>, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example'</span>) );</code></pre> <p>上述代码为获取id 为example的标签 添加render里写的html标签或者执行js</p> <p>props -&gt; properties 属性们<br /> render -&gt; 渲染<br /> ReactDom.render(实例化的组件,要渲染到得对象)</p> <p>我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。如下:</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="ReactDOM.render(</p> <div> <h1>{<a href="http://www.js-code.com/tag/alert" title="alert" target="_blank">alert</a>(1)}</h1> </p></div> <p> ,<br /> document.getElementById('example')<br /> );" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{<a href="http://www.js-code.com/tag/alert" title="浏览关于“alert”的文章" target="_blank" class="tag_link">alert</a>(1)}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> , <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example'</span>) );</code></pre> <p>在 JSX 中不能使用 <a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a> <a href="http://www.js-code.com/tag/else" title="else" target="_blank">else</a> 语句,但可以使用 conditional (三元运算) 表达式来替代。</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="ReactDOM.render( <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </p></div> <p> ,<br /> document.getElementById('example')<br /> );<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{i == 1 ? 'True!' : 'False'}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> , <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example'</span>) ); </code></pre> <p>React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px :</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="<a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> style = {<br /> background-color: blue;<br /> };<br /> ReactDOM.render(</p> <h1 style = {style}>hello</h1> <p>,<br /> document.getElementById('example')<br /> );" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> style = { background-color: blue; }; ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">style</span> = <span class="hljs-string">{style}</span>&gt;</span>hello<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'example'</span>) );</code></pre> <p>React 通过React.create<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>新建组件,如果我们需要向组件传递参数,可以使用 <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.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="<a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> HelloWorld = 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.world}!</h1> <p>;<br /> }<br /> });</p> <p>ReactDOM.render(<br /> <HelloWorld world=&quot;World&quot;></HelloWorld>,<br /> document.getElementById('example')<br /> );" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">var</span> HelloWorld = 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"><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> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello {<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.props.world}!<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">HelloWorld</span> <span class="hljs-attr">world</span>=<span class="hljs-string">"World"</span>/&gt;</span>, document.getElementById('example') );</span></code></pre> <p>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="<!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=&quot;UTF-8&quot; /><br /> <title>Hello React!</title><br /> <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 /> </head><br /> <body></p> <div id=&quot;example&quot; style=&quot;background-color: blue&quot;></div> <p> <script type=&quot;text/babel&quot;> var Item = React.createClass({ render: <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>() { <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> (</p> <h1>{<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.item}</h1> <p> ); } });</p> <p>var Pic = React.createClass({ render: <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>() { <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> ( <img src={this.props.src}/> ); } });</p> <p>var List = React.createClass({ render: <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>() { <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> (</p> <div> <Item item={this.props.item} ></Item> <Pic src={this.props.src} ></Pic> </div> <p> ); } });</p> <p> ReactDOM.render( <List item=&quot;hello react&quot; src=&quot;http://www.ruanyifeng.com/blogimg/asset/2016/bg2016021201.png&quot;></List>, <a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.getElementById('example') ); </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Hello React!<span class="hljs-tag">&lt;/<span class="hljs-name">title</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.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/react/15.4.2/react-dom.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/babel-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> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-color: blue"</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">type</span>=<span class="hljs-string">"text/babel"</span>&gt;</span><span class="actionscript"> <span class="hljs-keyword">var</span> Item = React.createClass({ render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">return</span> ( &lt;h1&gt;{<span class="hljs-keyword">this</span>.props.item}&lt;/h1&gt; ); } }); <span class="hljs-keyword">var</span> Pic = React.createClass({ render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">return</span> ( &lt;img src={<span class="hljs-keyword">this</span>.props.src}/&gt; ); } }); <span class="hljs-keyword">var</span> List = React.createClass({ render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">return</span> ( &lt;div&gt; &lt;Item item={<span class="hljs-keyword">this</span>.props.item} /&gt; &lt;Pic src={<span class="hljs-keyword">this</span>.props.src} /&gt; &lt;/div&gt; ); } }); ReactDOM.render( &lt;List item=<span class="hljs-string">"hello react"</span> src=<span class="hljs-string">"http://www.ruany<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>eng.com/blogimg/asset/2016/bg2016021201.png"</span>&gt;&lt;/List&gt;, document.getElementById(<span class="hljs-string">'example'</span>) ); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bVWD0G?w=1365&amp;h=507" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;React 把组件看成是一个状态机(<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a> Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。<br />React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。<br />以下实例中创建了 LikeButton 组件,getInitial<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a> 方法用于定义初始状态,也就是一个对象,这个对象可以通过 <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.state 属性读取。当用户点击组件,导致状态变化,<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.<a href="http://www.js-code.com/tag/setstate" title="setState" target="_blank">setState</a> 方法就修改状态值,每次修改以后,自动调用 <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.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="<!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=&quot;UTF-8&quot; /><br /> <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 /> </head><br /> <body></p> <div id=&quot;example&quot;></div> <p> <script type=&quot;text/babel&quot;> var LikeButton = React.createClass({ getInitial<a href="http://www.js-code.com/tag/state" title="浏览关于“State”的文章" target="_blank" class="tag_link">State</a>: function() { return {liked: <a href="http://www.js-code.com/tag/false" title="false" target="_blank">false</a>}; }, handleClick: function(<a href="http://www.js-code.com/tag/event" title="event" target="_blank">event</a>) { this.<a href="http://www.js-code.com/tag/setstate" title="setState" target="_blank">setState</a>({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ? '喜欢' : '不喜欢'; return (</p> <p onClick={this.handleClick}> 你<b>{text}</b>我。点我切换状态。 </p> <p> ); } });</p> <p> ReactDOM.render( <LikeButton ></LikeButton>, <a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.getElementById('example') ); </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</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.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/react/15.4.2/react-dom.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/babel-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> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</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">type</span>=<span class="hljs-string">"text/babel"</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">var</span> LikeButton = React.createClass({ <span class="hljs-attr">getInitialState</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-attr">liked</span>: <span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span>}; }, <span class="hljs-attr">handleClick</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"><a href="http://www.js-code.com/tag/event" title="浏览关于“event”的文章" target="_blank" class="tag_link">event</a></span>) </span>{ <span class="hljs-keyword">this</span>.<a href="http://www.js-code.com/tag/setstate" title="浏览关于“setState”的文章" target="_blank" class="tag_link">setState</a>({<span class="hljs-attr">liked</span>: !<span class="hljs-keyword">this</span>.state.liked}); }, <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> text = <span class="hljs-keyword">this</span>.state.liked ? <span class="hljs-string">'喜欢'</span> : <span class="hljs-string">'不喜欢'</span>; <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this.handleClick}</span>&gt;</span> 你<span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>{text}<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span>我。点我切换状态。 <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span> ); } }); ReactDOM.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">LikeButton</span> /&gt;</span>, document.getElementById('example') ); </span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p></code></p>

总结

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

React(1)

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

React(1)

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

80%的人都看过