组件状态State

State 与 props 类似，但是 state 是组件私有的，并且完全受控于所属的组件。

使用State的目的：管理组件内部状态，并且当组件内部状态发生变化的时候，重新渲染页面。

• 初始化并使用state

  • 在类的构造函数中为 state 赋初值，并且通过this.state访问数据。

    xxxxxxxxxx
    import React from 'react'
    
    export default class StateTest extends React.Component {
      constructor() {
        super();
        this.state = {date: new Date()};
      }
      render() {
        return <p>{ this.state.date.toLocaleTimeString() }</p>
      }
    }
    

• 使用this.setState()更新state并让页面重新渲染

  xxxxxxxxxx
  import React from 'react'
  
  export default class StateTest extends React.Component {
      constructor() {
          super();
          this.state = { date: new Date() };
  
      }
      onChange = () => {
          this.setState({ date: new Date() })
      }
      render() {
          return <div>
              <p>{this.state.date.toLocaleTimeString()}</p>
              <button onClick={this.onChange}>更新state</button>
          </div>
      }
  }
  

  提示

  一般我们只在类组件里面使用state，函数组件当中不使用state，所以有的时候把类组件叫做有状态组件，函数组件叫做无状态组件。

  思考：State与Props的区别

  State：负责组件内部的状态管理

  Props：负责组件与组件之间的数据交互

实时效果反馈

1. 下列关于state描述错误的是：

A state用于管理组件内部的数据

B state只能在类组件中使用

C state可以在无状态组件中使用

D 通过this.setState()可以更改state

答案

1=>C