react扩展3_stateHook

什么是stateHook呢？他有什么用？

在之前的学习中我们学过了类式组件和函数式组件，但是我们知道函数式组件不像类式组件一样有实例对象，所以函数根本没有this一说，更不要说使用state什么的了，那么函数组件就没什么用了。在新的react中，定义了stateHook，用来对函数式组件定义state状态，并进行状态数据的读写操作。

语法：
const [xxx,setXxx]=React.useState(initValue)
说明：

• 参数：initValue是指第一次初始化的值在内部缓存。
• 返回值：xxx是内部当前的状态值，第二个为更新状态值的函数。

setXxx（）的2种写法：

• setXxx(newValue):参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值。
• setXxx(value=>newValue):参数为函数，接收原本的状态值，返回新的状态值，内部用其覆盖原来的状态值。

import React, { Component } from 'react'
export default function Demo(){
    const [count,setCount]=React.useState(0);
    const [name,setName]=React.useState('夏夏')
    const add=()=>{
        // setCount(count+1)
        setCount(count=>{return count+1})
    }
    const changeName=()=>{
        // setName('夏科');
        setName(name=>{return '夏科'})
    }
    return (
        <div>
            <h2>当前求值为:{count}</h2>
            <h2>当前名字为：{name}</h2>
            <button onClick={add}>点击+1</button>
            <button onClick={changeName}>点击改名字</button>
        </div>
    )
}