React.js
react
Facebook内部的一个javascript库，它引入了一种新的方试来操作DOM。
进行数据交互的时候，利用差异算法，不用整体更新DOM，只会更新有变化的DOM，极大的提高的性能
官网访问：https://facebook.github.io/react/
国外网站，速度一般比较慢，可以访问国内的网站：http://reactjs.cn/
学习过程中，遇到任何问题都可以到这个论坛去留言：http://react-china.org/
1、特点
1、JSX语法
html结构与js可以混在一起写，更加清晰
2、虚拟DOM
通过DOM diff算法，只会更新有差异化的部分，不用渲染整个页面，从而提高效率
3、组件化
把页面上的功能都写个组件，然后可以结合起来，可以做到重用
2、安装
1、需要引入三个js文件
react.js 核心代码
react-dom.js 渲染DOM
browser.min.js 解析JSX语法
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
2、script标签的type类型一定要是text/babel
(browser.min.js看到type为text/babel的script标签后，会把里面的内容解析成正常的js语法)
<script type="text/babel"></script>
3、js的代码依然要用/**/或者//注释，不能用html的注释，要不会报错
/*ReactDOM.render(
<ul>
{
colors.map(function(value,index){
return <li>第{index}个是:{value}</li>
})
}
</ul>,
document.getElementById('box')
);*/
3、ReactDOM.render()方法
React的最基本方法，将React的模板语法转为真正的HTML，并插入到指定的DOM节点里，再渲染它
参数1：创建的元素
参数2：要添加给谁（DOM元素）
参数3：渲染成功后的回调函数
<script type="text/babel">
ReactDOM.render(
<h1>kaivon</h1>, //创建的元素
document.getElementById('box'),//要添加给谁（DOM元素)
function(){
console.log('渲染完成了');//渲染成功后的回调函数
}
);
</script>
4、JSX语法 JavaScript XML
概念
React的语法，它允许HTML与JavaScript混写，在html里可以写js
React不使用JSX的语法也可以工作，使用的话会提高组件的可读性，推荐使用JSX
特点
1、遇到尖括号开头的解析成html。遇到大括号开头的解析成JavaScript
注意：大括号要解析成js代码，所以里面不要有分号
var colors=['red','green','blue'];
ReactDOM.render(
<ul>
{
colors.map(function(value,index){
return <li>第{index}个是:{value}</li>
})
}
</ul>, //第一个参数
document.getElementById('box') //第二个参数
);
2、可以在模板里插入变量，如果这个变量是个数组，则会自己把数组里所有数据全部显示
var arr=[
<li>kaivon</li>,
<li>陈学辉</li>,
<li>356985332</li>
];
ReactDOM.render(
<ul>{arr}</ul>,
document.getElementById('box')
）
5、定义组件
React中可以把每个功能都定义成组件，然后组件会像普通的html标签一样，插入到页面中
1、创建组件
React.createClass()
注意：
1、存组件的变量名首字母要大写
2、render的return里只能出现一个顶层标签
2、插入组件
把定义好的组件放在尖括号里，就形成了一个标签，就能以标签的形式插入到页面中
插入方法：
1、<组件名/>这就是XML
2、<组件名></组件名>
<script type="text/babel"> //创建组件 var Person=React.createClass({ render:function(){ return ( <div> <h1>kaivon</h1> <h2>陈学辉</h2> <h3>18</h3> </div> ) } }); //添加组件，ReactDOM.render不仅可以输出html结构，还可以输出组件 ReactDOM.render(
<Person/>, //这里可以写单标签，也可以写双标签
document.getElementById('box') ); </script
6、组件的属性
props 它身上放的就是我们传进来的属性
插入组件的时候可以像html标签添加属性的方式一样，给组件传递数据
<script type="text/babel">
var name='kaivon';
var age=18;
var sex='男';
var Person=React.createClass({
render:function(){
return (
<div>
<h1>{this.props.name}</h1>
<h2>{this.props.age}</h2>
<h3>{this.props.sex}</h3>
</div>
)
}
});
ReactDOM.render(
//<Person age='18'/>,
<Person name={name} age={age} sex={sex}/>,
//这里可以写单标签，也可以写双标签
document.getElementById('box')
);
</script>
7、组件子节点
props对象的属性与组件的属性是一一对应的，但是有一个例外，props.children属性(组件的所有子节点)它的值不一定是一一对应的
props.children的值有三种类型
1、undefined 当前组件没有子节点
2、object 当前组件只有一个子节点
3、array 当前组件有多个子节点
可以用
React.Children.map()方法来遍历子节点，不用担心它的类型是什么，都可以遍历出来
<script type="text/babel">
var List=React.createClass({
render:function(){
return (
<ul>
{
//console.log(this.props.children)
React.Children.map(this.props.children,function(child){
return <li>{child}</li>
})
}
</ul>
)
}
});
ReactDOM.render(
<List>
<span>red</span>
<span>green</span>
</List>,
document.getElementById('box')
);
</script>
8、验证组件属性值的类型：
组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求
只会提示警告，但是内容依然可以出来
<script type="text/babel">
var person={
name:'kaivon',
age:18,
sex:'男'
}
var Person=React.createClass({
render:function(){
return (
<div>
<h1>{this.props.name}</h1>
<h2>{this.props.age}</h2>
<h3>{this.props.sex}</h3>
</div>
)
},
propTypes:{
name:React.PropTypes.string,
age:React.PropTypes.number,
sex:React.PropTypes.string
}
});
ReactDOM.render(
<Person {...person} />,
document.getElementById('box')
);
</script>
9、组件的状态
组件免不了要与用户互动，React的一大创新，就是将组件看成是一个状态机
一开始有一个初始状态， 然后用户互动，导致状态变化，从而触发重新渲染UI
getInitialState() 获取组件的状态
1、它必需写在创建组件的函数里
2、它必需有一个返回值是null或者对象
state 获取状态对应的属性值(getInitialState方法的返回值)
setState() 设置组件的状态
它是组件身上的方法，组件是放在ReactDOM.render的返回值里
<script type="text/babel">
var Status=React.createClass({
getInitialState:function(){
return {
on:true,
mes:'kaivon的第一种状态' //数据
}
},
render:function(){
var style={
//三目运算符 定义样式
color:this.state.on?'red':'blue',
fontSize:this.state.on?'20px':'30px'
}
return (
//添加到行间样式
//style={style}结构里面想要执行js,需要添加大括号
<h2 style={style}>{this.state.mes}</h2>
)
}
});
//渲染
//声明一个变量接收render的返回值
var component=ReactDOM.render(
<Status/>,
document.getElementById('box')
);
//console.log(component);
component.setState({
on:false,
mes:'kaivon的第二种状态'
});
</script>
