React函数式Hooks-useState()用法

函数式组件，使用函数组件可以拥有类组件的特性，例如state，生命周期等

使用useState 语法 useState定义后 不能更改获取顺序

import React, { useState } from 'react'
export default function TestHooks(props) {
    const [count, setCount] = useState(() => {
        return props.defaultCount || 0 //默认初始化，只执行一次
    })
    return (
        <div>
            <button onClick={
                () => {
                    setCount(count + 1)
                }
            }>hooks useState</button>
            {count}
        </div>
    )
}

以上代码等同于类组建如下：

 class TestHooks extends Component {
    state = {
        count: 0
    }
    render() {
        return (
            <div>
                <button onClick={() => {
                    this.setState({ count: this.state.count + 1 })
                }}>按钮</button>
                 {this.state.count}
            </div>
        )
    }
}
export default TestHooks

import React, { useState } from 'react'
export default function TestHooks2() {
    const [count, setCount] = useState(0);
    //第一种
    function handleClick() {
        setCount(count + 1)
    }
    //第二种
    function handleClickFn() {
        setCount((prevCount) => {
            return prevCount + 1
        })
    }
    return (
        <>
            Count: {count}
            <button onClick={handleClick}>+</button>
            <button onClick={handleClickFn}>+</button>
        </>
    );
}

函数试写法区别，在异步函数中体现

import React, { useState } from 'react'
export default function TestHooks3() {
    const [count, setCount] = useState(0);
    //在定期内无论点击多少次都只是执行一个
    function handleClick() {
        setTimeout(() => {
            setCount(count + 1)
        }, 1000);
    }
    //连续点击后可以实时获取到最新值
    function handleClickFn() {
        setTimeout(() => {
            setCount((prevCount) => {//上次计算的值
                return prevCount + 1
            })
        }, 1000);
    }
    return (
        <>
            Count: {count}
            <button onClick={handleClick}>+----</button>
            <button onClick={handleClickFn}>+</button>
        </>
    );
}