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

React学习笔记知识点整理

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h2 id="articleHeader0">1. 几个重要概念理解</h2> <ul> <li> <p>模块与组件</p> <ul> <li> <p>模块:</p> <ul> <li>理解: 向外提供特定(局部)功能的js程序, 一般就是一个js文件</li> <li>为什么: js代码更多更复杂</li> <li>作用: 复用js, 简化js的编写, 提高js运行效率</li> </ul> </li> <li> <p>组件:</p> <ul> <li>理解: 用来实现特定功能效果的代码集合(html/css/js)</li> <li>为什么: 一个界面的功能更复杂</li> <li>作用: 复用编码, 简化项目编码, 提高运行效率</li> </ul> </li> </ul> </li> <li> <p>模块化与组件化</p> <ul> <li> <p>模块化:</p> <ul> <li>当应用的js都以模块来编写的, 这个应用就是一个模块化的应用</li> </ul> </li> <li> <p>组件化:</p> <ul> <li>当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用</li> </ul> </li> </ul> </li> </ul> <h2 id="articleHeader1">2. <a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>的基本认识</h2> <ul> <li>Facebook开源的一个js库</li> <li>一个用来动态构建用户界面的js库</li> <li> <p><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>的特点</p> <ul> <li>Declarative(声明式编码)</li> <li>Component-Based(组件化编码)</li> <li>Learn Once, Write Anywhere(支持客户端与服务器渲染)</li> <li>高效</li> <li>单向数据流</li> </ul> </li> <li> <p><a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a>高效的原因</p> <ul> <li>虚拟(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>(批量更新, 减少更新的次数)</li> <li>高效的<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a> D<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>f算法, 最小化页面重绘(减小页面更新的区域)</li> </ul> </li> </ul> <h2 id="articleHeader2">3. 使用React</h2> <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>="* 导入相关js库文件(react.js, react-<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/babel" title="babel" target="_blank">babel</a>.m<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>.js)<br /> * 编码:<br /> ```</p> <div id=&quot;container&quot;></div> <p> <script type=&quot;text/babel&quot;> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> aa = 123 ReactDOM.render(</p> <h1>{aa}</h1> <p>, conta<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>erDOM); </script><br /> ```" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>* 导入相关js库文件(react.js, react-<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>m.js, <a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>.m<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>.js) * 编码: ``` <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">"container"</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"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> aa = <span class="hljs-number">123</span> ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>{aa}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>, containerDOM); </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> ```</code></pre> <h2 id="articleHeader3">4. <a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a></h2> <ul> <li>全称: JavaScript XML</li> <li> <p>react定义的一种类似于XML的JS扩展语法: XML+JS</p> <ul> <li> <p>作用: 用来创建react虚拟DOM(元素)对象</p> <ul> <li>js中直接可以套标签, 但标签要套js需要放在{}中</li> <li>在解析显示js<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>时, 会自动遍历显示</li> <li> <p>把数据的<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>转换为标签的<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</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>="<a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> liArr = dataArr.map(<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(item, index){<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> </p> <li key={index}>{item}</li> <p>})" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">var</span> liArr = dataArr.map(<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">item, index</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">li</span> <span class="hljs-attr">key</span>=<span class="hljs-string">{index}</span>&gt;</span>{item}<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span> })</code></pre> </li> </ul> </li> </ul> </li> <li> <p>注意:</p> <ul> <li>标签必须有结束</li> <li>标签的class属性必须改为className属性</li> <li>标签的style属性值必须为: {{color:'red', width:12}}</li> </ul> </li> </ul> <h2 id="articleHeader4">5. Component : React是面向组件编程的(组件化编码开发)</h2> <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="* 基本理解和使用<br /> * 自定义的标签: 组件类(函数)/标签<br /> * 创建组件类<br /> ```<br /> //方式1: 无状态函数(最简洁, 推荐使用)<br /> <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> MyComponent1() {<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> </p> <h1>自定义组件标题11111</h1> <p>;<br /> }<br /> //方式2: ES6类语法(复杂组件, 推荐使用)<br /> class MyComponent3 <a href="http://www.js-code.com/tag/extends" title="extends" target="_blank">extends</a> React.Component {<br /> render () {<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> </p> <h1>自定义组件标题33333</h1> <p>;<br /> }<br /> }<br /> //方式3: ES5老语法(不推荐使用了)<br /> var MyComponent2 = React.create<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>({<br /> render () {<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> </p> <h1>自定义组件标题22222</h1> <p>;<br /> }<br /> });<br /> ```<br /> * 渲染组件标签<br /> ```<br /> ReactDOM.render(<MyComp ></MyComp>, cotainerEle);<br /> ```<br /> * ReactDOM.render()渲染组件标签的基本流程<br /> * React内部会创建组件实例对象/调用组件函数, 得到虚拟DOM对象<br /> * 将虚拟DOM并解析为真实DOM<br /> * 插入到指定的页面元素内部<br /> * props<br /> * 所有组件标签的属性的集合对象<br /> * 给标签指定属性, 保存外部数据(可能是一个<a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>)<br /> * 在组件内部读取属性: <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.propertyName<br /> * 作用: 从目标组件外部向组件内部传递数据<br /> * 对props中的属性值进行类型限制和必要性限制<br /> ```<br /> Person.propTypes = {<br /> <a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>: React.<a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>Types.string.isRequired,<br /> age: React.<a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>Types.number.isRequired<br /> }<br /> ```<br /> * 扩展属性: 将对象的所有属性通过props传递<br /> ```<br /> <Person {...person}></Person><br /> ```<br /> * 组件的组合<br /> * 组件标签中包含子组件标签<br /> * 拆分组件: 拆分界面, 抽取组件<br /> * 通过props传递数据<br /> * refs<br /> * 组件内包含ref属性的标签元素的集合对象<br /> * 给操作目标标签指定ref属性, 打一个标识<br /> * 在组件内部获得标签对象: this.refs.refName(只是得到了标签元素对象)<br /> * 作用: 操作组件内部的真实标签dom元素对象<br /> * 事件处理<br /> * 给标签添加属性: onXxx={this.eventHandler}<br /> * 在组件中添加事件处理方法<br /> ```<br /> eventHandler(event) {</p> <p> }<br /> ```<br /> * 使自定义方法中的this为组件对象<br /> * 在constructor()中bind(this)<br /> * 使用箭头函数定义方法(ES6模块化编码时才能使用)<br /> * state<br /> * 组件被称为&quot;状态机&quot;, 页面的显示是根据组件的state属性的数据来显示<br /> * 初始化指定:<br /> ```<br /> constructor() {<br /> super();<br /> this.state = {<br /> stateName1 : stateValue1,<br /> stateName2 : stateValue2<br /> };<br /> }<br /> ```<br /> * 读取显示:<br /> this.state.stateName1<br /> * 更新状态-->更新界面 :<br /> this.setState({stateName1 : newValue})<br /> * 实现一个双向绑定的组件<br /> * React是单向数据流<br /> * 需要通过onChange监听手动实现<br /> * 组件生命周期<br /> * 组件的三个生命周期状态:<br /> * Mount:插入真实 DOM<br /> * Update:被重新渲染<br /> * Unmount:被移出真实 DOM<br /> * 生命周期流程:<br /> * 第一次初始化显示<br /> ```<br /> constructor()<br /> componentWillMount() : 将要插入回调<br /> render() : 用于插入虚拟DOM回调<br /> componentDidMount() : 已经插入回调<br /> ```<br /> * 每次更新state<br /> ```<br /> componentWillReceiveProps(): 接收父组件新的属性<br /> componentWillUpdate() : 将要更新回调<br /> render() : 更新(重新渲染)<br /> componentDidUpdate() : 已经更新回调<br /> ```<br /> * 删除组件<br /> ```<br /> ReactDOM.unmountComponentAtNode(document.getElementById('example')) : 移除组件<br /> componentWillUnmount() : 组件将要被移除回调<br /> ```<br /> * 常用的方法<br /> ```<br /> render(): 必须重写, 返回一个自定义的虚拟DOM<br /> constructor(): 初始化状态, 绑定this(可以箭头函数代替)<br /> componentDidMount() : 只执行一次, 已经在dom树中, 适合启动/设置一些监听<br /> ``` " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>* 基本理解和使用 * 自定义的标签: 组件类(函数)/标签 * 创建组件类 <span class="hljs-string">``</span><span class="hljs-string">` //方式1: 无状态函数(最简洁, 推荐使用) function MyComponent1() { return &lt;h1&gt;自定义组件标题11111&lt;/h1&gt;; } //方式2: ES6类语法(复杂组件, 推荐使用) class MyComponent3 <a href="http://www.js-code.com/tag/extends" title="浏览关于“extends”的文章" target="_blank" class="tag_link">extends</a> React.Component { render () { return &lt;h1&gt;自定义组件标题33333&lt;/h1&gt;; } } //方式3: ES5老语法(不推荐使用了) var MyComponent2 = React.create<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>({ render () { return &lt;h1&gt;自定义组件标题22222&lt;/h1&gt;; } }); `</span><span class="hljs-string">``</span> * 渲染组件标签 <span class="hljs-string">``</span><span class="hljs-string">` ReactDOM.render(&lt;MyComp /&gt;, cotainerEle); `</span><span class="hljs-string">``</span> * ReactDOM.render()渲染组件标签的基本流程 * React内部会创建组件实例对象/调用组件函数, 得到虚拟DOM对象 * 将虚拟DOM并解析为真实DOM * 插入到指定的页面元素内部 * props * 所有组件标签的属性的集合对象 * 给标签指定属性, 保存外部数据(可能是一个<span class="hljs-function"><span class="hljs-keyword">function</span>) * 在组件内部读取属性: <span class="hljs-title"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.<span class="hljs-title">props</span>.<span class="hljs-title">propertyName</span> * 作用: 从目标组件外部向组件内部传递数据 * 对<span class="hljs-title">props</span>中的属性值进行类型限制和必要性限制 ``` <span class="hljs-title">Person</span>.<span class="hljs-title">propTypes</span> = </span>{ <a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>: React.<a href="http://www.js-code.com/tag/prop" title="浏览关于“Prop”的文章" target="_blank" class="tag_link">Prop</a>Types.string.isRequired, age: React.PropTypes.number.isRequired } <span class="hljs-string">``</span><span class="hljs-string">` * 扩展属性: 将对象的所有属性通过props传递 `</span><span class="hljs-string">``</span> &lt;Person {...person}/&gt; <span class="hljs-string">``</span><span class="hljs-string">` * 组件的组合 * 组件标签中包含子组件标签 * 拆分组件: 拆分界面, 抽取组件 * 通过props传递数据 * refs * 组件内包含ref属性的标签元素的集合对象 * 给操作目标标签指定ref属性, 打一个标识 * 在组件内部获得标签对象: this.refs.refName(只是得到了标签元素对象) * 作用: 操作组件内部的真实标签dom元素对象 * 事件处理 * 给标签添加属性: onXxx={this.<a href="http://www.js-code.com/tag/event" title="浏览关于“event”的文章" target="_blank" class="tag_link">event</a>Handler} * 在组件中添加事件处理方法 `</span><span class="hljs-string">``</span> eventHandler(event) { } <span class="hljs-string">``</span><span class="hljs-string">` * 使自定义方法中的this为组件对象 * 在<a href="http://www.js-code.com/tag/constructor" title="浏览关于“constructor”的文章" target="_blank" class="tag_link">constructor</a>()中bind(this) * 使用<a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="浏览关于“箭头函数”的文章" target="_blank" class="tag_link">箭头函数</a>定义方法(<a href="http://www.js-code.com/tag/es6%e6%a8%a1%e5%9d%97" title="浏览关于“ES6模块”的文章" target="_blank" class="tag_link">ES6模块</a>化编码时才能使用) * state * 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 * 初始化指定: `</span><span class="hljs-string">``</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-params"></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>.state = { stateName1 : stateValue1, stateName2 : stateValue2 }; } <span class="hljs-string">``</span><span class="hljs-string">` * 读取显示: this.state.stateName1 * 更新状态--&gt;更新界面 : this.<a href="http://www.js-code.com/tag/setstate" title="浏览关于“setState”的文章" target="_blank" class="tag_link">setState</a>({stateName1 : <a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a>Value}) * 实现一个<a href="http://www.js-code.com/tag/%e5%8f%8c%e5%90%91%e7%bb%91%e5%ae%9a" title="浏览关于“双向绑定”的文章" target="_blank" class="tag_link">双向绑定</a>的组件 * React是单向数据流 * 需要通过onChange监听手动实现 * 组件生命周期 * 组件的三个生命周期状态: * Mount:插入真实 DOM * Update:被重新渲染 * Unmount:被移出真实 DOM * 生命周期流程: * 第一次初始化显示 `</span><span class="hljs-string">``</span> <span class="hljs-keyword">constructor</span>(<span class="hljs-params"></span>) <a href="http://www.js-code.com/tag/componentwillmount" title="浏览关于“componentWillMount”的文章" target="_blank" class="tag_link">componentWillMount</a>(<span class="hljs-params"></span>) : 将要插入回调 render(<span class="hljs-params"></span>) : 用于插入虚拟DOM回调 componentDidMount(<span class="hljs-params"></span>) : 已经插入回调 ``` * 每次更新state ``` componentWillReceiveProps(<span class="hljs-params"></span>): 接收父组件新的属性 componentWillUpdate(<span class="hljs-params"></span>) : 将要更新回调 render(<span class="hljs-params"></span>) : 更新(<span class="hljs-params">重新渲染</span>) componentDidUpdate(<span class="hljs-params"></span>) : 已经更新回调 ``` * 删除组件 ``` ReactDOM.unmountComponentAtNode(<span class="hljs-params"><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>) : 移除组件 componentWillUnmount(<span class="hljs-params"></span>) : 组件将要被移除回调 ``` * 常用的方法 ``` render(<span class="hljs-params"></span>): 必须重写, 返回一个自定义的虚拟DOM <span class="hljs-keyword">constructor</span>(<span class="hljs-params"></span>): 初始化状态, 绑定this(<span class="hljs-params">可以箭头函数代替</span>) componentDidMount(<span class="hljs-params"></span>) : 只执行一次, 已经在dom树中, 适合启动/设置一些监听 ``` </code></pre> <h2 id="articleHeader5">6. ajax</h2> <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没有ajax模块 * 集成其它的js库(如axios/fetch/jQuery/), 发送ajax请求 * axios * 封装XmlHttpRequest对象的ajax * promise * 可以用在浏览器端和服务器 * fetch * 不再使用XmlHttpRequest对象提交ajax请求 * fetch就是用来提交ajax请求的函数, 只是新的浏览才内置了fetch * 为了兼容低版本的浏览器, 可以引入fetch.js * 在哪个方法去发送ajax请求 * 只显示一次(请求一次): componentDidMount() * 显示多次(请求多次): componentWillReceiveProps() " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs markdown"><code><span class="hljs-bullet">* </span>React没有ajax模块 <span class="hljs-bullet">* </span>集成其它的js库(如ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a>/fetch/<a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a>/), 发送ajax请求 * axios <span class="hljs-code"> * 封装XmlHttpRequest对象的ajax</span> <span class="hljs-code"> * promise</span> <span class="hljs-code"> * 可以用在浏览器端和服务器</span> * fetch <span class="hljs-code"> * 不再使用XmlHttpRequest对象提交ajax请求</span> <span class="hljs-code"> * fetch就是用来提交ajax请求的函数, 只是新的浏览才内置了fetch</span> <span class="hljs-code"> * 为了兼容低版本的浏览器, 可以引入fetch.js</span> <span class="hljs-bullet">* </span>在哪个方法去发送ajax请求 * 只显示一次(请求一次): componentDidMount() * 显示多次(请求多次): componentWillReceiveProps() </code></pre> <h2 id="articleHeader6">7. 虚拟DOM</h2> <ul> <li> <p>虚拟DOM是什么?</p> <ul> <li>一个虚拟DOM(元素)是一个一般的js对象, 准确的说是一个对象树(倒立的)</li> <li>虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应</li> <li>如果只是更新虚拟DOM, 页面是不会重绘的</li> </ul> </li> <li> <p>Virtual DOM 算法的基本步骤</p> <ul> <li>用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中</li> <li>当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异</li> <li>把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了</li> </ul> </li> <li> <p>进一步理解</p> <ul> <li>Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。</li> <li>可以类比 CPU 和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存:既然 DOM 这么慢,我们就在它们 JS 和 DOM 之间加个缓存。CPU(JS)只操作内存(Virtual DOM),最后的时候再把变更写入硬盘(DOM)。</li> </ul> </li> </ul> <h2 id="articleHeader7">8. 使用React脚手架创建一个React应用</h2> <ul> <li> <p>react脚手架</p> <ul> <li> <p>xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的空项目的库</p> <ul> <li>包含了所有需要的配置</li> <li>指定好了所有的依赖</li> <li>可以直接安装/编译/运行一个简单效果</li> </ul> </li> <li>react提供了一个专门用于创建react项目的脚手架库: create-react-app</li> <li>项目的整体技术架构为: react + webpack + <a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a> + esl<a href="http://www.js-code.com/tag/int" title="int" target="_blank">int</a></li> </ul> </li> <li> <p>创建项目并启动</p> <ul> <li>npm inst<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a> -g create-react-app</li> <li>create-react-app hello-react</li> <li>cd hello-react</li> <li>npm start</li> </ul> </li> </ul> <h2 id="articleHeader8">9. app1: 实现一个评论管理功能</h2> <ul> <li> <p>拆分组件:</p> <ul> <li>应用组件: App</li> <li>添加评论组件: CommentAdd</li> <li>评论项组件: CommentItem</li> <li>评论列表组件: CommentList</li> </ul> </li> <li> <p>确定组件的state和props:</p> <ul> <li> <p>App:</p> <ul> <li>state: comments/array</li> </ul> </li> <li> <p>CommentAdd</p> <ul> <li>state: user<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>/string, content/string</li> <li>props: add/func</li> </ul> </li> <li> <p>commentList</p> <ul> <li>props: comments/array, de<a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a>e/func</li> </ul> </li> <li> <p>CommentItem</p> <ul> <li>props: comment/object, <a href="http://www.js-code.com/tag/delete" title="delete" target="_blank">delete</a>/func, index/number</li> </ul> </li> </ul> </li> <li> <p>编写静态组件</p> <ul> <li>拆分页面</li> <li>拆分css</li> </ul> </li> <li> <p>实现动态组件</p> <ul> <li> <p>动态展示初始化数据</p> <ul> <li>初始化状态数据</li> <li>传递属性数据</li> </ul> </li> <li> <p>响应用户操作, 更新组件界面</p> <ul> <li>绑定事件监听, 并处理</li> <li>更新state</li> </ul> </li> </ul> </li> </ul> <h2 id="articleHeader9">10. app2: 实现github用户搜索功能</h2> <ul> <li> <p>拆分组件</p> <ul> <li>App</li> <li>Search</li> <li>List</li> </ul> </li> <li> <p>确定组件的state和props</p> <ul> <li> <p>App</p> <ul> <li>state: searchName/string</li> </ul> </li> <li> <p>Search</p> <ul> <li>props: setSearchName/func</li> </ul> </li> <li> <p>List</p> <ul> <li>props: searchName/string</li> <li>state: firstView/bool, loading/bool, users/array, errMsg/string</li> </ul> </li> </ul> </li> <li>编写静态组件</li> <li> <p>编写动态组件</p> <ul> <li>componentWillReceiveProps(nextProps): 监视接收到新的props, 发送ajax</li> <li>使用ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a>库发送ajax请求</li> </ul> </li> </ul> <h2 id="articleHeader10">11. 组件间通信总结</h2> <ul> <li> <p>方式一: 通过props传递</p> <ul> <li>共同的数据放在父组件上, 特有的数据放在自己组件内部(state)</li> <li>通过props可以传递一般数据和函数数据, 只能一层一层传递</li> <li>一般数据--&gt;父组件传递数据给子组件--&gt;子组件读取数据</li> <li>函数数据--&gt;子组件传递数据给父组件--&gt;子组件调用函数</li> </ul> </li> <li> <p>方式二: 使用消息订阅(subscribe)-发布(publish)机制: 自定义事件机制</p> <ul> <li>工具库: PubSubJS</li> <li>下载: npm inst<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a> pubsub-js --save</li> <li> <p>使用:</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="import PubSub from 'pubsub-js' //引入 PubSub.subscribe('delete', function(data){ }); //订阅 PubSub.publish('delete', data) //发布消息" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">import</span> PubSub <span class="hljs-keyword">from</span> <span class="hljs-string">'pubsub-js'</span> <span class="hljs-comment">//引入</span> PubSub.subscribe(<span class="hljs-string">'<a href="http://www.js-code.com/tag/delete" title="浏览关于“delete”的文章" target="_blank" class="tag_link">delete</a>'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{ }); <span class="hljs-comment">//订阅</span> PubSub.publish(<span class="hljs-string">'de<a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a>e'</span>, data) <span class="hljs-comment">//发布消息</span></code></pre> </li> </ul> </li> </ul> <h2 id="articleHeader11">12. ES6新语法</h2> <ul> <li><a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a>/<a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a></li> <li><a href="http://www.js-code.com/tag/%e8%a7%a3%e6%9e%84%e8%b5%8b%e5%80%bc" title="解构赋值" target="_blank">解构赋值</a>: <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> {a, b} = <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props</li> <li>对象的简洁表达</li> <li> <p><a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="箭头函数" target="_blank">箭头函数</a>:</p> <ul> <li>组件的自定义方法: xxx = () =&gt; {}</li> <li>map/filter的回调方法: (item, index) =&gt; {}</li> <li> <p>优点:</p> <ul> <li>简洁</li> <li>没有自己的<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>,使用引用<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>查找的是外部<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a></li> </ul> </li> </ul> </li> <li> <p>扩展运算符(...)</p> <ul> <li>解构对象: <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> MyProps = {}, &lt;Xxx {...MyProps}&gt;</li> </ul> </li> <li>class/<a href="http://www.js-code.com/tag/extends" title="extends" target="_blank">extends</a>/<a href="http://www.js-code.com/tag/constructor" title="constructor" target="_blank">constructor</a>/<a href="http://www.js-code.com/tag/super" title="super" target="_blank">super</a></li> <li><a href="http://www.js-code.com/tag/es6%e6%a8%a1%e5%9d%97" title="ES6模块" target="_blank">ES6模块</a>化(Babel)</li> </ul> <h2 id="articleHeader12">13. 项目打包运行</h2> <ul> <li> <p>项目编译打包并运行</p> <ul> <li>npm build</li> <li>npm inst<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a> -g pushstate-server</li> <li>pushstate-server build</li> <li>访问: <a href="http://localhost" rel="nofollow noreferrer" target="_blank">http://localhost</a>:9000</li> </ul> </li> </ul> <h2 id="articleHeader13">14. 下载相关模块包</h2> <ul> <li>创建<a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json</li> <li> <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="npm install react react-dom --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> react react-dom <span class="hljs-comment">--save</span></code></pre> </li> <li> <p><a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</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="npm install babel-core babel-preset-es2015 babel-preset-react --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> babel-core babel-p<a href="http://www.js-code.com/tag/reset" title="浏览关于“reset”的文章" target="_blank" class="tag_link">reset</a>-es2015 babel-preset-react <span class="hljs-comment">--save-dev</span></code></pre> </li> <li> <p>webpack相关库</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="npm install webpack babel-loader --save-dev npm install webpack-dev-server" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> webpack babel-loader <span class="hljs-comment">--save-dev</span> npm <span class="hljs-keyword">install</span> webpack-dev-<span class="hljs-keyword">server</span></code></pre> </li> </ul> <h2 id="articleHeader14">15. webpack配置文件: webpack.config.js</h2> <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="const path = require('path'); //path内置的模块,用来设置路径。 module.exports = { entry: './src/main.js', // 入口文件 output: { // 输出配置 filename: 'bundle.js', // 输出文件名 path: path.resolve(__dirname, 'dist') //输出文件路径配置 }, module: { rules: [ { test: /.css$/, use: [ 'style-loader', 'css-loader' ] }, //babel处理js { test: /.js$/, exclude: /node_modules/, //排除此文件夹 use: [ 'babel-loader' ] } ] } }; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-comment">//path内置的模块,用来设置路径。</span> <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 = { en<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a>: <span class="hljs-string">'./src/main.js'</span>, <span class="hljs-comment">// 入口文件</span> output: { <span class="hljs-comment">// 输出配置</span> filename: <span class="hljs-string">'bundle.js'</span>, <span class="hljs-comment">// 输出文件名</span> path: path.resolve(__dirname, <span class="hljs-string">'dist'</span>) <span class="hljs-comment">//输出文件路径配置</span> }, <span class="hljs-keyword">module</span>: { rules: [ { test: <span class="hljs-regexp">/.css$/</span>, use: [ <span class="hljs-string">'style-loader'</span>, <span class="hljs-string">'css-loader'</span> ] }, <span class="hljs-comment">//babel处理js</span> { test: <span class="hljs-regexp">/.js$/</span>, exclude: <span class="hljs-regexp">/<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules/</span>, <span class="hljs-comment">//排除此文件夹</span> use: [ <span class="hljs-string">'babel-loader'</span> ] } ] } }; </code></pre> <h2 id="articleHeader15">16. babel配置文件: .babelrc</h2> <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="{ &quot;presets&quot;: [&quot;es2015&quot;, &quot;react&quot;] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs json"><code>{ <span class="hljs-attr">"presets"</span>: [<span class="hljs-string">"es2015"</span>, <span class="hljs-string">"react"</span>] }</code></pre> <h2 id="articleHeader16">17. 编码</h2> <ul> <li> <p>src/js/App.js: 应用组件</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/import" title="import" target="_blank">import</a> React from 'react'<br /> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a> <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a> App() { //暴露组件都得使用默认暴露<br /> return </p> <h1>Hello React Client Component</h1> <p>}" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/default" title="浏览关于“default”的文章" target="_blank" class="tag_link">default</a></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-comment">//暴露组件都得使用默认暴露</span> <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello React Client Component<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span> }</code></pre> </li> <li> <p>src/js/main.js: 入口js</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/import" title="import" target="_blank">import</a> React from 'react'<br /> import ReactDOM from 'react-<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m'<br /> import App from './App'</p> <p>//渲染组件标签到页面元素<br /> ReactDOM.render(<App ></span>, document.getElementById('demo'))" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span> <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span> <span class="hljs-comment">//渲染组件标签到页面元素</span> ReactDOM.render(&lt;App /&gt;, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'demo'</span>))</code></pre> </li> </ul> <h2 id="articleHeader17">18. 下载css加载器</h2> <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="npm install style-loader css-loader --save-dev 创建css文件 src/css/test.css body{ background : red }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> <span class="hljs-keyword">style</span>-loader css-loader <span class="hljs-comment">--save-dev</span> 创建css文件 src/css/test.css <span class="hljs-keyword">body</span>{ background : red }</code></pre> <h2 id="articleHeader18">19. 配置webpack-dev-server</h2> <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="devServer:{ contentBase: './',//内置服务器动态加载页面所在的目录 } `` ##20. 执行命令" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">devServer</span>:{ <span class="hljs-attribute">contentBase</span>: <span class="hljs-string">'./'</span>,//内置服务器动态加载页面所在的目录 } `` #<span class="hljs-selector-id">#20</span>. 执行命令</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="构建任务:webpack 热加载任务: webpack-dev-server ``` " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code>构建任务:webpack 热加载任务: webpack-dev-server <span class="hljs-string">``</span><span class="hljs-string">` </span></code></pre> <h2 id="articleHeader19">21 <a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json: 添加编译/运行脚本</h2> <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="&quot;scripts&quot;: { &quot;start&quot;: &quot;webpack-dev-server&quot;, &quot;build&quot;: &quot;webpack&quot; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"start"</span>: <span class="hljs-string">"webpack-dev-server"</span>, <span class="hljs-string">"build"</span>: <span class="hljs-string">"webpack"</span> }</code></pre> <h1 id="articleHeader20">react-router使用教程</h1> <h2 id="articleHeader21">0. 关于url中#的作用:</h2> <ul> <li>学习: <a href="http://www.ruanyifeng.com/blog/2011/03/url_hash.html" rel="nofollow noreferrer" target="_blank">http://www.ruanyifeng.com/blo...</a> </li> <li>'#'代表网页中的一个位置。其右面的字符,就是该位置的标识符</li> <li>改变#不触发网页重载</li> <li>改变#会改变浏览器的访问历史</li> <li><a href="http://www.js-code.com/tag/window" title="window" target="_blank">window</a>.<a href="http://www.js-code.com/tag/location" title="location" target="_blank">location</a>.hash读取#值</li> <li><a href="http://www.js-code.com/tag/window" title="window" target="_blank">window</a>.onhashchange = func 监听hash改变</li> </ul> <h2 id="articleHeader22">1. reat-router</h2> <ul> <li>github主页: <a href="https://github.com/ReactTraining/react-router" rel="nofollow noreferrer" target="_blank">https://github.com/ReactTrain...</a> </li> <li>官网教程: <a href="https://github.com/reactjs/react-router-tutorial/(%E5%AE%98%E6%96%B9%E6%95%99%E7%A8%8B)" rel="nofollow noreferrer" target="_blank">https://github.com/reactjs/re...</a> </li> <li>一峰教程: <a href="http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu" rel="nofollow noreferrer" target="_blank">http://www.ruanyifeng.com/blo...</a> </li> </ul> <h2 id="articleHeader23">2. react-router库中的相关组件</h2> <ul> <li> <p>包含的相关组件:</p> <ul> <li>Router: 路由器组件, 用来包含各个路由组件</li> <li>Route: 路由组件, 注册路由</li> <li>IndexRoute: 默认路由组件</li> <li>hashHistory: 路由的切换由URL的hash变化决定,即URL的#部分发生变化</li> <li>Link: 路由链接组件</li> </ul> </li> <li> <p>Router: 路由器组件</p> <ul> <li>属性: <a href="http://www.js-code.com/tag/history" title="history" target="_blank">history</a>={hashHistory} 用来监听浏览器地址栏的变化, 并将URL解析成一个地址对象,供React Router匹配</li> <li>子组件: Route</li> </ul> </li> <li> <p>Route: 路由组件</p> <ul> <li>属性1: path="/xxx"</li> <li>属性2: component={Xxx}</li> <li>根路由组件: path="/"的组件, 一般为App</li> <li>子路由组件: 子&lt;Route&gt;配置的组件</li> </ul> </li> <li> <p>IndexRoute: 默认路由</p> <ul> <li>当父路由被请求时, 默认就会请求此路由组件</li> </ul> </li> <li> <p>hashHistory</p> <ul> <li>用于Router组件的<a href="http://www.js-code.com/tag/history" title="history" target="_blank">history</a>属性</li> <li>作用: 为地址url生成?_k=hash, 用于内部保存对应的state</li> </ul> </li> <li> <p>Link: 路由链接</p> <ul> <li>属性1: to="/xxx"</li> <li>属性2: active<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>Name="active"</li> </ul> </li> </ul> <h2 id="articleHeader24">3. 配置(从官方教程样例中拷贝)</h2> <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配置: webpack.config.js ``` module.exports = { //入口js entry: './index.js', //编译打包输出 output: { filename: 'bundle.js', publicPath: '' }, module: { //使用的loaders loaders: [ {test: /.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&amp;presets[]=react'} ] } } ``` * 包配置: package.json ``` { &quot;name&quot;: &quot;tutorial&quot;, &quot;version&quot;: &quot;1.0.0&quot;, &quot;description&quot;: &quot;&quot;, &quot;main&quot;: &quot;index.js&quot;, &quot;scripts&quot;: { &quot;start&quot;: &quot;webpack-dev-server --inline --content-base .&quot; }, &quot;author&quot;: &quot;&quot;, &quot;license&quot;: &quot;ISC&quot;, &quot;dependencies&quot;: { &quot;react&quot;: &quot;^0.14.7&quot;, &quot;react-dom&quot;: &quot;^0.14.7&quot;, &quot;react-router&quot;: &quot;^2.0.0&quot; }, &quot;devDependencies&quot;: { &quot;babel-core&quot;: &quot;^6.5.1&quot;, &quot;babel-loader&quot;: &quot;^6.2.2&quot;, &quot;babel-preset-es2015&quot;: &quot;^6.5.0&quot;, &quot;babel-preset-react&quot;: &quot;^6.5.0&quot;, &quot;http-server&quot;: &quot;^0.8.5&quot;, &quot;webpack&quot;: &quot;^1.12.13&quot;, &quot;webpack-dev-server&quot;: &quot;^1.14.1&quot; } } ```" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code> * webpack配置: webpack.config.js ``` module.exports = { <span class="hljs-comment">//入口js</span> <span class="hljs-symbol"> entry:</span> <span class="hljs-string">'./index.js'</span>, <span class="hljs-comment">//编译打包输出</span> <span class="hljs-symbol"> output:</span> { <span class="hljs-symbol"> filename:</span> <span class="hljs-string">'bundle.js'</span>, <span class="hljs-symbol"> <a href="http://www.js-code.com/tag/public" title="浏览关于“public”的文章" target="_blank" class="tag_link">public</a>Path:</span> <span class="hljs-string">''</span> }, <span class="hljs-symbol"> module:</span> { <span class="hljs-comment">//使用的loaders</span> <span class="hljs-symbol"> loaders:</span> [ {<span class="hljs-string">test:</span> <span class="hljs-regexp">/.js$/</span>, <span class="hljs-string">exclude:</span> <span class="hljs-regexp">/node_modules/</span>, <span class="hljs-string">loader:</span> <span class="hljs-string">'babel-loader?presets[]=es2015&amp;presets[]=react'</span>} ] } } ``` * 包配置: <span class="hljs-keyword"><a href="http://www.js-code.com/tag/package" title="浏览关于“package”的文章" target="_blank" class="tag_link">package</a></span>.json ``` { <span class="hljs-string">"name"</span>: <span class="hljs-string">"tutorial"</span>, <span class="hljs-string">"version"</span>: <span class="hljs-string">"1.0.0"</span>, <span class="hljs-string">"description"</span>: <span class="hljs-string">""</span>, <span class="hljs-string">"main"</span>: <span class="hljs-string">"index.js"</span>, <span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"start"</span>: <span class="hljs-string">"webpack-dev-server --inline --content-base ."</span> }, <span class="hljs-string">"author"</span>: <span class="hljs-string">""</span>, <span class="hljs-string">"license"</span>: <span class="hljs-string">"ISC"</span>, <span class="hljs-string">"dependencies"</span>: { <span class="hljs-string">"react"</span>: <span class="hljs-string">"^0.14.7"</span>, <span class="hljs-string">"react-dom"</span>: <span class="hljs-string">"^0.14.7"</span>, <span class="hljs-string">"react-router"</span>: <span class="hljs-string">"^2.0.0"</span> }, <span class="hljs-string">"devDependencies"</span>: { <span class="hljs-string">"babel-core"</span>: <span class="hljs-string">"^6.5.1"</span>, <span class="hljs-string">"babel-loader"</span>: <span class="hljs-string">"^6.2.2"</span>, <span class="hljs-string">"babel-preset-es2015"</span>: <span class="hljs-string">"^6.5.0"</span>, <span class="hljs-string">"babel-preset-react"</span>: <span class="hljs-string">"^6.5.0"</span>, <span class="hljs-string">"http-server"</span>: <span class="hljs-string">"^0.8.5"</span>, <span class="hljs-string">"webpack"</span>: <span class="hljs-string">"^1.12.13"</span>, <span class="hljs-string">"webpack-dev-server"</span>: <span class="hljs-string">"^1.14.1"</span> } } ```</code></pre> <h2 id="articleHeader25">4. 编码</h2> <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=" * 定义各个路由组件 * About.js ``` import React from 'react' function About() { return <div>About组件内容</div> <p> }<br /> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> <a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a> About<br /> ```<br /> * Home.js<br /> ```<br /> import React from 'react'<br /> function Home() {<br /> return </p> <div>Home组件内容2</div> <p> }<br /> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default Home<br /> ```<br /> * Repos.js<br /> ```<br /> import React, {Component} from 'react'<br /> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default class Repos extends Component {<br /> render() {<br /> return (</p> <div>Repos组件</div> <p> )<br /> }<br /> }<br /> ```<br /> * 定义应用组件: App.js<br /> ```<br /> import React, {Component} from 'react'<br /> import {Link} from 'react-router'</p> <p> export default class App extends Component {<br /> render() {<br /> return (</p> <div> <h2>Hello, React Router!</h2> <ul> <li><Link to=&quot;/about&quot; activeClassName=&quot;active&quot;>About2</Link></li> <li><Link to=&quot;/repos&quot; activeClassName=&quot;active&quot;>Repos2</Link></li> </ul> <p> {<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.props.children} </div> <p> )<br /> }<br /> }<br /> ```<br /> * 定义入口JS: index.js-->渲染组件<br /> ```<br /> import React from 'react'<br /> import {render} from 'react-dom'<br /> import {Router, Route, IndexRoute, hashHistory} from 'react-router'<br /> import App from './modules/App'<br /> import About from './modules/About'<br /> import Repos from './modules/Repos'<br /> import Home from './modules/Home'</p> <p> render((<br /> <Router history={hashHistory}><br /> <Route path=&quot;/&quot; component={App}><br /> <IndexRoute component={Home}></IndexRoute><br /> <Route path=&quot;/about&quot; component={About}></Route><br /> <Route path=&quot;/repos&quot; component={Repos}></Route><br /> </Route><br /> </Router><br /> ), <a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>.getElementById('app'))<br /> ```<br /> * 主页面: index.html<br /> ```</p> <style> .active { color: red; } </style> <div id=app></div> <p> <script src=&quot;bundle.js&quot;></script><br /> ```" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code> * 定义各个路由组件 * About.js ```<span class="javascript"> <span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">About</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>About组件内容<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> } <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> About </span>``` * Home.js ```<span class="javascript"> <span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Home</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Home组件内容2<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> } <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Home </span>``` * Repos.js ```<span class="javascript"> <span class="hljs-keyword">import</span> React, {Component} <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Repos</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{ render() { <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Repos组件<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> ) } } </span>``` * 定义应用组件: App.js ```<span class="javascript"> <span class="hljs-keyword">import</span> React, {Component} <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword">import</span> {Link} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{ render() { <span class="hljs-keyword">return</span> ( <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">h2</span>&gt;</span>Hello, React Router!<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/about"</span> <span class="hljs-attr">activeClassName</span>=<span class="hljs-string">"active"</span>&gt;</span>About2<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/repos"</span> <span class="hljs-attr">activeClassName</span>=<span class="hljs-string">"active"</span>&gt;</span>Repos2<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> {this.props.children} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> ) } } </span>``` * 定义入口JS: index.js--&gt;渲染组件 ```<span class="javascript"> <span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span> <span class="hljs-keyword">import</span> {render} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span> <span class="hljs-keyword">import</span> {Router, Route, IndexRoute, hashHistory} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router'</span> <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./modules/App'</span> <span class="hljs-keyword">import</span> About <span class="hljs-keyword">from</span> <span class="hljs-string">'./modules/About'</span> <span class="hljs-keyword">import</span> Repos <span class="hljs-keyword">from</span> <span class="hljs-string">'./modules/Repos'</span> <span class="hljs-keyword">import</span> Home <span class="hljs-keyword">from</span> <span class="hljs-string">'./modules/Home'</span> render(( <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Router</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/history" title="浏览关于“history”的文章" target="_blank" class="tag_link">history</a></span>=<span class="hljs-string">{hashHistory}</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">"/"</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{App}</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">IndexRoute</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{Home}/</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">"/about"</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{About}</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Route</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">"/repos"</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{Repos}</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">Route</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">Route</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">Router</span>&gt;</span> ), document.getElementById('app')) </span></span>``` * 主页面: index.html ```<span class="javascript"><span class="xml"> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.active</span> { <span class="hljs-attribute">color</span>: red; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">app</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"bundle.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </span></span>```</code></pre> <h2 id="articleHeader26">5. 传递请求参数</h2> <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=" * repo.js: repos组件下的分路由组件 ``` import React from 'react' export default function ({params}) { <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> {username, repoName} = params<br /> return (</p> <div>用户名:{username}, 仓库名:{repoName}</div> <p> )<br /> }<br /> ```<br /> * repos.js<br /> ```<br /> import React from 'react'<br /> import NavLink from './NavLink'</p> <p> export default class Repos extends React.Component {</p> <p> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a>ructor(props) {<br /> <a href="http://www.js-code.com/tag/super" title="super" target="_blank">super</a>(props);<br /> this.state = {<br /> repos: [<br /> {username: 'faceback', repoName: 'react'},<br /> {username: 'faceback', repoName: 'react-router'},<br /> {username: '<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>', repoName: 'angular'},<br /> {username: '<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>', repoName: 'angular-cli'}<br /> ]<br /> };<br /> this.handleSubmit = this.handleSubmit.bind(this)<br /> }</p> <p> handleSubmit () {</p> <p> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> repos = this.state.repos<br /> repos.push({<br /> username: this.refs.username.value,<br /> repoName: this.refs.repoName.value<br /> })<br /> this.set<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>({repos})<br /> this.refs.username.value = ''<br /> this.refs.repoName.value = ''<br /> }</p> <p> render() {<br /> return (</p> <div> <h2>Repos</h2> <ul> {<br /> this.state.repos.map((repo, index) => {<br /> const to = `/repos/${repo.username}/${repo.repoName}`<br /> return (</p> <li key={index}> <Link to={to} activeClassName='active'>{repo.repoName}</Link> </li> <p> )<br /> })<br /> }</p> <li> <form onSubmit={this.handleSubmit}> <input type=&quot;text&quot; placeholder=&quot;用户名&quot; ref='username'/> / {' '}<br /> <input type=&quot;text&quot; placeholder=&quot;仓库名&quot; ref='repoName'/>{' '}<br /> <button type=&quot;submit&quot;>添加</button><br /> </form> </li> </ul> <p> {this.props.children} </p></div> <p> );<br /> }<br /> }<br /> ```<br /> * index.js: 配置路由<br /> ```<br /> <Route path=&quot;/repos&quot; component={Repos}><br /> <Route path=&quot;/repos/:username/:repoName&quot; component={Repo}></Route><br /> </Route><br /> ```<br /> 6. 优化Link组件<br /> * NavLink.js<br /> ```<br /> import React from 'react'<br /> import {Link} from 'react-router'<br /> export default function NavLink(props) {<br /> return <Link {...props} activeClassName=&quot;active&quot;/><br /> }<br /> ```<br /> * Repos.js<br /> ```<br /> <NavLink to={to}>{repo.repoName}</NavLink><br /> ```" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code> * repo.js: repos组件下的分路由组件 ``` <span class="hljs-keyword">import</span> React from <span class="hljs-string">'react'</span> export <span class="hljs-keyword">default</span> function ({params}) { let {username, repoName} = params <span class="hljs-keyword">return</span> ( &lt;div&gt;用户名:{username}, 仓库名:{repoName}&lt;/div&gt; ) } ``` * repos.js ``` <span class="hljs-keyword">import</span> React from <span class="hljs-string">'react'</span> <span class="hljs-keyword">import</span> NavLink from <span class="hljs-string">'./NavLink'</span> export <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Repos</span> <span class="hljs-title">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{ <span class="hljs-keyword">constructor</span>(props) { <span class="hljs-keyword">super</span>(props); <span class="hljs-keyword">this</span>.state = { repos: [ {username: <span class="hljs-string">'faceback'</span>, repoName: <span class="hljs-string">'react'</span>}, {username: <span class="hljs-string">'faceback'</span>, repoName: <span class="hljs-string">'react-router'</span>}, {username: <span class="hljs-string">'<a href="http://www.js-code.com/tag/angular" title="浏览关于“Angular”的文章" target="_blank" class="tag_link">Angular</a>'</span>, repoName: <span class="hljs-string">'angular'</span>}, {username: <span class="hljs-string">'Angular'</span>, repoName: <span class="hljs-string">'angular-cli'</span>} ] }; <span class="hljs-keyword">this</span>.handleSubmit = <span class="hljs-keyword">this</span>.handleSubmit.bind(<span class="hljs-keyword">this</span>) } handleSubmit () { <span class="hljs-keyword">const</span> repos = <span class="hljs-keyword">this</span>.state.repos repos.push({ username: <span class="hljs-keyword">this</span>.refs.username.value, repoName: <span class="hljs-keyword">this</span>.refs.repoName.value }) <span class="hljs-keyword">this</span>.set<a href="http://www.js-code.com/tag/state" title="浏览关于“State”的文章" target="_blank" class="tag_link">State</a>({repos}) <span class="hljs-keyword">this</span>.refs.username.value = <span class="hljs-string">''</span> <span class="hljs-keyword">this</span>.refs.repoName.value = <span class="hljs-string">''</span> } render() { <span class="hljs-keyword">return</span> ( &lt;div&gt; &lt;h2&gt;Repos&lt;/h2&gt; &lt;ul&gt; { <span class="hljs-keyword">this</span>.state.repos.map((repo, index) =&gt; { <span class="hljs-keyword">const</span> to = `/repos/${repo.username}/${repo.repoName}` <span class="hljs-keyword">return</span> ( &lt;li key={index}&gt; &lt;Link to={to} activeClassName=<span class="hljs-string">'active'</span>&gt;{repo.repoName}&lt;/Link&gt; &lt;/li&gt; ) }) } &lt;li&gt; &lt;<a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a> onSubmit={<span class="hljs-keyword">this</span>.handleSubmit}&gt; &lt;input type=<span class="hljs-string">"text"</span> placeholder=<span class="hljs-string">"用户名"</span> ref=<span class="hljs-string">'username'</span>/&gt; / {<span class="hljs-string">' '</span>} &lt;input type=<span class="hljs-string">"text"</span> placeholder=<span class="hljs-string">"仓库名"</span> ref=<span class="hljs-string">'repoName'</span>/&gt;{<span class="hljs-string">' '</span>} &lt;button type=<span class="hljs-string">"<a href="http://www.js-code.com/tag/submit" title="浏览关于“submit”的文章" target="_blank" class="tag_link">submit</a>"</span>&gt;添加&lt;/button&gt; &lt;/<a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a>m&gt; &lt;/li&gt; &lt;/ul&gt; {<span class="hljs-keyword">this</span>.props.children} &lt;/div&gt; ); } } ``` * index.js: 配置路由 ``` &lt;Route path=<span class="hljs-string">"/repos"</span> component={Repos}&gt; &lt;Route path=<span class="hljs-string">"/repos/:username/:repoName"</span> component={Repo}/&gt; &lt;/Route&gt; ``` <span class="hljs-number">6</span>. 优化Link组件 * NavLink.js ``` <span class="hljs-keyword">import</span> React from <span class="hljs-string">'react'</span> <span class="hljs-keyword">import</span> {Link} from <span class="hljs-string">'react-router'</span> export <span class="hljs-keyword">default</span> function NavLink(props) { <span class="hljs-keyword">return</span> &lt;Link {...props} activeClassName=<span class="hljs-string">"active"</span>/&gt; } ``` * Repos.js ``` &lt;NavLink to={to}&gt;{repo.repoName}&lt;/NavLink&gt; ```</code></pre> <h1 id="articleHeader27">使用开源的ant-design库开发项目指南</h1> <h2 id="articleHeader28">1. 最流行的开源React UI组件库</h2> <ul> <li> <p>material-ui(国外)</p> <ul> <li>官网: <a href="http://www.material-ui.com/#/" rel="nofollow noreferrer" target="_blank">http://www.material-ui.com/#/</a> </li> <li>github: <a href="https://github.com/callemall/material-ui" rel="nofollow noreferrer" target="_blank">https://github.com/callemall/...</a> </li> </ul> </li> <li> <p>ant-design(国内蚂蚁金服)</p> <ul> <li>官网: <a href="https://ant.design/" rel="nofollow noreferrer" target="_blank">https://ant.design/</a> </li> <li>github: <a href="https://github.com/ant-design/ant-design/" rel="nofollow noreferrer" target="_blank">https://github.com/ant-design...</a> </li> </ul> </li> </ul> <h2 id="articleHeader29">2. ant-design使用入门</h2> <h3 id="articleHeader30">使用create-react-app搭建react开发环境</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="npm install create-react-app -g create-react-app antd-demo cd antd-demo npm start" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> <span class="hljs-keyword">create</span>-react-app -g <span class="hljs-keyword">create</span>-react-app antd-demo cd antd-demo npm <span class="hljs-keyword">start</span></code></pre> <h3 id="articleHeader31">搭建antd的基本开发环境</h3> <ul> <li> <p>下载</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="npm install antd --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> antd <span class="hljs-comment">--save</span></code></pre> </li> <li> <p>src/App.js</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=" import React, { Component } from 'react'; import { Button } from 'antd'; import './App.css'; class App extends Component { render() { return ( <div className=&quot;App&quot;> <Button type=&quot;primary&quot;>Button</Button> </div> <p> );<br /> }<br /> }</p> <p> export default App;<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code> <span class="hljs-keyword">import</span> <span class="hljs-type">React</span>, { <span class="hljs-type">Component</span> } from <span class="hljs-symbol">'reac</span>t'; <span class="hljs-keyword">import</span> { <span class="hljs-type">Button</span> } from <span class="hljs-symbol">'ant</span>d'; <span class="hljs-keyword">import</span> './<span class="hljs-type">App</span>.css'; <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{ render() { <span class="hljs-keyword">return</span> ( &lt;div className=<span class="hljs-string">"App"</span>&gt; &lt;<span class="hljs-type">Button</span> <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"primary"</span>&gt;<span class="hljs-type">Button</span>&lt;/<span class="hljs-type">Button</span>&gt; &lt;/div&gt; ); } } export <span class="hljs-keyword">default</span> <span class="hljs-type">App</span>; </code></pre> </li> <li> <p>src/App.css</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=" @import '~antd/dist/antd.css'; .App { text-align: center; } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code> @<span class="hljs-keyword">import</span> <span class="hljs-string">'~antd/dist/antd.css'</span>; <span class="hljs-selector-class">.App</span> { <span class="hljs-attribute">text-align</span>: center; } </code></pre> </li> </ul> <h3 id="articleHeader32">实现按需加载(css/js)</h3> <ul> <li> <p>使用 eject 命令将所有内建的配置暴露出来</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="npm run eject" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">npm</span> run eject</code></pre> </li> <li> <p>下载babel-<a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a>-import(用于按需加载组件代码和样式的 babel 插件)</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="npm install babel-plugin-import --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> babel-<span class="hljs-keyword"><a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a></span>-<span class="hljs-keyword">import</span> <span class="hljs-comment">--save-dev</span></code></pre> </li> <li> <p>修改配置: config/webpack.config.dev.js</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=" // Process JS with Babel. { test: /.(js|jsx)$/, include: paths.appSrc, loader: 'babel', query: { + plugins: [ + ['import', [{ libraryName: &quot;antd&quot;, style: 'css' }]], + ], // This is a feature of `babel-loader` for webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds. cacheDirectory: true } }, " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code> // Process JS <span class="hljs-keyword">with</span> Babel. { <span class="hljs-keyword">test</span>: /.(js|jsx)$/, <span class="hljs-keyword">include</span>: paths.appSrc, loader: <span class="hljs-string">'babel'</span>, <span class="hljs-keyword">query</span>: { + plugins: [ + [<span class="hljs-string">'import'</span>, [{ libraryName: <span class="hljs-string">"antd"</span>, <span class="hljs-keyword">style</span>: <span class="hljs-string">'css'</span> }]], + ], // This <span class="hljs-keyword">is</span> a feature <span class="hljs-keyword">of</span> <span class="hljs-string">`babel-loader`</span> <span class="hljs-keyword">for</span> webpack (<span class="hljs-keyword">not</span> Babel it<a href="http://www.js-code.com/tag/self" title="浏览关于“self”的文章" target="_blank" class="tag_link">self</a>). // It enables <span class="hljs-keyword">caching</span> results <span class="hljs-keyword">in</span> ./node_modules/.cache/babel-loader/ // <span class="hljs-keyword">directory</span> <span class="hljs-keyword">for</span> faster rebuilds. cacheDirectory: <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span> } }, </code></pre> </li> <li> <p>去除引入全量样式的语句: src/App.css</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="@import '~antd/dist/antd.css'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-meta">@import</span> <span class="hljs-string">'~antd/dist/antd.css'</span></code></pre> </li> </ul> <blockquote><p>愿你成为终身学习者</p></blockquote> <p></code></p>

总结

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

React学习笔记知识点整理

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

React学习笔记知识点整理

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

80%的人都看过