前端框架ReactJs⼊门教程【精】
现在最热门的前端框架有AngularJS、React、Bootstrap等。⾃从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下⾯来跟我⼀起领略
jquery在线免费学习教程ReactJS的风采吧~~ 章有点长，耐⼼读完，你会有很⼤收获哦~
⼀、ReactJS简介
React 起源于 Facebook 的内部项⽬，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定⾃⼰写⼀套，⽤来架设 Instagram 的⽹站。做出来以后，发现这套东西很好⽤，就在2013年5⽉开源了。由于 React 的设计思想极其独特，属于⾰命性创新，性能出众，代码逻辑却⾮常简单。所以，越来越多的⼈开始关注和使⽤，认为它可能是将来 Web 开发的主流⼯具。
⼆、对ReactJS的认识及ReactJS的优点
⾸先，对于React，有⼀些认识误区，这⾥先总结⼀下：
React不是⼀个完整的MVC框架，最多可以认为是MVC中的V（View），甚⾄React并不⾮常认可MVC开发模式；
React的服务器端Render能⼒只能算是⼀个锦上添花的功能，并不是其核⼼出发点，事实上React官⽅站点⼏乎没有提及其在服务器端的应⽤；
有⼈拿React和Web Component相提并论，但两者并不是完全的竞争关系，你完全可以⽤React去开发⼀个真正的Web Component；
React不是⼀个新的模板语⾔，JSX只是⼀个表象，没有JSX的React也能⼯作。
1、ReactJS的背景和原理
在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进⾏操作。⽽复杂或频繁的DOM操作通常是性能瓶颈产⽣的原因（如何进⾏⾼性能的复杂DOM操作通常是衡量⼀个前端开发⼈员技能的重要指标）。React为此引⼊了虚拟DOM（Virtual DOM）的机制：在浏览器端⽤Javascript实现了⼀套DOM API。基于React进⾏开发时所有的DOM构造都是通过虚拟DOM进⾏，每当数据变化
时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上⼀次的DOM树进⾏对⽐，得
到DOM结构的区别，然后仅仅将需要变化的部分进⾏实际的浏览器DOM更新。⽽且React能够批处理虚拟DOM的刷新，在⼀个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后⼜从B变成A，React会认为UI不发⽣任何变化，⽽如果通过⼿动控制，这种逻辑通常是极其复杂的。尽管每⼀次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极⾼的，⽽对实际DOM进⾏操作的仅仅是Diff部分，因⽽能达到提⾼性能的⽬的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到⼀个或多个具体的DOM元素，⽽只需要关⼼在任意⼀个数据状态下，整个界⾯是如何Render的。
如果你像在90年代那样写过服务器端Render的纯Web页⾯那么应该知道，服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为⽤户的⼀个点击需要改变某个状态⽂字，那么也是通过刷新整个页⾯来完成的。服务器端并不需要知道是哪⼀⼩段HTML发⽣了变化，⽽只需要根据数据刷新整个页⾯。换句话说，任何UI的变化都是通过整体刷新来完成的。⽽React将这种开发模式以⾼性能的⽅式带到了前端，每做⼀点界⾯的更新，你都可以认为刷新了整个页⾯。⾄于如何进⾏局部更新以保证性能，则是React框架要完成的事情。
借⽤Facebook介绍React的视频中聊天应⽤的例⼦，当⼀条新的消息过来时，传统开发的思路如上图，你的开发过程需要知道哪条数据过来了，如何将新的DOM结点添加到当前DOM树上；⽽基于React的开发思路如下图，你永远只需要关⼼数据整体，两次数据之间的UI如何变化，则完全交给框架
去做。可以看到，使⽤React⼤⼤降低了逻辑复杂性，意味着开发难度降低，可能产⽣Bug的机会也更少。
2、组件化
虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具有独⽴功能的UI部件。React推荐以组件的⽅式去重新思考UI构成，将UI上每⼀个功能相对独⽴的模块定义成组件，然后将⼩的组件通过组合或者嵌套的⽅式构成⼤的组件，最终完成整体UI的构建。例如，Facebook的instagram整站都采⽤了React来开发，整个页⾯就是⼀个⼤的组件，其中包含了嵌套的⼤量其它组件，⼤家有兴趣可以看下它背后的代码。
如果说MVC的思想让你做到视图-数据-控制器的分离，那么组件化的思考⽅式则是带来了UI功能模块之间的分离。我们通过⼀个典型的Blog 评论界⾯来看MVC和组件化开发思路的区别。
对于MVC开发模式来说，开发者将三者定义成不同的类，实现了表现，数据，控制的分离。开发者更多的是从技术的⾓度来对UI进⾏拆分，实现松耦合。
对于React⽽⾔，则完全是⼀个新的思路，开发者从功能的⾓度出发，将UI分成不同的组件，每个组件都独⽴封装。
在React中，你按照界⾯模块⾃然划分的⽅式来组织和编写你的代码，对于评论界⾯⽽⾔，整个UI是⼀个通过⼩组件构成的⼤组件，每个组件只关⼼⾃⼰部分的逻辑，彼此独⽴。
React认为⼀个组件应该具有如下特征：
（1）可组合（Composeable）：⼀个组件易于和其它组件⼀起使⽤，或者嵌套在另⼀个组件内部。如果⼀个组件内部创建了另⼀个组件，那么说⽗组件拥有（own）它创建的⼦组件，通过这个特性，⼀个复杂的UI可以拆分成多个简单的UI组件；
（2）可重⽤（Reusable）：每个组件都是具有独⽴功能的，它可以被使⽤在多个UI场景；
（3）可维护（Maintainable）：每个⼩的组件仅仅包含⾃⾝的逻辑，更容易被理解和维护；
三、下载ReactJS，编写Hello，world
ReactJs下载⾮常简单，为了⽅便⼤家下载，这⾥再⼀次给出下载地址（），下载完成后，我么看到的是⼀个压缩包。解压后，我们新建⼀个html⽂件，引⽤react.js和JSXTransformer.js这两个js⽂件。html模板如下(js路径改成⾃⼰的):
这⾥⼤家可能会奇怪，为什么script的type是text/jsx，这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使⽤ JSX 的地⽅，都要加上 type="text/jsx" 。其次，React 提供两个库： re
act.js 和 JSXTransformer.js ，它们必须⾸先加载。其中，JSXTransformer.js 的作⽤是将 JSX 语法转为 JavaScript 语法。这⼀步很消耗时间，实际上线的时候，应该将它放到服务器完成。
到这⾥我们就可以开始编写代码了，⾸先我们先来认识⼀下ReactJs⾥⾯的der⽅法：
下⾯我们在script标签⾥⾯编写代码，来输出Hello，world，代码如下：
这⾥需要注意的是，react并不依赖jQuery，当然我们可以使⽤jQuery，但是render⾥⾯第⼆个参数必须使⽤JavaScript原⽣的getElementByID⽅法，不能使⽤jQuery来选取DOM节点。
然后，在浏览器打开这个页⾯，就可以看到浏览器显⽰⼀个⼤⼤的Hello，world，因为我们⽤了
标签。
到这⾥，恭喜，你已经步⼊了ReactJS的⼤门~~下⾯，让我们来进⼀步学习ReactJs吧~~
四、Jsx语法
HTML 语⾔直接写在 JavaScript 语⾔之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写，了解过AngularJs的看到下⾯的代码⼀定会感觉很熟悉的，我们来看代码：
这⾥我们声明了⼀个names数组，然后遍历在前⾯加上Hello，输出到DOM中，输出结果如下：
JSX 允许直接在模板插⼊ JavaScript 变量。如果这个变量是⼀个数组，则会展开这个数组的所有成员，代码如下：
显⽰结果如下：
这⾥的星号只是做标识⽤的，⼤家不要被迷惑了~~
你看到这⾥，说明你对React还是蛮感兴趣的，恭喜你，坚持下来了，那么下⾯，我们开始学习React
⾥⾯的"真功夫"了~~ Are　you ready?
五、ReactJS组件
1、组件属性
前⾯说了，ReactJS是基于组件化的开发，下⾯我们开始来学习ReactJS⾥⾯的组件，React 允许将代码封装成组件（component），然后像插⼊普通 HTML 标签⼀样，在⽹页中插⼊这个组件。ateClass ⽅法就⽤于⽣成⼀个组件类。
下⾯，我们来编写第⼀个组件Greet，有⼀个name属性，然后输出hello + name的值，代码如下：
看到这段代码，接触过AngularJS的朋友们是不是有⼀种熟悉的感觉，不过这⾥有⼏点需要注意：
1）获取属性的值⽤的是this.props.属性名
2）创建的组件名称⾸字母必须⼤写。
3）为元素添加css的class时，要⽤className。
4）组件的style属性的设置⽅式也值得注意，要写成style={{width: this.state.witdh}}。
2、组件状态
组件免不了要与⽤户互动，React 的⼀⼤创新，就是将组件看成是⼀个状态机，⼀开始有⼀个初始状态，然后⽤户互动，导致状态变化，从⽽触发重新渲染 UI 。下⾯我们来编写⼀个⼩例⼦，⼀个⽂本框和⼀个button，通过点击button可以改变⽂本框的编辑状态，禁⽌编辑和允许编辑。通过这个例⼦来理解ReactJS的状态机制。先看代码：
这⾥，我们⼜使⽤到了⼀个⽅法getInitialState，这个函数在组件初始化的时候执⾏，必需返回NULL或者⼀个对象。这⾥我们可以通过this.state.属性名来访问属性值，这⾥我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使⽤setState⽅法。我们声明handleClick⽅法，来绑定到button上⾯，实现改变able的值。效果如下：
原理分析：
当⽤户点击组件，导致状态变化，this.setState ⽅法就修改状态值，每次修改以后，⾃动调⽤ der ⽅法，再次渲染组件。
这⾥值得注意的⼏点如下：
1）getInitialState函数必须有返回值，可以是NULL或者⼀个对象。
2）访问state的⽅法是this.state.属性名。
3）变量⽤{}包裹，不需要再加双引号。
3、组件的⽣命周期
组件的⽣命周期分成三个状态：
Mounting：已插⼊真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进⼊状态之前调⽤，did 函数在进⼊状态之后调⽤，三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调⽤
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调⽤
下⾯来看⼀个例⼦：
上⾯代码在hello组件加载以后，通过 componentDidMount ⽅法设置⼀个定时器，每隔100毫秒，就重新设置组件的透明度，从⽽引发重新渲染。
4、组件的嵌套
React是基于组件化的开发，那么组件化开发最⼤的优点是什么？毫⽆疑问，当然是复⽤，下⾯我们来看看React中到底是如何实现组件的复⽤的，这⾥我们还写⼀个例⼦来说吧，代码如下：
这⾥我们创建了⼀个Search组件，然后⼜创建了⼀个Page组件，然后我们在Page组件中调⽤Search组件，并且调⽤了两次，这⾥我们通过属性searchType传⼊值，最终显⽰结果如图：
六、ReactJS⼩结
关于ReactJS今天就先学习到这⾥了，下⾯来总结⼀下，主要有以下⼏点：
1、ReactJs是基于组件化的开发，所以最终你的页⾯应该是由若⼲个⼩组件组成的⼤组件。
2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到⽗级组件(留给⼤家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。
3、为组件添加外部css样式时，类名应该写成className⽽不是class；添加内部样式时，应该是style={{opacity: this.state.opacity}}⽽不是。
4、组件名称⾸字母必须⼤写。
5、变量名⽤{}包裹，且不能加双引号。
七、参考资料

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。