React Hook

Hook

React Hooks是React 16.8.0版本推出的新特性 主要的作用就是让无状态组件 可以使用状态（在react开发中状态的管理是必不可少的 以前为了进行状态管理需要使用类组件或者redux等来管理）

1、useState()就是React提供最基础、最常用的Hook，主要用来定义和管理本地状态。

2、useState返回的是一个数组(长度为2)，数组的第一个对象表示当前状态的值，第二个对象表示用于更改状态的函数，类似于类组件的setState。

3、let [val(当前状态的值),setVal(改变状态的函数)]=useState(当前状态的初始值)

4、hooks中可以通过 useRef()获取Dom节点

---

在无状态组件中使用Hook useState

多个状态怎么办useState()

1.声明对象类型的状态

2.多次声明（建议用第二种）

useEffect：函数组件中没有生命周期，那么可以使用 useEffect 来替代。可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

// 1\引入useState
import React,{useState,useRef，useEffect} from "react"

function Hookdemo(){

    let [val,setVal]=useState(10)
    
     useEffect(()=>{
        document.title=val
    })
    
    // 方式二
    // let add=()=>{
    //     setVal(val+1) 
    // }

    // 多状态
    // 1\
    let [vala,setVala]=useState(0)
    let [valb,setValb]=useState(1)
    let [valc,setValc]=useState(2)
    // 2\
    let [val,setVal]=useState({
        vala:0,
        vala:1,
        vala:2
    })

    // hooks中可以通过 useRef()获取Dom节点
    const num = useRef(null)
    return(
        <div>
            age:{val}
            {vala}--{valb}---{valc}
            {/* 1\方式一 */}
            {/* <button onClick={()=>{setVal(val+1)}}>过生日</button> */}
            {/* 2、方拾贰 */}
            {/* <button onClick={add}>过生日</button> */}
            <input type="text" ref={num}/>
            <button onClick={()=>{setVal(val+Number(num.current.value))}}>过生日</button>
        </div>
    )
}
export default Hookdemo