007-React有状态组件和无状态组件

历史文章目录连接： https://blog.csdn.net/yy763496668/article/details/113117040 此链接为CSDN连接，目的为方便大家一览博客目录！内容会定期更新。

微信公众号：猿媛大本营

概述:

有状态组件 无状态组件 state 的基本使用 setState()修改状态

正文：

函数组件又叫无状态组件

类组件又叫做有状态组件

状态(state)即数据

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

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

state的基本使用

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

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

import React from 'react'


class App extends React.Component{


  //初始化state
  state = {
    count:10
  }
  render(){
    return(
      <div>
       <h1>计数器:{this.state.count}</h1>
      </div>
    )
  }
} 
export default App

结果如下：

setState()修改状态

修改state

更新UI

思想：数据驱动视图

不要直接修改状态中的值，要通过set方法修改

import React from 'react'
class App extends React.Component{
  //初始化state
  state = {
    count:10
  }
  addOne()
  {
    this.setState({
      count:this.state.count+1
    })
  }
  render(){
    return(
      <div>
        <h1>计数器:{this.state.count}</h1>
        <button onClick={this.addOne.bind(this)}>+1</button>
      </div>
    )
  }
} 
export default App

【文章导航】

https://blog.csdn.net/yy763496668/article/details/113117040

THANKS ALL !!

【关注、点赞，收藏】 关注公众号，您将第一时间收到文章更新 微信公众号：猿媛大本营 QQ群号：1056320746