相信大家对框架这个词都很熟悉吧，我一直喜欢js原生来开发，但是目前都要求工作效率，所有使用框架或者是库会使我们开发更加方便和快速，甚至一个人干十个人的活。。
框架优点：
1.方便开发、快速写功能
2.统一开发方式
3.调试、测试方便
前端三大框架：
Angular.js-前端三大框架之1
vue.js-前端三大框架之2
react.js-前端三大框架之3
大家都知道，我们web开发会和后台配合，之前不分前后台，一直是一起，后来为了方便和高效，就分离了。
MVC：前后台分离
M-Model 模型：数据 后台
V-View 视图：表现层 前台
C-Controller 控制器：业务逻辑
mvc很多衍生概念：mvvc、mvvp、mvn、mvvcp等，其中angular和vue都是这一类。
但是今天主讲的不是他俩，是目前比较火的react，这个一般适用于中大型项目，当核心框架来使用，而且可以和别的框架完美的配合。
不啰嗦，直接开始正题React：
重点：组件、状态
核心：状态
1.JSX(babel、browser)
JSX：可以把HTML直接写JS里
2.react
React特点：虚拟DOM
react主要就是使用jsx语法，是白了就是在js中直接编写html，是不是很方便很溜。。下面直接开始写法：
使用react首先需要引三个文件：
browser.js 它的作用是使浏览器支持babel
react.js 这个不用说，react主体文件
react-dom.js 这个是react的虚拟DOM的文件编译dom的
1.定义组件——组件（这个就用到了ES6中的class的写法）：
class 名字 extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <span>aaa</span>; //return出去你要在页面展示的标签
}
}
2.使用组件
就跟标签一样用
ReactDOM.render(
<span>111</span>, //可以直接写标签，（渲染什么东西）
oDiv （要放到哪里）
);
ReactDOM.render(
<Comp/>, //也可以使用class，注意，使用的时候直接把class当做标签来用。
oDiv
);
比如先写一个简单的例子吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/browser.js" charset="utf-8"></script>
<script src="js/react.js" charset="utf-8"></script>
<script src="js/react-dom.js" charset="utf-8"></script>
<script type="text/babel">
class Box extends React.Component{
constructor(...args){
super(...args)
}
render(){
return <div> //注意 最外层元素有且只有一个（必须有，而且只能有一个）
<span>我的名字是李鹏</span><br/>
<span>我今年24岁</span>
</div>
}
}
window.onload=function(){
var oDiv=document.getElementById("div1");
ReactDOM.render(
<Box/>, //注意：需要和上面class的名字一样
oDiv
)
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
注意：定义的时候 render出去的最外层元素有且只有一个（必须有，而且只能有一个）使用的时候直接把组件名字当做标签来用，需要和上面class的名字一样。
那么有人会说了，那么能往组件身上存放一些数据吗？答案是可以，
使用的时候，直接往组件标签身上加入属性即可，定义的时候使用就直接调用，注意是在this.props的身上：
class Box extends React.Component{
constructor(...args){
super(...args)
}
render(){
return <div>
<span>我的名字是{this.props.name}</span><br/>
<span>我今年{this.props.age}岁</span>
</div>
}
}
window.onload=function(){
var oDiv=document.getElementById("div1");
ReactDOM.render(
<Box name="李鹏" age="24"/>,
oDiv
)
};
那么react比如我往一个元素节点身上加入数据怎么做，正常一个组件中的数据，不可能是不变的吧，肯定是从后台过来的，这就关系到状态的变化。
注意：状态是活的，会变化的，怎么用呢？
定义：constructor里面——this.state={};
变化：方法里面——this.setState({});
使用的时候：直接用模板即可:{} 注意是单括号。比如：
<span>输入框输入的是：{this.state.value}</span>
在React中怎么往组件this身上加入一些数据呢？
答案：使用 this.state={value:'',name:''} 注意是={} 一个json 多了就往后加
class Box extends React.Component{
constructor(...args){
super(...args);
this.state={value:''};
}
}
正常我们修改this的属性，直接改就行，但是react中你要修改必须设置状态：this.setState({this.value='',this.name=''});
this.setState({
value:ev.target.value
});
那么怎么在React组件中加入事件呢，直接加即可，不过注意：
比如：正常的 onclick 我们要写成 onClick，正常的onchange 写成 onChange 等。
那么组件中事件怎绑定函数呢？直接告诉你吧：onChange={this.fn.bind(this)} 注意加上bind，为了防止this指向错乱。
比如写一个吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/browser.js" charset="utf-8"></script>
<script src="js/react.js" charset="utf-8"></script>
<script src="js/react-dom.js" charset="utf-8"></script>
<script type="text/babel">
class Box extends React.Component{
constructor(...args){
super(...args);
this.state={value:''};
}
fn(ev){
this.setState({
value:ev.target.value
});
}
render(){
return <div>
<input type="text" onChange={this.fn.bind(this)} />
<span>输入框输入的是：{this.state.value}</span>
</div>
}
}
window.onload=function(){
var oDiv=document.getElementById("div1");
ReactDOM.render(
<Box/>,
oDiv
)
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
下面就写一个比较简单的例子吧，用react做一个时钟吧：
不过介绍这个之前要介绍几个东西，因为做时钟的话，肯定要用定时器吧，间隔是1000，也就是1s，所以也没会有一个间隔，这样不完美，正常我们写的话，肯定直接先把函数调用一遍吧，但是在react中不行，因为组件是有生存周期的，如果你在组件没有渲染到页面就直接调用，那样是没办法的，因为代码是一步一步往下走的，所以介绍几个东西吧：
componentWillMount() 创建之前
componentDidMount() 创建之后
componentWillUpdate() 更新之前
componentDidUpdate() 更新之后
componentWillUnmount() 卸载之前
componentWillReceiveProps() 组件参数更新
直接看例子吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/browser.js" charset="utf-8"></script>
<script src="js/react.js" charset="utf-8"></script>
<script src="js/react-dom.js" charset="utf-8"></script>
<script type="text/babel">
class Close extends React.Component{
constructor(...args){
super(...args);
this.state={
h:0,
m:0,
s:0
};
setInterval(()=>{
this.fn();
},1000)
}
toDub(a){
return a<10?"0"+a:a+'';
}
componentDidMount(){ //在组件创建之后直接调用这个方法一次，省的页面出现00:00:00的情况
this.fn();
}
fn(){
var oDate=new Date();
this.setState({
h:this.toDub(oDate.getHours()),
m:this.toDub(oDate.getMinutes()),
s:this.toDub(oDate.getSeconds())
})
}
render(){
return <div>
<span>{this.state.h}</span>:
<span>{this.state.m}</span>:
<span>{this.state.s}</span>
</div>
}
}
window.onload=function(){
var oDiv=document.querySelector("#div1");
ReactDOM.render(
<Close/>,
oDiv
)
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
以上，基本把react框架中的创建组件，使用组件，以及组件身上使用属性，以及状态都简单的说了一下，那么工作中很多时候，我们都会从后台获得一组数据，然后把数据的每一项放到一个标签中，那么在react中该怎么做呢？
比如说有这样一组数据：
constructor(...args){
super(...args);
//this.arr=[1, 5, 8, 9];
this.state={arr: [12, 5, 8, 9]};
}
首先，肯定有人会想到：我直接render出去对应数量的标签，然后把数据通过模板放进去，但是我们不可能手动写很多标签把每一项数据填进去，然后把标签render出去吧，而且数据个数你也不知道，还是变化的，所以我们可以直接循环创建，然后存到一个数组中：
render(){
var result=[];
var arr=this.state.arr;
for(var i=0;i<arr.length;i++){
result.push(<Item key={i} value={arr[i]}/>); //这个Item标签是一个小的组件，我们把数据放到属性身上吧。
}
return <ul>
<input type="button" value="按钮" onClick={this.fn.bind(this)} /> //为了看看状态变化了，页面DOM有没有直接循环加上
。
{result}
</ul>;
}
//其中Item标签是一个小的组件：
class Item extends React.Component{
constructor(...args){
super(...args);
}
render(){
return <li>{this.props.value}</li>;
}
}
上面的代码意思就是说，我先申明一个数组，然后通过循环把我们从后台获得的数据放到一个标签中，并且push到数组中去，最后把数组render出去，不过要放到模板里面，不能直接把数组render出去，{存放标签的数组名}，那么很多人会问，那组件标签上面的key是什么东西呢，这个你就把他理解错id就行，唯一，而且这个是必须要写的，就相当于告诉他，这个我已经创建了，不需要重复创建了：
fn(){
this.setState({
arr: this.state.arr.concat([Math.random()])
});
}
这个例子整体代码，大家看一下吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/browser.js" charset="utf-8"></script>
<script src="js/react.js" charset="utf-8"></script>
<script src="js/react-dom.js" charset="utf-8"></script>
<script type="text/babel">
class Item extends React.Component{ //这个组件方便我们下面使用
constructor(...args){
super(...args);
}
render(){
return <li>{this.props.value}</li>;
}
}
class List extends React.Component{
constructor(...args){
super(...args);
//this.arr=[12, 5, 8, 9];
this.state={arr: [12, 5, 8, 9]};
}
fn(){
this.setState({
arr: this.state.arr.concat([Math.random()]) //随便往数组最后添加一项，随机数,注意，不要使用push之类的，直接用数
组拼接。下面点击测试用。
});
}
render(){
var result=[];
var arr=this.state.arr;
for(var i=0;i<arr.length;i++){
result.push(<Item key={i} value={arr[i]}/>);
}
return <ul>
<input type="button" value="按钮" onClick={this.fn.bind(this)} /> //点击执行一个函数，让数据最后添加一项，看看数
据变化了，这个组件渲染的页面变化没。
{result}
</ul>;
}
}
window.onload=function (){
var oDiv=document.getElementById('div1');
ReactDOM.render(
<List />,
oDiv
);
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
以上，结束。
作者：虚幻的锈色
链接：https://www.jianshu.com/p/d8695c0084e8
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。