React的StateHook的使用与说明

引用官方示例

在没有使用 state 的时候为“无状态组件”，引入后称为“函数组件”

在函数式组件中使用 state

import React, { useState } from 'react'​
function Example() {    
    // 声明了一个 count 变量    
    // setCount 为一个函数    
    // useState 参数 = count 值; count = 0
     const [count, setCount] = useState(0)       
     return (        
        <div>            
            <p>您点击了 { count } 次</p> 
            <button onClick={() => setCount(count + 1)}>
                点击
            </button>
        </div>
    )}

等价的 class 示例

import React from 'react'
​class Example extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }
        render() {
        const { count } = this.state
        return (
            <div>
                <p>您点击了 { this.state.count } 次</p>
                <button
                     onClick={() => this.setState({ count: count + 1 })}>
                    点击
                </button>
            </div>
        )
    }
}

调用 useState 方法的时候做了什么？： 示例中 useState 在函数内创建了一个变量为 count ，并且保存在 React 中确保函数退出后变量还在。当然可以不是 count ,也可以是 num ......

useState 需要哪些参数 ：唯一参数就是变量初始值，例如示例中的 useState(0) ，就相当于 count=0 。

useState 方法返回值是什么？ ：返回值为一个数组，包括 state 和 更新 state 的函数,利用数组解构，进行重新赋值。Array(2) 0:"", 1: f() ["", f()]