## 1.state作为React自定义组件的状态，可以存放当前组件所需要的一些数据，与小程序组价中的data属性很像
> 关于state值的引用：直接使用 { this.state.propertyName } 即可
~~~
import React, { Component } from 'react';
class TestState extends Component {
constructor() {
super();
this.state = {
name: '小皮',
courses:[
{name: '物理',time: '周一'},
{name: '数学',time: '周二'},
{name: '英语',time: '周三'}
]
}
}
render() {
return <div>
hello,{this.state.name},this week you need to leran this courses:
{this.state.courses.map((ele,index)=>{
return <p key={index}>time: {ele.time};course: {ele.name}</p>
})}
</div>
}
}
export default TestState
~~~
## 2.state存放的数据是可以修改的，并不像props传递过来的数据为‘只读’类型
> 为state修改或添加一个属性及属性值的方法：this.setState({ type: ' ',value: ' ' }),`使用过程注意this关键字的指向`,**且this.setState({ },callback(){ })方法是一个异步的方法,可以在返回函数中看到当前state最新更新的状态**
*****
>[success] 关于input输入框获取输入值的问题，目前知道的有两种方法 1.绑定onChange事件，该监听事件可以获取当前输入框的状态 2.通过 **ref** 属性绑定一个参数名，在监听事件中通过 **refs.参数名** 获取当前输入框的状态
~~~
<input onChange={this.inputChange} type='text' ref='test'></input>
inputChange = (e) => {
console.log(e.target.value)
console.log(this.refs.test.value)
}
~~~
~~~
import React, { Component } from 'react';
class TestState extends Component {
constructor() {
super();
this.state = {
name: '小皮',
courses: [
{ name: '物理', time: '周一' },
{ name: '数学', time: '周二' },
{ name: '英语', time: '周三' }
]
}
}
render() {
let newCourse = (
<div>
<input onChange={this.inputChange} type='text'></input>
<button onClick={this.changeClick}>添加</button>
</div>
)
return <div>
hello,{this.state.name},this week you need to leran this courses:
<br></br>
{this.state.courses.map((ele, index) => {
return <p key={index}>time: {ele.time};course: {ele.name}</p>
})}
<button onClick={this.clearClick.bind(this)}>click to clear the courses</button>
{/* <button onClick={()=>{this.clearClick()}}>click to clear the courses</button> */}
<br></br>
{newCourse}
</div>
}
clearClick() {
this.setState({
courses: []
})
}
inputChange = (e) => {
let value = e.target.value;
this.setState({
textValue: value
})
}
changeClick = () => {
var value = this.state.textValue;
if (value) {
let temp = {
name: value,
time: '周二'
}
let courses = this.state.courses;
courses.push(temp);
this.setState({
courses
})
}
}
}
export default TestState
~~~
## 3.setstate()并不会立即更新state，当this.setState()被调用的时候，React会重新调用render方法来重新渲染UI。
setState通过一个队列机制实现state的更新。当执行setState时，会把需要更新的state合并后放入状态队列，而不会立刻更新this.state，利用这个队列机制可以高效的批量的更新state。
