react使用Hooks

什么是Hooks？

说简单点就是可以完全不用类来写组件了，那用什么写？函数。函数怎么使用state？使用userState函数。下面我们看看怎么用函数实现上述功能。

import React, { useState } from 'react';
function HooksCount() {
    const [count, setCount] = useState(0)

    return (
        <li>
            <div>{count}</div>
            <button onClick={() => { setCount(count + 1) }}>点击</button>
        </li>
    )
}
export default HooksCount;

useState

返回有状态值，以及更新这个状态值的函数。

在初始渲染的时候，返回的状态(state)与作为第一个参数(initialState)传递的值相同。

setState函数用于更新state。setState接受一个新的状态值，并将组件的重新渲染排入队列。

useState(val1,val2)接收两个值，第一个是初始化数据，第二是设置数据的函数

useState-initialState

该初始值可以接受任何参数,但是记得当他接受为一个函数时,就变成了Lazy initialization (延迟初始化)
该函数返回值即为initialState,

const [count, setCount] = useState(0);

const [count, setCount] = useState(()=>0);
// 这两种初始化方式 是相等的,但是在函数为初始值时会被执行一次

const [count, setCount] = useState(()=>{
    console.log('这里只会在初始化的时候执行')
    // class 中的 constructor 的操作都可以移植到这里
    return 0
});
// 当第一次执行完毕后 就和另一句的代码是相同的效果了

useEffect

语法:

function useEffect(effect: EffectCallback, deps?: DependencyList): void;

经典案例:

useEffect(() => {
    console.log('在 dep 改变时触发,若无 dep 则,每次更新组件都会触发')
    return () => {
        console.log('在组件 unmount 时触发')
    };
});

deps 必须是一个数组,但是如果是一个空数组时:

useEffect(() => {
    console.log('效果的等于 componentDidMount')
}, [])

案例，没有传入第二个参数:

import React, { useState, useEffect } from 'react';
function HooksCount() {
    const [count, setCount] = useState(0);
    const [num, setNum] = useState(1)

    function changeCount() {
        setCount(count + 1)
    }
    useEffect(() => {
        console.log('count this ', count)
    })
    return (
        <li>
            <div>{num}====>'num'---{count}===>'conut'</div>
            <button onClick={changeCount}>点击</button>
        </li>
    )
}
export default HooksCount;

以上代码，在初始化的时候打印一次count，在每次count变化的时候会每次打印count（相当于componentDidMount和componentDidUpdate中执行了相关逻辑）

如果传入一个空数组

第二个参数如果传入了一个空数组，那么只会执行一次

useEffect(() => {
        console.log('count this ', count)
    }, [])

无论state怎么变化，只会打印一次

如果数组中传入值

useEffect(() => {
        console.log('count this ', count)
    }, [count])
    useEffect(() => {
        console.log('num this ', num)
    }, [num])

以上代码初始化的时候执行一次，然后会在每次num和count发生了变化的执行(个人理解，类似于监听数据的变化，然后执行相应的逻辑)

返回一个匿名函数

如果返回一个匿名函数，表示在组件销毁之前执行（类似于componentWillUnmount），例如解绑事件，销毁变量等

   useEffect(() => {
        console.log('2131123')
        window.addEventListener('resize', resizeHandle, false);
        return () => {
            window.removeEventListener('resize', resizeHandle, false)
        }
    }, [])