说说最近比较火的一个前端框架,由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>