今天晚上学习了React中state的使用，特做此记录，对于学习的方式，博主仍然推荐直接复制完整代码，对着注释观察现象！：
作用：组件内部数据交互的容器对象！
上文中，我列举了两种React自定义组件的声明，这里我拿方式二进行举例：
// 方式二：（复杂组件）类组件【ES6】，这是一个基本的类组件
class Component extends React.Component{
render(){
return <div>类组件B</div>;
}
}
在这里我要将上面的类组件进行相对的完善，使它支持数据变量的操作，这里就用到了state：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title> </head>
<body>
<!--react基础库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<!--bable转换库，ES语法以及Jax语法的转换-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <div id="content"></div> <script type="text/babel">
//定义组件
// 方式二：（复杂组件）类组件【ES6】
class Component extends React.Component{
//构造函数，构建一个组件
constructor(props){
super(props);
this.state={
name:'tom'
}
}
//渲染页面的方法
render(){
return <div>名字：{this.state.name}</div>;
}
}
//将组件渲染到指定位置
ReactDOM.render(<Component />,document.getElementById("content")) </script> </body>
</html>
此时页面将显示出变量的值：
那么我现在想动态的更新页面的值，该如何控制呢？看下面的DEMO：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title> </head>
<body>
<!--react基础库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<!--bable转换库，ES语法以及Jax语法的转换-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <div id="content"></div> <script type="text/babel">
//定义组件
class Component extends React.Component{
//构造函数，在初始化组件的时候会执行
constructor(props){
super(props);
this.state={
name:'tom',
age:20
}
}
//render会进行页面的渲染，当state中数据更新或者发送ajax等事件被监听到都会触发render的刷新
render(){
//从state中取值
const name = this.state.name;
const age = this.state.age;
return(
<div>
<p>名字:{name}</p>
<p>年龄:{age}</p>
//绑定onClick事件函数，关于bind(this)会在下面讲到
<button onClick={this.addAge.bind(this)}>一年</button>
</div>
);
}
//点击事件函数，点击会更新state对象的值
addAge(){
//从state中取值
let age = this.state.age;
age+=1;
//给state中的数据赋值,非简写方式this.setState({age:age})
this.setState({age})
}
} ReactDOM.render(<Component />,document.getElementById("content")); </script> </body>
</html>
页面表现如下，随着我点击“一年”的按钮，年龄后的数字逐渐增大：
