让我难忘的前端框架-React

在alibaba的实习项目sm_fetcher中，前端框架我用到了React，我觉得这是一个很有必要去学习的一个框架。那仫它的神奇之处在哪里呢？下面就让我来揭秘吧~~~
1、什仫什React？
React是一个用于构建用户界面的Javascript库，但是React并不是一套完整的MVC或者是MVM的框架，它仅仅涵盖V–>view视图层。React所做的事情主要就是对表单元素做了专门的优化处理，它对表单做了一些抽象，使得他们的使用方式更统一更规范，并且往往包含了错误校验等逻辑。
2、约束性组件和非约束性组件
1>、约束性组件：由React来管理它的value；

<input type="text" value={this.state.name} onChange={this.handleChangel}/>
//省略部分代码
handleChange:function(e){
     this.setState({name:e.target.value});
}

在这里，value属性不再是一个写死的值，它是this.state.name，而this.state.name是this.handleChange负责管理的。在这个时候input的value根本不是用户输入的内容，而是onChange事件触发之后，由于this.setState导致了一次重新的渲染。但是React会优化这个渲染，实际上它依然是通过设置input的value来实现的。我们可以在handleChange中对用户输入的值做任意的处理，例如可以做错误校验。
2>、非约束性组件：就是由原生的DOM来管理的；

<input type="text" defaultValue="a"/>

这个defaultValue就是原生DOM中的value属性。这样写出来的组件，其value值就是用户输入的内容，React可以不需要管理输入的过程。
3>、约束性组件和非约束性组件的流程

非约束性组件：用户输入A-->input中显示A
约束性组件：用户输入A-->触发onChange事件-->handleChange中设置state.name="A"-->渲染input使他的value变成A；

3、React的ReactDOM.render()方法
ReactDOM.render(template,targetDOM)
该方法用于将模板转换为HTML语言，并插入指定的DOM节点；
该方法接受两个参数：第一个是创建的模板，多个dom元素外层需要使用一个标签进行包裹，如<div>；第二个参数是插入该模板的目标位置；
ReactDOM
4、React的组件之Router
路由器Router就是React的一个组件，Router组件本身只是一个容器，真正的路由要通过Route组件定义；
想要了解的更加具体的童鞋可参考如下链接： React Router使用教程
5、React.Component—>是一个抽象基类
React.Component是无法直接使用的，你必须定义它的一个基类，并且至少有一个reader()方法可使用；
想要了解的更加具体的童鞋可参考如下链接：React components使用教程

下面是我学习了一周时间完成的一个页面，功能是：用户输入url和对应的数据，点击按钮，可以实现将这个链接所对应的html源码download到文末的文本框中；

6、参考链接
https://www.cnblogs.com/clearyang/p/6898659.html
http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu
http://blog.csdn.net/baiyu753159/article/category/6857925
http://www.css88.com/react/docs/react-dom.html
http://blog.csdn.net/baiyu753159/article/details/71597985