说说最近比较火的一个前端框架，由facebook在2013直接开源，它完全的颠覆了我的前端思维，像以往的html，若是我们想将html穿插在JS中就需要拼接字符串，而React就完全打破了这种设计模式，直接在render中可以渲染出来，打破MVC模式，实现数据，表现，控制的分离。据我所知，国内比如支付宝、淘宝、Teambition、豌豆荚以及豆瓣，还有国外的BBC、Facebook、Github、Uber、Yahoo都在使用，所以在我们科长的推荐下，我开始接触React。
Facebook当时遇到的问题是，对于脸书这种世界级的大型应用来说，需要不断的变动数据，也就是需要我们开发人员进行 大量的DOM操作，并且逻辑十分复杂。React的诞生就很好的解决了这些问题，自动DOM操作、状态对应内容。
React使用虚拟DOM，以往的框架需要操作100次DOM，而React由于使用其本身的虚拟DOM,只需进行一次DOM请求，极大的增强了客户体验！React的核心是组件，目的是提高代码复用率、降低测试难度和代码复杂度（组件将数据和逻辑封装、容易对单个组件进行测试以及直观的语法）。
什么是JSX?JSX=JavaScriptXML,xml同html一样可以使用各种各样的标签及属性。它是基于ECMAScript的一种新特性，是一种定义DOM的语法（它只是语法！）！JSX不是XML或者HTML,特点是：代码模块化，增强JS语义，类XML语法易于接受，抽象程度高，结构清晰！（对于java开发的应该比纯前端要好开发吧。）
作为js的保留字，在React里，html和class分别被改成htmlFor和className。生命周期与生命周期之间要用“，”分开！render中若需要嵌入html代码，需要用div包裹，并且div必须与return同行（不知道是不是这个问题，反正我就进入了这个坑，坑了一下午才出坑！）！React并不推荐开发人员直接插入HTML代码，若是有不好的链接直接就能进入木马...但React并未阻止开发人员这样做，它设置了非DOM属性，即：dangerouslySetInnerHTML,我们需要在外部var aa={__html:"<p>xxxxxxx</p>"}(此处__html是必须这样写，并不是我们自己定义的！)。然后就能使用啦！还有一些非DOM属性，如：“ref”,代表父组件引用子组件，“key”,提高渲染性能，给每一个节点增加唯一标识!
上代码解释它的生命周期：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="react.js" type="text/javascript" charset="utf-8"></script>
<script src="react-dom.js" type="text/javascript" charset="utf-8"></script>
<script src="browser.min.js" type="text/javascript" charset="utf-8"></script>
</head><body<div id="div1"></div</body>
<script type="text/babel">
//生命周期的顺序
var NotesList = React.createClass({
getDefaultProps: function() { //只调用一次，势力之间共享引用,ZAI createClass就形成
console.log("getDefaultProps,1");
return {};
},
getInitialState: function() { //初始化每个实例特有的状态，必须返回！
console.log("getInitialState,2");
return {};
},
componentWillMount: function() { //render之前最后一次修改状态
console.log("componentWillMount,3");
},
render: function() { //只能访问this.props和this.states,只有一个顶层组件，不允许修改状态和DOM输出
console.log("render,4");
return (
<div>hello <strong>{this.props.name}</strong></div>
);
},
componentDidMount: function() { //成功render并渲染完成真实DOM之后触发，可以修改DOM
console.log("componentDidMount,5");
},
//componentWillRecieveProps: function() { }, //父组件修改属性触发，可以修改新属性，修改状态，这是最长的周期函数名，但是具体还不知道怎么用，一用就报错。
componentWillUpdate: function() { //不能修改属性和状态
console.log("componentWillUpdate,6");
},
componentDidUpdate: function() { //可以修改DOM
console.log("componentDidUpdate,7");
},
})
var list1 = ReactDOM.render(
<NotesList name='aaa'></NotesList>,
document.getElementById("div1")
);
</script>
</html>
