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

前端之React实战-快速入门以及集成使用

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">Quick Start</h1> <h2 id="articleHeader1">HelloWorld</h2> <p>基本的<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</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="<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 /> <script src=&quot;../build/react.js&quot;></script><br /> <script src=&quot;../build/JSXTransformer.js&quot;></script><br /> </head><br /> <body></p> <div id=&quot;example&quot;></div> <p> <script type=&quot;text/jsx&quot;> // ** Our code goes here! ** </script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"> <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">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/<a href="http://www.js-code.com/tag/jsx" title="浏览关于“JSX”的文章" target="_blank" class="tag_link">JSX</a>Trans<a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a>er.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>/jsx"</span>&gt;</span><span class="actionscript"> <span class="hljs-comment">// ** Our code goes here! **</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><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>独创了一种JS、<a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a>和<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>混写的<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>Trans<a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a>mer这个文件进行客户端的编译,不过还是推荐在服务端编译。</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>="<a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> HelloMessage = <a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a>.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> <div>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>}</div> <p>;<br /> }<br /> });</p> <p>React.render(<br /> <HelloMessage name=&quot;John&quot; ></HelloMessage>,<br /> document.getElementById('container')<br /> );" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> HelloMessage = 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">div</span>&gt;</span>Hello {<a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.props.<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>; } }); React.render( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">HelloMessage</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"John"</span> /&gt;</span>, <a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a>.getElementById('conta<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>er') );</span></code></pre> <p>React.render 是 React 的最基本方法,用于将模板转为 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 语言,并插入指定的 <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> 节点。要注意的是,React的渲染函数并不是简单地把<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>元素复制到页面上,而是维护了一张Virtual 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="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="class ExampleComponent extends React.Component { constructor() { super(); this. _handleClick = this. _handleClick.bind(this); this.state = Store.getState(); } // ... }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ExampleComponent</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/extends" title="浏览关于“extends”的文章" target="_blank" class="tag_link">extends</a></span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/constructor" title="浏览关于“constructor”的文章" target="_blank" class="tag_link">constructor</a></span>() { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/super" title="浏览关于“super”的文章" target="_blank" class="tag_link">super</a></span>(); <span class="hljs-keyword">this</span>. _handleClick = <span class="hljs-keyword">this</span>. _handleClick.bind(<span class="hljs-keyword">this</span>); <span class="hljs-keyword">this</span>.state = Store.get<a href="http://www.js-code.com/tag/state" title="浏览关于“State”的文章" target="_blank" class="tag_link">State</a>(); } <span class="hljs-comment">// ...</span> }</code></pre> <h2 id="articleHeader2">Setup:开发环境搭建</h2> <p>完整的React开发环境应该包括了JSX/ES6的解析以及模块化管理,笔者在这里是选用了WebPack与Babel。Webpack是一个强大的包管理以及编译工具,</p> <blockquote> <p>参考资料</p> <ul> <li> <p>react-webpack-cookbook</p> </li> </ul> </blockquote> <h3 id="articleHeader3">Webpack</h3> <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="Webpack是一个非常强大依赖管理与打包工具,其基本的配置方式可以如下: " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code>Webpack是一个非常强大依赖管理与打包工具,其基本的配置方式可以如下: </code></pre> <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="var path = require('path'); var node_modules = path.resolve(__dirname, 'node_modules'); var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js'); config = { entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/main.js')], resolve: { alias: { 'react': pathToReact } }, output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js', }, module: { loaders: [{ test: /.jsx?$/, loader: 'babel' }], noParse: [pathToReact] } }; module.exports = config;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">var</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-keyword">var</span> <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules = path.resolve(__dirname, <span class="hljs-string">'node_modules'</span>); <span class="hljs-keyword">var</span> pathToReact = path.resolve(node_modules, <span class="hljs-string">'react/dist/react.min.js'</span>); config = { <span class="hljs-attr">en<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a></span>: [<span class="hljs-string">'webpack/hot/dev-server'</span>, path.resolve(__dirname, <span class="hljs-string">'app/main.js'</span>)], <span class="hljs-attr">resolve</span>: { <span class="hljs-attr">alias</span>: { <span class="hljs-string">'react'</span>: pathToReact } }, <span class="hljs-attr">output</span>: { <span class="hljs-attr">path</span>: path.resolve(__dirname, <span class="hljs-string">'build'</span>), <span class="hljs-attr">filename</span>: <span class="hljs-string">'bundle.js'</span>, }, <span class="hljs-attr">module</span>: { <span class="hljs-attr">loaders</span>: [{ <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.jsx?$/</span>, <span class="hljs-attr">loader</span>: <span class="hljs-string">'<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>'</span> }], <span class="hljs-attr">noParse</span>: [pathToReact] } }; <span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = config;</code></pre> <h3 id="articleHeader4">Project Structure:项目结构</h3> <p>一个典型的项目结构你可以参考<a href="https://github.com/RisingStack/react-way-getting-started" rel="nofollow noreferrer" target="_blank">这个仓库</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="config/ app.js webpack.js (js config over json -> flexible)<br /> src/<br /> app/ (the React app: runs on server and client too)<br /> components/<br /> __tests__ (Jest test folder)<br /> AppRoot.jsx<br /> Cart.jsx<br /> Item.jsx<br /> index.js (just to export app)<br /> app.js<br /> client/ (only browser: attach app to DOM)<br /> styles/<br /> scripts/<br /> client.js<br /> index.html<br /> server/<br /> index.js<br /> server.js<br /> .gitignore<br /> .jshintrc<br /> package.json<br /> README.md" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs fortran"><code>config/ app.js webpack.js (js config over json -&gt; <a href="http://www.js-code.com/tag/flex" title="浏览关于“flex”的文章" target="_blank" class="tag_link">flex</a>ible) src/ app/ (the React app: runs on server and client too) components/ __tests__ (Jest test folder) AppRoot.jsx Cart.jsx Item.jsx <span class="hljs-built_in">index</span>.js (just to export app) app.js client/ (<span class="hljs-keyword">only</span> browser: attach app to <a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>) styles/ scripts/ client.js <span class="hljs-built_in">index</span>.html server/ <span class="hljs-built_in">index</span>.js server.js .gitignore .jsh<a href="http://www.js-code.com/tag/int" title="浏览关于“int”的文章" target="_blank" class="tag_link">int</a>rc <a href="http://www.js-code.com/tag/package" title="浏览关于“package”的文章" target="_blank" class="tag_link">package</a>.json README.md</code></pre> <h2 id="articleHeader5">Integrated With <a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a></h2> <p><a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>与React是笔者喜欢的两个框架,二者可以相辅相成。可以查看笔者的这个库。</p> <h2 id="articleHeader6">Integrated With <a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a></h2> <h2 id="articleHeader7">ES6</h2> <blockquote> <p><a href="http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes" rel="nofollow noreferrer" target="_blank">refactoring-react-components-to-es6-classes</a></p> </blockquote> <p>ES6是一门非常让人兴奋的语言,而React自身的譬如JSX这样的语法也是别具特色,笔者一贯坚持从现在开始就广泛使用ES6。而在React的实践编程中,如果需要完全使用ES6语法进行开发,需要注意以下几点。</p> <h3 id="articleHeader8">使用<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>代替createClass</h3> <ul> <li> <p>Be<a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a>e</p> </li> </ul> <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="<a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> ExampleComponent = React.createClass({<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> <div onClick={this._handleClick}>Hello, world.</div> <p>;<br /> },<br /> _handleClick: function() {<br /> console.log(this);<br /> }<br /> });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">var</span> ExampleComponent = 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">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this._handleClick}</span>&gt;</span>Hello, world.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>; }, <span class="hljs-attr">_handleClick</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>); } });</code></pre> <ul> <li> <p>After,这里要注意将类的方法绑定到当前对象,避免在方法内部<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>指针被覆盖</p> </li> </ul> <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="class ExampleComponent <a href="http://www.js-code.com/tag/extends" title="extends" target="_blank">extends</a> React.Component {<br /> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a>ructor() {<br /> <a href="http://www.js-code.com/tag/super" title="super" target="_blank">super</a>();<br /> <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>. _handleClick = <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>. _handleClick.b<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>d(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>);<br /> }<br /> render() {<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> </p> <div onClick={this._handleClick}>Hello, world.</div> <p>;<br /> }<br /> _handleClick() {<br /> console.log(this); // this is an ExampleComponent<br /> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ExampleComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a>ructor</span>() { <span class="hljs-keyword">super</span>(); <span class="hljs-keyword">this</span>. _handleClick = <span class="hljs-keyword">this</span>. _handleClick.bind(<span class="hljs-keyword">this</span>); } render() { <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{this._handleClick}</span>&gt;</span>Hello, world.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>; } _handleClick() { <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>); <span class="hljs-comment">// this is an ExampleComponent</span> } }</code></pre> <h3 id="articleHeader9">在Constructor中初始化<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a></h3> <p>如果使用createClass方法创建一个Component组件,可以自动调用它的getInitial<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>方法来获取初始化的State对象,但是在ES6的Class中并不会如此自动调用,因此,要稍作修改。</p> <ul> <li> <p>Be<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>e</p> </li> </ul> <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="class ExampleComponent extends React.Component { getInitialState() { return Store.getState(); } constructor() { super(); this. _handleClick = this. _handleClick.bind(this); } // ... }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ExampleComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{ getInitialState() { <span class="hljs-keyword">return</span> Store.getState(); } <span class="hljs-keyword">constructor</span>() { <span class="hljs-keyword">super</span>(); <span class="hljs-keyword">this</span>. _handleClick = <span class="hljs-keyword">this</span>. _handleClick.bind(<span class="hljs-keyword">this</span>); } <span class="hljs-comment">// ...</span> }</code></pre> <ul> <li> <p>After</p> </li> </ul> <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="class ExampleComponent extends React.Component { constructor() { super(); this. _handleClick = this. _handleClick.bind(this); this.state = Store.getState(); } // ... }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ExampleComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{ <span class="hljs-keyword">constructor</span>() { <span class="hljs-keyword">super</span>(); <span class="hljs-keyword">this</span>. _handleClick = <span class="hljs-keyword">this</span>. _handleClick.bind(<span class="hljs-keyword">this</span>); <span class="hljs-keyword">this</span>.state = Store.getState(); } <span class="hljs-comment">// ...</span> }</code></pre> <h3 id="articleHeader10">Mix<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a></h3> <p>Mixin是React中非常好用的一个功能,但是ES6提倡的面向对象,即使用类继承等方式来进行传递。如果需要在ES6中继续使用Mixin,特别是大量现存的React Library中的Mixin功能,可以有以下几种方式:</p> <ul> <li> <p>使用<a href="http://www.js-code.com/tag/extends" title="extends" target="_blank">extends</a>继承,然后在对应方法中调用父类方法。</p> </li> <li> <p>参考<a href="https://github.com/brigand/react-mixin" rel="nofollow noreferrer" target="_blank">react-mixin</a>这个库。</p> </li> </ul> <p></code></p>

总结

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

前端之React实战-快速入门以及集成使用

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

前端之React实战-快速入门以及集成使用

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

80%的人都看过