组件中的 state 和 setState

1、state的基本使用

　　状态（state）即数据 是组件内部的私有数据，只能在组件内部使用。

　　state 的值是对象，表示一个组件中可以有多个数据

　　通过 this.state 来获取状态

　

class App extends React.Component {
    constructor() {
        super()
        // 初始化state
        this.state = {
            count: 10
        }
    }
    render() {
        return (
            <div>
                <h1>计数器：<span>{ this.state.count }</span></h1>
            </div>
        )
    }
}
ReactDOM.render(<App/>, document.getElementById('root'))

2、setState() 修改状态

　　状态是可变的

　　语法：this.setState( { 要修改的数据 } )

　　注意：不要直接修改 state 中的值，这样是错的 ！！！

　　　　　　正确：this.setState({

　　　　　　　　count: this.state.count + 1

　　　　　　})

　　　　　　错误：this.state.count += 1

　　setState() 作用：1、修改 state 2、更新UI

　　思想：数据驱动视图

 

从JSX中抽离事件处理程序

　　JSX中掺杂过多 JS 逻辑代码，会显得非常混乱

　　　　注意：将逻辑抽取到单独的方法中 this为undefined的问题

　　　　　　　　希望this 指向组件的实例（render 方法中的this即为组件的实例）