react基础

1、react发展


facebook在构建instagram网站的时候遇见两个问题


1）数据绑定的时候，大量操作真实dom，性能成本太高


2）网站的数据流向太混乱，不好控制

于是facebook起初调研过市场上已存的mvc框架，发现都不太满意，于是就推陈出新，开发了react框架，并在2013年五月份开源

2、React的特点：
1）简单
2）声明式—自动dom操作


React的核心是组件，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。


提高代码复用率：组件将数据和逻辑封装，类似面向对象中的类。

降低测试难度：组件高内聚低耦合，很容易对单个组件进行测试。

降低代码复杂度：直观的语法可以极大提高可读性。

３、react概述

      和angularJS一样react核心解决的问题是数据绑定，开发者只要将数据绑定好，剩下的开发中只要关注业务就行了


      1）组件化开发   使用react开发的时候，构建任何的页面都是组件component


       2）jsx语法和虚拟dom基于jsx语法进行 创建组件，react用变量的形式自定义了一套dom模型    jsx=在js中写入xml标签


       3）组件具有生命周期     每个组件都有生命周期，开发者可以基于生命周期对组件进行管理


        4）单向数据流

4、创建react的一个组件


1）下载react  lib文件


2）导入各个文件


3）创建组件


4）渲染

组件是一个集合体，就是把html，js，css放在一起形成一个组件

5、起步

第一步引入 

<script src="lib/react.min.js"></script>   //把react的核心方法、事件机制封装其中

<script src="lib/react-dom.min.js"></script>    //把虚拟dom转换成真实dom
<script src="lib/browser.min.js"></script> //把jsx 语法 / babel转换成浏览器可识别的语法   / 本地文件不生效的时候选择官网cdn引入

6、第二步修改babel

<script type="text/babel"> </script>   //自己的js文件type的值要修改成babel

7、第三步创建存放组件的容器

<div id="out"></div>         body中创建一个div这是存放组件的容器

8、第四步创建组件

var Demo=React.createClass({
render:function(){
return(
<h1>初次接触react组件</h1>
)
}
})

9、第五步渲染  把虚拟dom转化成真实dom

ReactDOM.render(<Demo/>,document.getElementById("out"))

10、第四步return中如果我想在加一个标签    我们需要在外面加一层div 因为return只能返回一个xml标签

var Demo=React.createClass({
render:function(){
return(
<div>
<h1>初次接触react组件</h1>
<h2>外层需要加一个div包住标签</h2>
</div>
)
}
}) 

11、return中注释     {/*<h2>这里是注释噢！</h2>*/}

12、样式

样式中id名字可用   name名字可用  class名改为className

var Demo=React.createClass({
render:function(){
return(
<div>
<h1  id=“h1”  name=“hh1”>初次接触react组件</h1>
<h2  className=“h2”>外层需要加一个div包住标签</h2>
</div>
)
}
}) 

13、行间样式  style={json对象}   ---主张方式

var Demo=React.createClass({
render:function(){
return(
<div>
<h1 id="h1" name="hh1">初次接触react组件</h1>
<h2 className="h2">外层需要加一个div包住标签</h2>
<h2 style={{ " color " : " red " ，“ background ” : " pink " }}>行间样式设置</h2>
</div>
)
}
})

14、行间样式---> 外部引入样式

var Demo=React.createClass({
render:function(){
var sty={"color":"red","background":"pink"}
return(
<div>
<h1 id="h1" name="hh1">初次接触react组件</h1>
<h2 className="h2">外层需要加一个div包住标签</h2>
<h2 style={sty}>行间样式设置</h2>
</div>
)
}
})

15、行间样式---> 全局样式

var sty1={
aa:{color:'#ccc',fontSize:"30px"},
bb:{color:'#f0f'}
}

var Demo=React.createClass({
render:function(){
return(
<div>
<h1 id="h1" name="hh1">初次接触react组件</h1>
<h2 className="h2">外层需要加一个div包住标签</h2>
<h2 style={sty}>行间样式设置</h2>
<p style={sty1.aa}>全局样式111</p>
<p style={sty1.bb}>全局样式222</p>
</div>
)
}
})

16、原型样式    组件内部通过this调用原型设置的样式   必须要设置在组件创建和组件渲染之间

var sty1={
aa:{color:'#ccc',fontSize:"30px"},
bb:{color:'#f0f'}

}

var Demo=React.createClass({
render:function(){

var sty={"color":"red","background":"pink"}
var _this=this
return(
<div>
<h1 id="h1" name="hh1">初次接触react组件</h1>
<h2 className="h2">外层需要加一个div包住标签</h2>
<h2 style={sty}>行间样式设置</h2>
<p style={sty1.aa}>全局样式111</p>
<p style={sty1.bb}>全局样式222</p>
<p style={_this.sty2.cc}>原型样式111</p>
<p style={_this.sty2.dd}>原型样式222</p>
</div>
)
}

})
//必须要写在中间
Demo.prototype.sty2={
cc:{'color':'firebrick'},
dd:{'color':'gold'}
}

ReactDOM.render(<Demo/>,document.getElementById("out"))

17、事件

var  sty = {aa : {color:"#ccc"}}

var Demo=React.createClass({

tap:function(){
alert('事件机制')
}， //这里不要忘了加上逗号分割
render:function(){
return(
<div>
<h1 style={sty.aa}>事件</h1>
<button onClick={this.tap}>事件机制</button>
</div>
)
}
})

18、全局事件

var  sty = {aa : {color:"#ccc"}}

var Demo=React.createClass({
tap:function(){
alert('事件机制')
}， //这里不要忘了加上逗号分割
render:function(){
return(
<div>
<h1 style={sty.aa}>事件</h1>
<button onClick={this.tap}>事件机制</button>
</div>
)
}
})