【React.js】之state的使用

React中有两种组件写法，一种是class组件，一种是函数组件。

1.类组件写法

import React from "react";

class ClickCounter extends React.Component {
    constructor() {
        super()

        // 定义 state
        this.state = {
            count: 0
        }
        // 绑定this
        this.clickHandler = this.clickHandler.bind(this)
    }

    render() {
        return <div>
            <p>你点击了{this.state.count}次</p>
            <button onClick = {this.clickHandler}>点击</button>
        </div>
    }
    clickHandler() {
        // 修改 state
        this.setState({
            count: this.state.count + 1
        })
    }
}

export default ClickCounter

2.函数式组件写法

利用useState

1. useState(0) 传入初始值，返回数组[state, setState]
2. 通过state获取值
3. 通过setState(1)修改值

import React, { useState } from "react";

function ClickCounter() {
    // 数组的解构
    const [count, setCount] = useState(0)
    return <div>
        <p>你点击了{count}多少次</p>
        <button onClick = {() => setCount(count + 1)}>点击</button>
    </div>

}
export default ClickCounter