React的useEffect,useState使用方式

F1.tsx

import { useEffect,useState } from "react"

const F1 = ()=>{
    // useState，第一个是给值，第二个是操作该值的对应函数
    const [key, setkey] = useState(0)
    const [val, setval] = useState(0)
    const changeKey = ()=>{
        setkey(key => key+1)
    }
    const changeVal = ()=>{
        setval(val => val+1)
    }
    

    // useEffect钩子函数，
    //      第一个参数传函数，
    //      第二个可选参数是个数组类型
    //              不传，则监控全局useState值，任何一个useState值发生变化则执行该函数
    //              传了，则监控该数组中的useState值，数组中的值发现变化则执行第一个参数的函数
    useEffect(()=>{
        console.log("监控全局。。。")
    })
    // 第二个参数是个数组，监控数组中的数据是否变化，变化则执行第一个参数的函数
    useEffect(()=>{
        console.log("监控键，键更新...")
    },[key])
    useEffect(()=>{
        console.log("监控值，值更新...")
    },[val])
    // 上面两个钩子函数可以写成下面这种方式
    // useEffect(()=>{
    //     console.log("监控值，值更新...")
    // },[key,val])
    return(
        <div>
            <div id="div">
                鍵索引：{key}，值索引：{val}
            </div>
            <button id="btn" onClick={changeKey}>鍵索引+1</button>
            <button id="btn" onClick={changeVal}>值索引+1</button>
      </div>
    )
}

export default F1;

F2.jsx

import {useRef} from "react"

const F2 = ()=>{
    const inp = useRef(null);
    const show = ()=>{
        console.log(inp.current.value)
    }


    return(
        <div>
            <input ref={inp} type='text' placeholder="请输入..."/>
            <button className="btn" onClick={show}>点击弹出输入数据...</button>
        </div>
    )
}

export default F2;