有状态组件和无状态组件

所谓的有状态组件：指的是用类创建的组件。

所谓的无状态组件：指的是用函数创建的组件。

通过这个名称，可以发现函数组件与类组件的区别就是在状态上，那么状态指的就是数据。

所以说函数组件，没有自己的状态，它只负责数据的展示，也就是该组件时静态的，也就是说，如果数据没有任何的变化（不需要与用户进行交互），仅仅就是为了展示，那么使用函数组件就可以了。

而类组件是有自己的状态，它负责数据的更新变化，也就是负责更新页面，让页面‘动’起来。假如用户执行了某个操作，导致了数据发生了变化，那么这时就用类组件。

如下图所示：

所以说，如果你的页面只是展示内容，不需要与用户进行交互，那么使用函数组件就可以了，如果你的页面需要与用户进行交互，交互后状态发生变化，并且需要更新页面，那么这时使用类组件。

下面看一下怎样给类组件设置状态，并且完成状态的修改。

4.4 组件中的state和setState

这里主要讲解一下state的基本使用和怎样使用setState方法完成状态的修改。

下面先看一下关于state的基本使用方式

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

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

• 通过this.state来获取状态

如下代码所示：

import React,{Component}from 'react'
class CounterCom extends Component{
    constructor(){
        super()
        //在构造函数中设置对应的状态
        this.state ={
            count:0
        }
    }
    render(){
        return(
            <div>
                {/*获取state中的数据 */}
            计算器:{this.state.count}
            <button>计算</button>
          </div>
        )       
    }
}
export default CounterCom

还有另外一种更加简单的书写方式，如下所示:

import React,{Component}from 'react'
class CounterCom extends Component{
    // constructor(){
    //     super()
    //     this.state ={
    //         count:0
    //     }
    // }
    // 简化的写法
    state = {
        count:0
    }
    render(){
        return(
            <div>
            计算器:{this.state.count}
            <button>计算</button>
          </div>
        )       
    }
}
export default CounterCom

setState( )方法修改状态

• 状态是可变的

• 语法：this.setState({要修改的数据})

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

下面的代码完成计算器功能:

import React,{Component}from 'react'
class CounterCom extends Component{
    // constructor(){
    //     super()
    //     this.state ={
    //         count:0
    //     }
    // }
    state = {
        count:0
    }   
    render(){
        return(
            <div>
            计算器:{this.state.count}
            <button onClick={()=>{
                this.setState({
                    // 通过this.state.count获取原来的状态，然后加上1，重新赋值给新的状态。
                    count:this.state.count+1
                })
            }}>计算</button>
          </div>
        )       
    }
}
export default CounterCom

在这里需要注意一个非常关键的点：不要直接修改state中的值，这是错误的

import React,{Component}from 'react'
class CounterCom extends Component{
    // constructor(){
    //     super()
    //     this.state ={
    //         count:0
    //     }
    // }
    state = {
        count:0
    }
   
    render(){
        return(
            <div>
            计算器:{this.state.count}
            <button onClick={()=>{               
                //以下的写法是错误的
                this.state.count+=1;
            }}>计算</button>
          </div>
        )       
    }
}
export default CounterCom

执行上面的代码，单击按钮没有任何的变化。

setState( )方法体现了一种思想：数据驱动视图。

也就是数据发生了变化，对应的页面也会更新。

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

学IT，上博学谷