React State状态

state状态只在class类组件才有，函数组件没有此功能

• 状态(state)即数据，是组件内部的私有数据，只能在组件内部使用
• state的值是对象，表示一个组件中可以有多个数据
• 通过this.state来获取状态
• state数据值可以修改  this.setState
• state可以定义在类的构造方法中也可以写在类的成员属性中

export default class extends React.Component {

    constructor(props){

        super(props)

        // 第一种初始化方式

        this.state = {

            count : 0

        }

}

/*

    // 第二种初始化方式

    state = {

        count:1

}

*/

    render(){

        return (

            <div>计数器 :{this.state.count}</div>

        )

    }

}

state中的值不能直接通过修改state中的值来进行修改数据操作，react提供一个this.setState方法来完成state数据的修改操作

import React, { Component } from 'react'

export default class CmpState extends Component {

  // state组件内部使有的数据源

  // 方案1  成员属性
  /* state = {
    username: '张三'
  }
 */
  constructor(props) {
    super(props);
    // 方案2 构造方法初始化state数据
    this.state = {
      // username: '李四'
      username: this.props.username,
      count: 100
    }
  }

  render() {
    return (
      <div>
        得到state中的数据为：{this.state.username}
        <hr />
        <h3>{this.state.count}</h3>
        <button onClick={this.incr.bind(this)}>自增一下</button>
      </div>
    )
  }

  incr() {
    // 更新数据的同时，更新ui显示
    // 方案1 对象写法 不支持并发处理  同步修改
    /* this.setState({
      count: ++this.state.count
    }) */

    // 方案2 异步处理，支持并处理  ssf  官方推荐写法
    /* this.setState((state) => {
      return {
        count: ++state.count
      }
    }) */
    // 简写
    this.setState((state) => ({
      count: ++state.count
    }))



  }

}

props与state区别

• props 中存储的数据，都是外界传递到组件中的
• props 中的数据，都是只读的
• state 中的数据，都是可读可写的
• props 在函数声明或类申明的组件中都有
• state 只有类申明的组件中才有