# 状态 state state 是一个组件的内部状态，不能通过外部干扰改变state的值。 我们创建一个获取当前时间的组件: ```jsx import React, { Component } from 'react'; const style = { color: '#f00' }; class App extends Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <div style={style}> <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } export default App; ``` 先不用理会 `componentDidMount`、`componentWillUnmount`、`tick`，这些是React的生命周期函数。 我们看看构造函数，继承了父类的 `props`，这里可以看到有一个 state 的属性，用来存储组件的内部状态，调用的时候使用 `this.state.[xxx]`。 ## 初始化state 需要在类的构造器 `constructor` 中初始化state，可以通过 `props` 获取外部传入的数据，也可以传入初始化值。 ```js constructor (props) { this.state = { count: props.initValue || 0, num: 0 } } ``` ## 不能直接更新状态 构造函数是唯一能够初始化 this.state 的地方。其他地方不能直接改变 state 的值。 例如，此代码不会重新渲染组件： ```js this.state.comment = 'Hello'; ``` 如果直接对 state 进行重新赋值，控制台会收到一个警告: >[warning] warning Do not mutate state directly. Use setState() react/ no- direct- mutation- state 而应当使用 `setState()` 改变state的状态 : ```js this.setState({comment: 'Hello'}); ``` ## 不要通过上一个状态计算下一个状态 因为 this.props 和 this.state 可能是异步更新的，你不应该依靠它们的值来计算下一个状态。 例如，以下代码可能无法更新计数器： ```js this.setState({ counter: this.state.counter + this.props.increment, }); ``` 要修复它，请使用第二种形式的 setState() 来接受一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数，将此次更新被应用时的props做为第二个参数： ```js this.setState((prevState, props) => ({ counter: prevState.counter + props.increment })); ```