ReactJS入门指南
ReactJS入门指南
本文旨在介绍ReactJS的基本知识,并一步步详细介绍React的基本概念和使用方法等,以及相应的Demo。本文在很大程度上参考了React官方文档和官方指南。如果你英语还不错,大可直接去官网查看对应的英文文档和指南,写的非常不错;但如果你的英语跟我一样蹩脚或者不喜欢直接读文档,那么希望这篇文章能够给你带来帮助。如果你用React很久了,恰好你也看到这篇文章,欢迎指正错误!如果你不乐意看一大片文字,想直接看程序,那么直接戳这里!
1、React是什么?
React是由工作在Facebook的优秀程序员开发出来的用于开发用户交互界面的JS库。其源码由Facebook和社区优秀的程序员维护,因此其背后有着非常强大的技术团队给予技术支持。React带来了很多新的东西,例如组件化、JSX、虚拟DOM等。其提供的虚拟DOM使得我们渲染组件呈现非常之快,让我们从频繁操作DOM的繁重工作之中解脱。了解React的人都知道,它做的工作更多偏重于MVC中的V层,结合其它如Flux等一起,你可以非常容易构建强大的应用。
React的官网,猛戳这里。
2、组件化
React的世界里,一切都是组件。你可以构建任何直接的HTML没有的组件,例如下拉菜单、导航菜单等。同时,组件里也可以包含其它组件。每一个组件都有一个render方法,用于呈现该组件。同时,每一个组件都有属于自己的scope,从而与其它的组件界定开来,用于构建属于该组件的方法,以方便复用。
3、JSX
如果你看过React的代码,你会非常容易发现JSX这个东东。很难一两句话解释清楚JSX是什么东西,但通俗的讲JSX是基于JS的扩展,它允许你在JS里直接写HTML的代码,而不用像我们过去一样要想在JS里写HTML不得不拼接一大堆的字符串。例如:
var ExampleComponent = React.createClass({
render: function () {
return (
<div className="listMenu">
Hello World!
</div>
);
}
});
仔细观察,你会发现这段JSX代码里居然直接又<、>等这些在JS里是不允许如此直接写的代码。这就是JSX带来的好处,它允许你在JS里使用你非常熟悉的HTML的标签。另外,注意render里的className,因为class在JS里是保留字,所以这里用的是className,类似的还有label标签的for等情况。
JSX给程序员带来了非常大的方便,从上面的代码你就可以有所窥见。但是,另外一些是它打破了我们通常熟悉的JS与HTML分离的想法,刚接触JSX的程序员会觉得JSX这种写法非常别扭。React同时提供了非JSX的写法,如上面的程序用JS写:
var ExampleComponent = React.createClass({
render: function () {
return (
React.createElement('div', {className: 'listMenu'}, 'Hello World!')
);
}
});
这段代码里没有html的标签,可能你看起来会觉得舒服些。但是,相信我,一旦你熟悉JSX,你会爱不释手!
4、虚拟DOM
React之所以非常快,就是因为它提供了虚拟DOM的概念。其根本原理是因为React不直接操作DOM,我们都知道频繁的操作DOM会非常影响性能和体验。React将DOM结构储存在内存中,与render方法的返回值进行比较,通过其自由的diff算法计算出不同的地方,然后反应到真实的DOM当中。也就是说,大多数情况我们渲染组件、更改组件状态等都是操作的虚拟DOM,只有在有所改变的情况下,才会反应到真实的DOM当中。举个例子就是,比方说你构建了一辆汽车,你给汽车进行了些改装(重新换个发动机啥的),用React的话讲就是,当你应用这些改装的时候,React会运行一套独特的diff算法计算出哪些做了改装,然后去改装这些东西。
5、下载安装
很多人看到这里都会觉得,你说的文字描述糊里糊涂,你写的代码又跑不起来。在这里需要提醒大家的是,JSX的代码是不能复制到控制台去执行的,在浏览器端运行JSX代码需要进行一下转换(正式开发环境下不建议在浏览器端转换,影响性能)。当然,这层转换也可以在服务器端进行,而且这也通常是我们推荐的方法。在这里,为了方便介绍,我们统一在浏览器端转换。
下载地址:猛戳这里,当前版本是0.13.3。
安装与使用,刚才我们有提到在浏览器端转换JSX的代码,因此你需要引入两个文件,分别为react.js和JSXTransformer.js,然后上面写过的代码就可以工作了,就以上面的hello world代码为例:
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
var ExampleComponent = React.createClass({
render: function () {
return (
<div className="navigation">
Hello World!
</div>
);
}
}); React.render(<ExampleComponent />, document.getElementById("container"));
</script>
</body>
</html>
如果你喜欢用CDN,那么可以到这里去查看,猛戳这里。注意上面代码里body底部的script标签,我们使用的type为“text/jsx”,这是告诉React这是JSX代码,碰到它JSXTransormer会对它进行一下转换。
另外需要注意的是上面第20行代码,React.render()方法,它将你构建的组件呈现到一个存在的DOM节点中。使用方法如上第20行,参数分别是你的组件和已存在的DOM节点。
6、初始呈现
当你需要将自己的组件呈现的时候,你需要调用React.render方法,该方法在上面已经介绍,在此不再赘述。
7、组件基础
组件拥有state(状态)和props(属性)两个非常重要的概念,这使得我们可以多次的复用组件,因为你每次传递的都不一样。
属性(props):我们可以像写HTML标签一样在呈现组件的时候传递一些属性,但同时我们也不仅限于HTML的可用属性。例如,上面的Hello world例子,我们可以传递属性,如下:
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
var ExampleComponent = React.createClass({
render: function () {
return (
<div className={this.props.config}>
Hello World,{this.props.name}!
</div>
);
}
}); React.render(<ExampleComponent config="listMenu" name="ZhaoSi"/>, document.getElementById("container"));
</script>
</body>
</html>
如上,我们在第20行呈现组件的时候,可以传递参数,例如我们传递了name和config,这样我们可以在组件的定义(第13-15行)内通过this.props.XX使用这两个属性。非常灵活!
状态(state):上面我们提到过,需要用state的话我们必须提供一个初始的state,如果更改state,则需要调用this.setState()方法。其中初始state使用getInitialState()方法,它返回初始state对象。同样使用我们的hello world例子,使用方法如下:
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
var ExampleComponent = React.createClass({
getInitialState: function () {
return {
name: "ZhaoSi"
};
},
render: function () {
return (
<div className={this.props.config}>
Hello World,{this.state.name}!
</div>
);
}
}); React.render(<ExampleComponent config="listMenu"/>, document.getElementById("container"));
</script>
</body>
</html>
如上,我们在第11行定义了初始状态的方法,即getInitialState,返回一个state对象,在组件的呈现render里我们可以使用this.state.XX来访问state对象里的属性。
注意:this.props.config和this.state.name一定要放置在花括号里。
8、组件的生命周期
每个组件都有自己的生命周期,因此提供了一些列的方法,你可以定义在组件的定义里。它们都会在生命周期的不同阶段被调用,一个明显的例子就是上面我们提到的getInitialState()方法,它在组件被创建的时候调用一次。其它各个方法如下:
componentWillMount:该方法在你调用组件并呈现组件的时候调用,执行一次,因此我们可以在这里发送一些http请求获取我们想要的参数;
componentDidMount:该方法在你调用组件并呈现组件之后调用,执行一次;
shouldComponentUpdate: 根据该方法的返回值来决定是否需要重新渲染组件;
componentWillUnMount:在组件从页面DOM中取消呈现的时候调用。
9、组件的方法
React同时也提供了一些组件的方法,用于在组件的构造过程中调用。
getDefaultProps:该方法使用与getInitialState一样,不同的是它定义一些默认的props;
propTypes:定义了你可以传递的prop的类型,错误的传递React会报错,具体类型可以猛戳这里,说白了就是对你传递的prop进行一个类型校验;
mixins: 你也发现了React在构建组件的时候定义了很多函数,如果很多组件公用/复用相同的一些函数的话,你大可把它们都抽出来封装为ExampleMixins,然后通过mixins:[ExampleMixins]传递进去。
10、结束语
看到这里,希望你能够了解到React的一些基本概念和使用方法,下一篇文章中我们会继续探索一下React的更进一步的例子。如果本文还算有所帮助,欢迎不吝点赞;如果有错误之处,也欢迎留言指正!
本文的代码都可以在这里下载到,猛戳这里!
ReactJS入门指南的更多相关文章
- ReactJs入门思路
ReactJs入门思路小指南 原文 http://segmentfault.com/blog/fakefish/1190000002449277 React是怎么搞的? React中,把一切东西都看 ...
- Web API 入门指南 - 闲话安全
Web API入门指南有些朋友回复问了些安全方面的问题,安全方面可以写的东西实在太多了,这里尽量围绕着Web API的安全性来展开,介绍一些安全的基本概念,常见安全隐患.相关的防御技巧以及Web AP ...
- Vue.js 入门指南之“前传”(含sublime text 3 配置)
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...
- yii2实战教程之新手入门指南-简单博客管理系统
作者:白狼 出处:http://www.manks.top/document/easy_blog_manage_system.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文 ...
- 【翻译】Fluent NHibernate介绍和入门指南
英文原文地址:https://github.com/jagregory/fluent-nhibernate/wiki/Getting-started 翻译原文地址:http://www.cnblogs ...
- ASP.NET MVC 5 入门指南汇总
经过前一段时间的翻译和编辑,我们陆续发出12篇ASP.NET MVC 5的入门文章.其中大部分翻译自ASP.NET MVC 5 官方教程,由于本系列文章言简意赅,篇幅适中,从一个web网站示例开始讲解 ...
- 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍
我们在前一篇文章微软新神器-Power BI,一个简单易用,还用得起的BI产品中,我们初步介绍了Power BI的基本知识.由于Power BI是去年开始微软新发布的一个产品,虽然已经可以企业级应用, ...
- 一起学微软Power BI系列-官方文档-入门指南(2)获取源数据
我们在文章: 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍中,我们介绍了官方入门文档的第一章.今天继续给大家介绍官方文档中,如何获取数据源的相关内容.虽然是英文,但 ...
- 一起学微软Power BI系列-官方文档-入门指南(3)Power BI建模
我们前2篇文章:一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍 和一起学微软Power BI系列-官方文档-入门指南(2)获取源数据 中,我们介绍了官方入门文档与获取 ...
随机推荐
- NPOI 数据导入导出
{ //数据导入 OpenFileDialog open = new OpenFileDialog(); open.Filter = "Excle文件|*.xls"; open.T ...
- BZOJ 3176 Sort
先一遍reverse+逆序对个数. 要开long long啊. #include<iostream> #include<cstdio> #include<cstring& ...
- Cannot forward after response has been committed
项目:蒙文词语检索 日期:2016-05-01 提示:Cannot forward after response has been committed 出处:request.getRequestDis ...
- Android Studio安装插件GsonFormat
Android Studio菜单栏File > Settings > plugins' 这个是Android Studio搜索和安装插件的界面,下面直接上动图 : 安装结束后需要关闭重新启 ...
- css添加样式的四种方式
1. 导入样式:在 .css文件中使用@import url("...")来引入另一个css样式表 2. 外部样式:在html页面中的head中使用 link 标签引入,如< ...
- 混合开发H5的图片怎么适配自己想要的大小
1.先上个自己没适配的图,这个图没显示全,因为用的是webview 所以 用的是webView的代理事件 解决 2.上代码 NSString *injectionJSString = @"v ...
- clip 属性剪裁绝对定位元素
如果left >= right或者bottom <= top,则元素会被完全裁掉而不可见,即“隐藏”.通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的,从而提高了页面的可用性. I ...
- Reconstruct Itinerary
Given a list of airline tickets represented by pairs of departure and arrival airports [from, to], r ...
- drozer安装之夜深模拟器
首先下载drozer的安装包 可以直接到官网下载:https://labs.mwrinfosecurity.com/tools/drozer/ 安装 解压压缩包其中 setup.exe 为Win ...
- Mark Down绘图语法
以下语法在网易云笔记中测试通过. 绘图的标志位是三个单引号``` 开始 ``` 结尾 ,注意是英文半角的单引号,以下的字符也是英文半角状态下的才正确. 搜狗输入法的要特别注意,记得把shift 切 ...