React - 功能介绍、安装配置说明(附几个简单的入门样例)
一、React介绍
1,React的起源与发展
(1)React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。
(2)做出来以后,发现这套东西很好用,就在2013年5月开源了。
(3)由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。
2,React的特点
(1)只作为 UI(Just the UI):React 不是一个完整的 MVC 框架,最多是作为视图(View)在 MVC 中使用。(甚至 React 并不非常认可 MVC 开发模式。它提出的是一个新的开发模式和理念,强调的是“用户界面”。React 希望将功能分解化,让开发变得像搭积木一样,快速且可维护。)
(2)虚拟 DMO 机制(Virtual DOM):这是 React 的一个亮点,可以很好地优化视图的渲染和刷新。过去我们更新视图是,需要先清空 DOM 容器里的内容,然后将最新的 DOM 和数据追加到容器中。而 React 将这一操作放进了内存。通过将视图变化放进内存进行比较(虚拟 DOM 比较),计算出最小更新的视图,然后将差异部分进行更新以完成整个组件的渲染。这正是React 如此高效的原因。
(3)数据流(Data Flow):React 实现了单向的数据流,并且对于传统的数据绑定而言,React 更加灵活、便捷。
3,网站地址
GitHub地址:https://github.com/facebook/react二、准备工作
在使用 ReactJS 进行开发前,我们需要准备好这三个 js 文件:react.js、react-dom.js、browser.js。下面分别对它们进行介绍。1,react.js 和 react-dom.js
前者是 React 主要核心,后者负责 React DOM 操作。可以访问下面地址下载最新版本:实现浏览器端对 JSX 的编译。(在 react 0.14 前,使用 jsxtransformer.js,后改为 browser.js)
由于 browser.js 非常大,我们开发测试可以引用如下地址:
这种运行时解析转换 JSX 建议只在开发测试时使用。生产环境下可以借助编译工具(babel)事先将 JSX 编译成 JS。
这样代码经过预编译、压缩和合并后,会提高网络的加载速度,减少流量带宽的浪费,优化用户体验。
这样代码经过预编译、压缩和合并后,会提高网络的加载速度,减少流量带宽的浪费,优化用户体验。
三、使用样例
1,简单组件和数据传递
我们可以使用 this.props 来做简单的数据传递。
(1)样例说明
- 定义了一个组件 HelloMessage。通过传入的 name 属性,用于 h1 标签渲染。
- 使用 ReactDOM.render 方法将组件渲染到 id 为 example 的 div 内。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>hangge</title> <script type="text/javascript" src="react.js"></script> <script type="text/javascript" src="react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> </head> <body> <div id="example"> </div> <script type="text/babel"> var HelloMessage = React.createClass({ render: function() { return <h1>欢迎访问 {this.props.name}</h1>; } }); ReactDOM.render(<HelloMessage name="hangge.com" />, document.getElementById('example')); </script> </body> </html>(2)运行效果
(3)使用 Chrome 调试工具可以看到渲染后内文档内容如下。
2,通过this.state更新视图
(1)样例说明
- getInitialState:设置组件的初始状态,必须返回一个对象或 null 对象。我们可以在此准备组件需要的数据以及后期需要更新的数据模型。
- componentDidMount:组件加载完成时调用。这里我们创建一个定时器,定时改变 this.state 里的数据。
- render:该方法用来渲染视图。this.state 发生改变时,该方法会自动调用。
- componentWillUnmount:组件被卸载时调用。我们在这里清除定时器 this.interval。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>hangge</title> <script type="text/javascript" src="react.js"></script> <script type="text/javascript" src="react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Timer = React.createClass({ /*初始状态*/ getInitialState: function() { return {secondsElapsed: 0}; }, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); }, /*组件完成加载*/ componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, /*组件将被卸载*/ componentWillUnmount: function() { clearInterval(this.interval); }, render: function() { return ( <div>现在已经过去了: {this.state.secondsElapsed}秒</div> ); } }); ReactDOM.render(<Timer />, document.getElementById('example')); </script> </body> </html>(2)运行效果。每隔一秒钟,secondsElapsed 就会加 1。同时页面也会自动刷新。
3,稍微复杂一点样例
(1)样例说明
- 我们在 textarea 上绑定了 onChange 的事件监听,目的是通过 setState 改变 this.state.value。
- 同时 textarea 上添加了 ref 属性,这样就可以通过 this.refs.testarea 引用这个 textarea 对象了。
- 通过 ReactDOM 提供的 findDOMNode 方法,可以找到 React 的 DOM。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>hangge</title> <script type="text/javascript" src="react.js"></script> <script type="text/javascript" src="react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var ShowEditor = React.createClass({ getInitialState: function() { return {value: '在这里输入文字'}; }, handleChange: function() { this.setState({value: ReactDOM.findDOMNode(this.refs.textarea).value}); }, render: function() { return ( <div> <h3>输入:</h3> <textarea style={{width:300, height:150, outline:'none'}} onChange={this.handleChange} ref="textarea" defaultValue={this.state.value} /> <h3>输出:</h3> <div> {this.state.value} </div> </div> ); } }); ReactDOM.render(<ShowEditor />, document.getElementById('example')); </script> </body> </html>(2)运行效果。在上方的 textarea 中输入内容后,下方的 div 中会同步显示出输入的内容文字。
大兄弟的博客写的真不错,我的swift也是在你这里学到了很多东西!
以后就和航哥一起学习RN了,真不错