react入门

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

ReactJS官网地址：http://facebook.github.io/react/

 

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

 对ReactJS的认识及ReactJS的优点

 首先，对于React，有一些认识误区，这里先总结一下：

• React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；
• React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；
• 有人拿React和Web Component相提并论，但两者并不是完全的竞争关系，你完全可以用React去开发一个真正的Web Component；
• React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作。

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的机会也更少。

安装：

npm i create-react-app -g

1.JSX(babel、browser)
　　JSX：可以把HTML直接写JS里
2.react
　　React特点：虚拟DOM

react主要就是使用jsx语法，是白了就是在js中直接编写html，是不是很方便很溜。。下面直接开始写法：

使用react首先需要引三个文件：
　　browser.js 它的作用是使浏览器支持babel
　　react.js 这个不用说，react主体文件
　　react-dom.js 这个是react的虚拟DOM的文件编译dom的

1.定义组件——组件（这个就用到了ES6中的class的写法）：

class 名字 extends React.Component{
　　constructor(...args){
　　　super(...args);
　　}
　　render(){
　　　return <span>aaa</span>; //return出去你要在页面展示的标签
　　}
}

2.使用组件

就跟标签一样用
　　ReactDOM.render(
　　　<span>111</span>, //可以直接写标签，（渲染什么东西）
　　　oDiv　　（要放到哪里）
　　);

ReactDOM.render(
　　　<Comp/>, //也可以使用class，注意，使用的时候直接把class当做标签来用。
　　　oDiv
　　);

 

注意：定义的时候 render出去的最外层元素有且只有一个（必须有，而且只能有一个）使用的时候直接把组件名字当做标签来用，需要和上面class的名字一样。

那么有人会说了，那么能往组件身上存放一些数据吗？答案是可以，
使用的时候，直接往组件标签身上加入属性即可，定义的时候使用就直接调用，注意是在this.props的身上：

注意：定义的时候 render出去的最外层元素有且只有一个（必须有，而且只能有一个）使用的时候直接把组件名字当做标签来用，需要和上面class的名字一样。

那么有人会说了，那么能往组件身上存放一些数据吗？答案是可以，
使用的时候，直接往组件标签身上加入属性即可，定义的时候使用就直接调用，注意是在this.props的身上：

 

那么react比如我往一个元素节点身上加入数据怎么做，正常一个组件中的数据，不可能是不变的吧，肯定是从后台过来的，这就关系到状态的变化。

注意：状态是活的，会变化的，怎么用呢？
　　定义：constructor里面——this.state={};
　　变化：方法里面——this.setState({});

使用的时候：直接用模板即可:{} 注意是单括号。比如：