ReactJs快速入门教程(精华版)

时间：2021-09-11 来源：互联网编辑：宝哥软件园浏览：次

目前最流行的前端框架有AngularJS、React、Bootstrap等。自从接触到ReactJs，ReactJs的虚拟DOM和基于组件的开发深深吸引了我。和我一起欣赏ReactJS的风格吧~ ~文章有点长，耐心看完会收获很多~

一.反应堆简介

React源于脸书的内部项目，因为公司对市场上所有的JavaScript MVC框架都不满意，所以决定写一套建立Instagram网站的方案。制作完成后，发现非常有用，于2013年5月开放。因为React的设计思路极其独特，是革命性的创新，性能出众，但代码逻辑非常简单。因此，越来越多的人开始关注和使用它，认为它可能是未来Web开发的主流工具。

反应堆的官方网站地址：http://facebook.github.io/react/

Github地址：https://github.com/facebook/react

二、对反应堆的理解和反应堆的优势

首先，关于React有一些误解，这里总结一下：

React并不是一个完整的MVC框架，最多只能算是MVC中的V(View)，甚至React非常不认可MVC开发模式；React的服务器端Render能力只能算是锦上添花，并不是它的核心出发点。事实上，React的官网几乎没有提到它在服务器端的应用；有些人将React与Web Component进行比较，但它们并不完全具有竞争力。可以使用React开发一个真正的web组件；React不是一个新的模板语言，JSX只是一个表示，React可以在没有JSX的情况下工作。1.反应堆的背景和原理

在Web开发中，我们总是需要将更改后的数据实时反映到UI中，因此需要对DOM进行操作。复杂或频繁的DOM操作通常是性能瓶颈的原因(如何执行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。为此，React引入了DOM机制(Virtual DOM:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时，所有的DOM构建都是通过虚拟DOM进行的。每当数据发生变化时，React将重建整个DOM树。然后React会将整个DOM树与之前的DOM树进行比较，得到DOM结构的差异，然后只针对需要改变的部分更新实际的浏览器DOM。此外，React可以批量刷新虚拟DOM，一个事件循环中的两个数据变化将被合并。例如，如果连续将节点内容从a更改为b，再从b更改为a，React会认为UI根本不会改变，但如果是手动控制，这种逻辑通常会极其复杂。虽然每次都需要构造一个完整的虚拟DOM树，但由于虚拟DOM是内存数据，其性能极高，而实际的DOM只由Diff操作，因此可以提高其性能。这样，在保证性能的同时，开发人员将不再需要关注某个数据变化是如何更新为一个或多个特定的DOM元素的，而只需要关注整个接口在任何数据状态下是如何Render的。

如果你已经像上世纪90年代那样在服务器端编写了纯Web页面Rendered，你应该知道服务器端要做的就是根据数据渲染HTML并发送给浏览器端。如果某个状态文本因为用户的点击而需要更改，也可以通过刷新整个页面来完成。服务器不需要知道哪个HTML发生了变化，只需要根据数据刷新整个页面即可。换句话说，任何用户界面的改变都是通过整体刷新完成的。React以高性能的方式将这种开发模式带到了前端。每次更新界面，可以认为整个页面都刷新了。至于如何在本地更新以确保性能，这是React框架应该完成的。

用脸书介绍React视频中的聊天应用。当新的消息来临时，传统的开发思路如上图所示。您的开发过程需要知道哪些数据已经到来，以及如何将新的DOM节点添加到当前的DOM树中；基于React的开发思路如下图所示。你只需要永远关心整个数据。UI如何在两次数据之间变化完全由框架决定。可以看出，React的使用大大降低了逻辑复杂度，意味着开发难度降低，bug出现的机会也更少。

2.组件化

虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑，还带来了组件开发的思想，即所谓的组件，即功能独立的打包UI组件。React建议以组件的方式重新思考UI组合，将UI上功能相对独立的各个模块定义为一个组件，然后将小组件组合或嵌套成大组件，最终完成整体UI构建。例如，instagram.com脸书的整个站点都是由React开发的。整个页面是一个大组件，其中包含大量嵌套的其他组件。如果你感兴趣，可以看看它背后的代码。

如果MVC让你分离视图-数据-控制器，那么组件思维的方式带来了UI功能模块之间的分离。我们通过一个典型的博客评论界面来看看MVC和基于组件的开发之间的区别。

对于MVC开发模式，开发人员将三者定义为不同的类，实现了表示、数据和控制的分离。开发人员从技术角度拆分UI，实现松耦合。

对于React来说，这是一个全新的想法。从功能上看，开发人员将UI划分为不同的组件，每个组件都是独立打包的。

在React中，您根据接口模块的自然划分来组织和编写代码。对于评论界面，整个UI是由小组件组成的大组件，每个组件只关心自己的逻辑，相互独立。

React认为一个组件应该具有以下特征：

(1)可组合：一个组件易于与其他组件一起使用，或者嵌套在另一个组件中。如果在组件内部创建了另一个组件，则父组件拥有它创建的子组件。通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；

(2)可重用：每个组件都有独立的功能，可以在多个UI场景中使用；

(3)可维护性：每个小组件只包含自己的逻辑，更容易理解和维护；

第三，下载ReactJS，写你好，世界

ReactJs的下载非常简单。为了方便大家，这里又是下载地址。在http://facebook.github.io/react/downloads.html,下载完成后，我们看到的是一个压缩包。解压缩后，我们创建一个新的html文件，引用两个js文件：react.js和JSXTransformer.js Html模板如下(js路径改为own) :

！DOCTYPE html html head script src=' http : build/react . js '/script script src=' http : build/jsxtransformer . js '/script/head body div id=' container '/div script type=' text/jsx '/* *我们的代码到这里了！** /script /body/html在这里，您可能想知道为什么脚本的类型是text/JSX，因为React独特的JSX语法与JavaScript不兼容。只要使用JSX，就应该添加type=“text/JSX”。其次，React提供了两个库：react.js和JSXTransformer.js，必须先加载。JSXTransformer.js的功能是将JSX语法转换成JavaScript语法。这一步比较耗时，应该在服务器真正上线的时候放在服务器上。

此时，我们可以开始编写代码了。首先，让我们了解ReactJs中的React.render方法：

React.render是React最基本的方法，用于将模板转换为HTML语言，并插入指定的DOM节点。

让我们在脚本标签中编写代码来输出Hello，world。代码如下：

React.render(h1Hello，world！/h1，document . getelementbyid(' container ')；这里需要注意的是react并不依赖于jQuery，当然我们可以使用jQuery，但是render中的第二个参数必须使用JavaScript的原生getElementByID方法，并且jQuery不能用于选择DOM节点。

然后，当您在浏览器中打开这个页面时，您可以看到浏览器显示一个很大的Hello，world，因为我们使用了h1标签。

在这里，恭喜你，你已经踏入了ReactJS的大门~ ~让我们进一步学习ReactJs吧~ ~

第四，Jsx语法

HTML语言是直接用JavaScript语言编写的，没有任何引号。这是JSX的语法，它允许HTML和JavaScript混合使用。了解AngularJs的人会觉得熟悉下面的代码。让我们看看代码：

不同的名字=['杰克'，'汤姆'，'爱丽丝']；react . render(div { names . map(function(name){ return div hello，{name}！/div }) } /div，document . getelementbyid(' container ')；在这里，我们声明一个names数组，然后用前面的Hello遍历它，并将其输出到DOM。输出结果如下：

JSX允许JavaScript变量直接插入模板。如果变量是数组，数组的所有成员都将被展开，代码如下：

var arr=[ h1Hello world！/h1，h2React完美！/h2，]；React.render(div*{arr}*/div，document . getelementbyid(' container '))；显示结果如下：

这里的星号只是为了识别，不要被她骗了~ ~

当你看到这个，就说明你对React相当感兴趣。恭喜你，你坚持了下来。那么，让我们开始学习《反应》中的“真功夫”吧~~你准备好了吗？

动词（verb的缩写）ReactJS组件

1.组件属性

如前所述，ReactJS基于基于组件的开发。让我们开始学习ReactJS中的组件。React允许将代码封装到组件中，然后将这个组件插入到网页中，就像插入普通的HTML标签一样。方法用于生成组件类。

接下来，让我们编写第一个组件Greet，它有一个name属性，然后输出hello name的值。代码如下：

var Greet=react . create class({ render : function(){ return h1 hello { this . props . name }/h1；} });React.render(问候语名称='Jack' /，document . getelementbyid(' container '))；看到这段代码，接触过AngularJS的朋友都有一种熟悉的感觉，但是这里有几点需要注意：

1.属性的名称用于获取属性的值

2.创建的组件名称的第一个字母必须大写。

3.向元素中添加css类时，请使用类名。

4.组件样式属性的设置方法也值得注意。应该写成style={{width : this。state.witdh}}

2.组件状态

组件与用户交互是不可避免的。React的创新之一就是将组件看作一个状态机，一开始有一个初始状态，然后用户之间进行交互，导致状态的改变，从而触发UI的重渲染。让我们写一个小例子，一个文本框和一个按钮。通过单击按钮，您可以更改文本框的编辑状态，禁止编辑和允许编辑。通过这个例子了解ReactJS的状态机制。先看看代码：

var InputState=react . createclass({ getinitialstate : function(){ return { enable : false }；}，handleClick:函数(事件){ this.setState({enable:this . state . enable })；}，render: function() { return (p输入类型=' text ' disabled={ this . State . enable }/button onClick={ this . handleclick } Change State/button/p)；} });React.render(InputState /，document . getelementbyid(' container '))；这里，我们使用另一个方法，getInitialState，它在组件初始化时执行，必须返回NULL或一个对象。这里，我们可以通过this.state的名称来访问属性值。这里，我们将enable值绑定到输入的disabled。当我们想要修改这个属性值时，我们应该使用setState方法。我们声明handleClick方法绑定到按钮来改变状态的值。

原理分析：

当用户单击组件，导致状态改变时，this.setState方法修改状态值，每次修改后，它自动调用this.render方法再次呈现组件。

以下是一些值得注意的要点：

1.getInitialState函数必须有一个返回值，可以是NULL，也可以是一个对象。

2.访问状态的方法是this.state .属性名。

3.变量用{}包装，不需要加双引号。

3.组件的生命周期

组件的生命周期分为三种状态：

挂载：插入真实DOM更新：被重新渲染挂载：移出真实DOMReact为每个状态提供了两种处理函数。进入状态前调用will函数，进入状态后调用did函数。在三种状态下有五种处理功能。

componentwillmount()component idmount()componentwillupdate(对象下一个道具，对象下一个状态)componenttwillunmount()此外，React还提供了两个特殊的状态处理功能。

component twillreceiveprops(object nextprops):当加载的组件接收到新参数时，调用shoulcomponent update(object nextprops，object nextstate)；当组件判断是否重新呈现时调用它。

var Hello=react . createclass({ getinitialstate : function(){ return { opa city 3360 1.0 }；}，componentdimunt : function(){ this . timer=setInterval(function(){ var opacity=this . state . opacity；不透明度-=. 05；if(不透明度0.1) {不透明度=1.0；} this . setstate({ opa city 3360不透明度})；}.绑定(这个)，100)；}，render : function(){ return(div style={ { opa city 3360 this . state . opacity } } Hello { this . props . name }/div)；} });react . render(Hello name=' world '/document . body)；加载hello组件后，上面的代码通过componentDidMount方法设置一个定时器，每100毫秒重置一次组件的透明度，从而触发重渲染。

4.组件嵌套

React是基于组件开发的，那么组件开发最大的优势是什么呢？当然，重用是毫无疑问的。让我们来看看如何在React中实现组件的重用。这里我们也写一个例子，代码如下：

var Search=react . create class({ render : function(){ return(div { this . props . Search type } : input type=' text '/button Search/button/div)；} });var Page=react . createclass({ render : function(){ return(div h1 welcome！/h1搜索搜索类型='Title' /搜索搜索类型=' Content '/div)；} });React.render(Page /，document.getElementById('容器'))；在这里，我们创建了一个搜索组件，然后创建了一个页面组件，然后我们在页面组件中调用了搜索组件两次。这里，我们通过属性searchType传递了该值，最终结果如下所示：