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入门指南的更多相关文章

  1. ReactJs入门思路

    ReactJs入门思路小指南 原文  http://segmentfault.com/blog/fakefish/1190000002449277 React是怎么搞的? React中,把一切东西都看 ...

  2. Web API 入门指南 - 闲话安全

    Web API入门指南有些朋友回复问了些安全方面的问题,安全方面可以写的东西实在太多了,这里尽量围绕着Web API的安全性来展开,介绍一些安全的基本概念,常见安全隐患.相关的防御技巧以及Web AP ...

  3. Vue.js 入门指南之“前传”（含sublime text 3 配置）

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  4. yii2实战教程之新手入门指南-简单博客管理系统

    作者:白狼 出处:http://www.manks.top/document/easy_blog_manage_system.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文 ...

  5. 【翻译】Fluent NHibernate介绍和入门指南

    英文原文地址:https://github.com/jagregory/fluent-nhibernate/wiki/Getting-started 翻译原文地址:http://www.cnblogs ...

  6. ASP.NET MVC 5 入门指南汇总

    经过前一段时间的翻译和编辑,我们陆续发出12篇ASP.NET MVC 5的入门文章.其中大部分翻译自ASP.NET MVC 5 官方教程,由于本系列文章言简意赅,篇幅适中,从一个web网站示例开始讲解 ...

  7. 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍

    我们在前一篇文章微软新神器-Power BI,一个简单易用,还用得起的BI产品中,我们初步介绍了Power BI的基本知识.由于Power BI是去年开始微软新发布的一个产品,虽然已经可以企业级应用, ...

  8. 一起学微软Power BI系列-官方文档-入门指南(2)获取源数据

    我们在文章: 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍中,我们介绍了官方入门文档的第一章.今天继续给大家介绍官方文档中,如何获取数据源的相关内容.虽然是英文,但 ...

  9. 一起学微软Power BI系列-官方文档-入门指南(3)Power BI建模

    我们前2篇文章:一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍 和一起学微软Power BI系列-官方文档-入门指南(2)获取源数据 中,我们介绍了官方入门文档与获取 ...

随机推荐

  1. Vue.js常用指令总结

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind ...

  2. 用VC调用EXCEL简单代码(转载自越长大越孤单，觉得很好)

    首先在stdafx.h里加入对IDispatch接口提供支持的头文件: #include <afxDisp.h> 再在应用程序类的InitInstance()函数里加入: AfxOleIn ...

  3. Java—从文件中读取数据

    1.FileInputStream() // 构建字节输入流对象,参数为文件名 FileInputStream fin = new FileInputStream("message" ...

  4. 【转】C#多线程

    C#中的多线程编程 C#是.Net平台的通用开发工具,它能够建造所有的.Net应用.在.Net中所有线程都运行在应用程序域(AppDomain)中,这也许让你想到Win32进程,实际上它们还是有很大的 ...

  5. OKHttp

    以前学习android知识时 不怎么总结 以后学到的知识尽量多反思 相信"学而不思则惘.思而不学则怠"这句话  希望未来的日子 快乐的生活 快乐的编码!第一遍博文总结一下OKHtt ...

  6. 12、（扩展）获取省份表，填充于下拉列表框的简易js

    在制作省份下拉列表时,我们常常会遇到大量省份不停复制粘贴的问题,比如百度到这样一个填充着省份信息的表格: 里面含有很多条数据和内容,这时候要一条一条复制粘贴非常繁冗,所以在同事的启发下我写了一个简易的 ...

  7. IOS 错误 [UIWebView cut:]: unrecognized selector sent to instance

    那在什么场景中会出现这种情况呢? 如果一个包含文字的输入元素有焦点,然后按钮的点击会导致输入失去焦点,然后接下来在输入时双按会重新得到焦点并从弹出bar中选择剪切复制粘贴,就会导致此error. 也就 ...

  8. [翻译] LTE/LTE-Advanced for Mobile Broadband-10.4

    10.4 下行L1/L2控制信令 上下行信道的数据传输,需要特定的“下行控制信令”提供支持.下行控制信令通常被称为“下行L1/L2控制信令”,这表示该控制信令部分来自物理层(L1),部分来自MAC层( ...

  9. test「Python」流程&中文

    #例1 text='dShArpen骑草泥马在马勒隔壁玩Python时看到一群SB绿茶婊在逗逼,马上的他马上吓尿了' iftext = '马' for letter in text.decode('u ...

  10. 实现TCP、UDP相互通信及应用

    实验名称  Socket编程综合实验(1) 一.实验目的: 1.理解进程通信的原理及通信过程 2.掌握基于TCP和UDP的工作原理 3.掌握基本的Socket网络编程原理及方法 二.实验内容 1.掌握 ...