这是我参与「第四届青训营」笔记创作活动的第8天。

在上一篇笔记中，我们介绍了React使用的开发语言——JSX。那么本篇笔记想要介绍的内容是React中组件的第一种数据挂载方式：状态。

组件的数据挂载方式

1、状态(state)

状态就是组件描述某种显示情况的数据，由组件自己设置和更改（也就是说由组件自己维护）。

使用状态的目的就是为了在不同的状态下使组件的显示不同。

下面我们来看看如何在React中如何使用状态。

(1) 定义state

有两种常见的方式。

第一种方式如下，在组件的最开始定义一个state对象，在render函数中就可以通过state中的name字段渲染标题，并且根据state中的isLiked字段确定是收藏还是取消收藏。这里为了简单起见，state的值是写死的。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
    state = {
        name: 'React',
        isLiked: false
    } 

    render () {
        return (
            <div>
                <h1>欢迎来到{this.state.name}的世界</h1>
                <button>
                    {
                        this.state.isLiked ? '❤取消' : '🖤收藏'
                    }
                </button>
            </div>
        )
   }
} 

ReactDOM.render(
    <App/>,
    document.getElementById('root')
)

在另一种方式中，state字段是定义在组件的constructor方法中的。由于我们的组件是继承的，因此在constructor方法中需要调用super方法。其他功能一样。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
    constructor() {
        super()
        this.state = {
            name: 'React',
            isLiked: false
        }
    }

    render () {
        return (
            <div>
                <h1>欢迎来到{this.state.name}的世界</h1>
                <button>
                    {
                        this.state.isLiked ? '❤取消' : '🖤收藏'
                    }
                </button>
            </div>
        )
   }
} 

ReactDOM.render(
    <App/>,
    document.getElementById('root')
)

注意：this.state 是纯js对象。在vue中，data属性是利用 Object.defineProperty 处理过的，更改data的数据的时候会触发数据的 getter 和 setter ，但是React中没有做这样的处理。

所以我们必须手动更改状态。但是，如果我们直接更改的话，react是无法得知的。所以，react不允许我们直接修改，而是使用特殊的更改状态的方法 setState 。

(2) setState

为了演示更改状态的场景，我们在上述代码的基础上加了一个button，并且给 button 加上了点击的事件监听。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
    constructor() {
        super()
        this.state = {
            name: 'React',
            isLiked: false
        }
    } 

    handleBtnClick = () => {
        this.setState({
            isLiked: !this.state.isLiked
        })
    } 
    
    render () {
        return (
            <div>
                <h1>欢迎来到{this.state.name}的世界</h1>
                <button onClick={this.handleBtnClick}>
                {
                    this.state.isLiked ? '❤取消' : '🖤收藏'
                }
                </button>
            </div>
        )
    }
} 

ReactDOM.render(
    <App/>,
    document.getElementById('root')
)

注意：setState 是异步的。