【React】有状态和无状态组件 、states数据状态 和 SetState( )修改状态

一.有状态和无状态组件 

函数组件叫做 无状态组件 ， 类组件叫做 有状态组件

状态 state是数据

函数组件没有自己的状态 只负责数据展示

类组件有自己的状态，负责更新 和 让页面动起来

二.states数据状态 和 SetState( )修改状态

（1）state

class App extends React.Component {
  // 方法一 .定义状态数据
  constructor () {
    super()
    this.state = {
      count: '我是第一种方式'
    }
  }

  // 方法二 .定义状态数据 简洁方法 --推荐使用第二种
  state = {
    count: '我是第二种方式'
  }

  render () {
    return <h1>状态组件：{this.state.count}</h1>
  }
}

说明: 上面有两种 state的方式 这里推荐使用第二种 简洁方法

描述:

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

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

通过 this.state.xxx 来获取数据

（2）SetState( ) 修改状态

class App extends React.Component {
  state = {
    count: '我是第二种方式'
  }
  render () {
    return (
      <h1>
        <p>我是state内值：{this.state.count};</p>
        <button
          onClick={() => {
            this.setState({
              count: (this.state.count = '我已经被setState修改')
            })
          }}
        >
          点我修改state内值
        </button>
      </h1>
    )
  }
}

描述:

通过this.setState({ state内属性 ：this.state.xxx = '要修改的值' })

setState( ) 作用: 1. 修改state 2.更新UI

React底层会有监听 一旦调用了 setState导致了数据的变化 就会重新调用一次 render方法 重新渲染当前组件