## 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。
