useState与useEffect

react中组件分为有状态组件(类组件)和(无状态组件)函数式组件，函数式组件没有状态和生命周期，但是可以通过通过useState useEffect等hook语法添加状态和生命周期函数；

vue3的setup是组合式api的入口，其中使用的useRouter useRoute useStore 也称为hook写法；

 1.useState

导出useState函数：const {useState} = React

定义状态的语法：let [state,修改函数] = useState(初始值)

使用：{state};

修改：修改函数(修改后结果)

const {useState} = React  // 导出useState函数

// 函数式组件
const App = ()=>{
    // 定义状态的语法：let [state,修改函数] = useState(初始值)
    // state 可以自定义
    // 修改函数 命名setA、setB
    // 定义状态num1 并且修改方法为setNum1
    let [num,setNum] = useState(6666)

    // 引用类型的状态
    let [person,setPerson] = useState({name:"张三"})


return(
    <div>
        <h1>useState</h1>
        
        <h3>{num}</h3>

        <button onClick={()=>{
            setNum(100)
        }}>点击修改num1
        </button>

        <button onClick={()=>{
            setNum(num+100)
        }}>点击增加num1
        </button>

            <h3>{person.name}---{person.age}</h3>

            <button onClick={()=>{
            setPerson({
                name:'李四',
                age:67
            })
        }}>点击修改
        </button>
    </div>

)
}


const root = ReactDOM.createRoot(document.getElementById("app"))
root.render(<App/>)

2. useEffect

useEffect：

第一种情况:只有一个回调函数参数相当于didMount+didUpdate,并且可以有返回值的;

return 返回是一个钩子函数相当于 willUnmount卸载钩子；

第二种请求 参数1是箭头回调函数,参数2是空数组,相当于didMount 但是只初始化执行一次;

第三种情况 参数1是箭头回调函数 参数2是数组的元素是状态,在初始化走一次,监听第二个参数中的发生变化时候走一次;

const {useState,useEffect} = React
const App = ()=>{
    // 设置查找dom节点
    let ref1 = null
    let [count,setCount] = useState(10)
    let [person,setPerson] = useState({name:'张三'})
    // 只有参数1箭头函数回调
    useEffect(()=>{
        console.log("1-didMount+didUpdate")
        // 可以在此处发请求和获取DOM ,但是数据更新的话会再次执行
        ref1.style.color="red" //成功更改颜色
        return ()=>{
            // 可以清除定时器等
            console.log("相当于 willUnmount卸载钩子")
        }
    })

    // 参数2为空数组,只会在第一次绑定dom元素执行一次,相当于didMount
    useEffect(()=>{
        console.log("2-didMount")
        // 可以在此处发请求和获取DOM
    },[])

    // 参数2数组不为空，数组元素的是一个状态，类似于watch监听到count变化的时候调用
    // 初始化也会走一次，目的为了指定监听谁的
    // 监听属性发生变化的时候， 也会触发改钩子
    useEffect(()=>{
        console.log("3---监听第二个数组中的状态")
    },[count])
    return(
            <div>
                <h3 ref={el=>ref1=el}>{count}</h3>
                <button onClick={()=>{
                    setCount(999999)
                }}
                >修改count</button>

                <h3>{person.name}</h3>

                <button onClick={()=>{
                    setPerson({
                        name:"zs"
                    })
                }}
                >修改Person</button>
            </div>
    )
}



const root = ReactDOM.createRoot(document.getElementById("app"))
root.render(<App/>)