首页 > 学院 > 开发设计 > 正文

React学习札记

2019-11-09 19:00:16
字体:
来源:转载
供稿:网友

一、React是什么?

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怎么用?

$2.1、安装

由于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 命令自动生成的)

$2.2、使用示例

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <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> <script src="http://static.runoob.com/assets/react/browser.js"></script> </head> <body> <div id="example"></div> <!-- 如果使用JSX,则type应为text/babel--> <script type="text/babel"> <!-- 渲染方法--> React.render( <!-- JSX语法:HTML标签直接写在JavaScript中,不加任何引号--> <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body></html>

$2.3、组件式开发

组件式开发的模型以及它的概念,这里不再赘述。在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"));

结果如下:

情况一:错误

情况二:

成功

三、注意事项

React是ReactDOM的升级版本;React创建组件时,render方法必须实现;在使用React前,必须安装或本地依赖或CDN依赖 react库在使用组件时,如果给多个属性赋值,中间不用逗号隔开
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表