React是一个由Facebook于2013年5月开源的库,采用MVC模式。而React它最初只是Facebook的一个内部项目使用的框架,由于它的设计思想独特,性能出众,代码逻辑简单,可以说优于市面上流行的基他javaScript MVC框架,因此,越来越多的人开始关注并使用React,从而也使得React变成了时下最热门的前端框架。 由它衍生的React Native项目当前也变得火热起来,一时间使得从事Android与IOS开发的同学担心自己在不久的将来可能会丢了饭碗,因为React Native是一种用写Web App的方式去写Native App。那样同一组人就只需要写一次界面,就可以运行在Android,IOS,PC等各个端。
由于React是一个库,得先进行依赖,React的依赖有3种,
一种是直接下载解压使用:
你可以在官网 http://reactjs.cn/react/downloads.html 下载最新版。然后解压到指定目录下,并 在< script src=”“/>引用路径里面指定react.js,react-dom.js的路径。
一种是使用内容分发网络(CDN):
<script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script><script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>注: 上面使用的是.min文件,即压缩文件,这个是生产环境的,开发者看不到源码。 当然,便于调试,我们可以使用未经压缩的文件,比如:
<script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script><script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>上面的react.js与react-dom.js两者是必须要的。其中react.js是React的核心库,react-dom.js提供与DOM操作相关的功能。除此之外我们还会引入browser.js库:用于将JSX语法转化为Javascript语法。
另一种就是用npm命令来安装React:
$ npm install react -g --save$ npm install react-dom -g --save全局安装React,–save是将包添加至package.json文件(*这个文件是调用npm init 命令自动生成的)
组件式开发的模型以及它的概念,这里不再赘述。在JavaScript中,对模块化或组件式开发,目前非常流行的一个库是require.js。它有以下优点:
可以实现js文件的异步加载,避免了网页因加载过多的js文件而失去响应;用于管理模块之间的依赖性,便于代码的编写和维护。如果想要依赖某个模块时,只需调用require()方法即可,返回这个组件的对象。如:
//注意,定义的这个ComponentName组件名首字母必须大写。var ComponentName = require('../common/js/Test.js');组件式开发的核心思想是,一个组件为一个js文件。 在React里面,可以通过React.createClass({})方法来创建一个组件,这个方法里面{}实现一系列的接口,其中render:function(){};接口是必须实现的。当需要关注React的生命周期时,其与各生命周期相关的接口就得实现。比如:
//sate状态初始化getInitialState:function(){ return { open:false, online:true };},//当state状态改变时调用componentDidUpdate:function(){ //todo },//组件挂载完毕时调用componentDidMount:function(){ //todo},//render是必须要实现的方法//当调用React.render(<组件/>,document.getElementById('Root'))方法时,该方法就会被回调render:function(){ return ( <div>测试渲染</div> );}同时,在这个组件里面,自己也可以封装一些方法,在render里面来调用。
组件作为一个对象,也可以理解成一个DOM节点,因为它最终在渲染的时候也会加入到HTML文档中,但它又不是真正的DOM节点,而是一种数据结构,只有在组件被挂载到DOM以后,才会变成真正的DOM节点,因此,组件也被称为虚拟DOM。
同时组件作为一个对象,它有自己的生命周期,而其生命周期可以分成三个状态: - Mounting:已经插入了真实的DOM - Updating:正在被重新渲染 - Unmounting:已经移出真实的DOM
除了Unmounting状态只有一种处理函数外,其它每个状态都有两种处理函数,will函数在进入状态之前调用,did函数在进入状态后调用。比如: - componentWillMount():将要挂载组件; - componentDidMount(): 组件挂载成功;
此外,React还提供两种特殊的处理函数: - componentWillReceivePRops(object nextProps):已挂载成功的组件在收到新的参数时回调 - shouldComponentUpdate(object nextProps,object nextState):当组件需要重新渲染时回调。
组件即对象,因此,组件有相应的属性,我们可通过this.props来获取当前组件对象的指定属性。
var HelloClass = React.creatClass({ render:function(){ return ( //读取组件的属性,这个名字是随便取的。 <h1>随便取的属性名:<font color='red'>{this.props.sunny}</font></h1> ); }});React.render(<HelloClass sunny="我是sunny"/>,document.body);如图:
像其它编程语言一样,有时我们需要指定变量的类型。而在React里面,由于组件的属性可以接受字符串、对象、函数等任意值。这时,为了对使用者进行约束,我们也可以指定属性的类型,这时就要用到PropTypes,eg:
var PropesTest = React.createClass({ //定义两个属性,在引用该组件时,如果用到这两个属性,则值的类型必须符合给定的类型, //否则会报错。 propTypes:{ name:React.PropTypes.string.isRequired, content:React.PropTypes.string.isRequired, }, render:function(){ return ( <h1>名字:{this.props.name}+"/n内容:"+{this.props.content}</h1> ); }});//情况一:React.render(<PropesTest name=1111 content="内容"/>,document.getElementById("example"));//情况二:React.render(<PropesTest name="我是**" content="哈哈"/>,document.getElementById("example"));结果如下:
情况一:
情况二:
新闻热点
疑难解答