## 二、State状态 > React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。 > React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。 > 在React中，可以将State看作是组件的私有属性，而props则为外部属性（不可修改） ### 2.1 定义状态 - 2.1.1 ES6 类声明式组件 > 在组件的 **constructor** 构造器中，设置初始状态state。 > super(props) 用于继承所有属性 ``` import React,{Component} from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' class MyComponent extends React.Component { constructor(props) { super(props); this.state = { count:props.num+10 } } render() { return ( <div> <h1>props属性值：{this.props.num}</h1> <h1>state状态值：{this.state.count}</h1> </div> ); } } MyComponent.propTypes = { num:PropTypes.number } class App extends Component { render() { return ( <div> <MyComponent num={0} /> </div> ) } } ReactDOM.render(<App/>,document.getElementById('root')) ``` ### 2.2 事件改变状态 > react中触发状态改变的是用户的交互行为 > 在组件定义的 **constructor** 中绑定组件的this到事件函数中 ``` import React,{Component} from 'react' import ReactDOM from 'react-dom' class App extends Component { constructor(props) { super(props) this.state = { likeIt:true } } // 定义事件处理函数 handleLike(lick) { this.setState({likeIt:!this.state.likeIt}) } // 绑定事件，注意bind(this) render() { return ( <div> <div> <button onClick={this.handleLike.bind(this)}>点击切换状态</button> </div> <div> <h1>Result:{this.state.likeIt?'喜欢':'不喜欢'}</h1> </div> </div> ) } } ReactDOM.render(<App/>,document.getElementById('root')) ``` > 注意： 1. 事件处理函数定义在类的声明中 2. 改变state用 this.setState({stateName:value}) 3. 事件处理函数需要绑定 this，才能在函数中使用this.state拿取到信息 ### 2.3 state的使用注意 #### 1、不要直接修改state（状态） ``` # 错误 this.state.comment = 'hello'; # 正确 this.setState({comment:'hello'}) ``` #### 2、state（状态）更新可能是异步的 > React 为了优化性能，有可能会将多个 setState() 调用合并为一次更新。 > 因为 this.props 和 this.state 可能是异步更新的，你不能依赖他们的值计算下一个state(状态)。 - 如下代码可能导致counter更新失败 ``` // 错误 this.setState({ counter: this.state.counter + this.props.increment, }); ``` > 如何解决上述问题？ - 要弥补这个问题，使用另一种 setState() 的形式，它接受一个函数而不是一个对象。这个函数将接收前一个状态作为第一个参数，应用更新时的 props 作为第二个参数： ``` // 正确 this.setState((prevState, props) => ({ counter: prevState.counter + props.increment })); ```