[游戏开发]React--自定义hook

setParam({…param, name: evt.target.value})
相当于setParam(Object.assign({}, param, {name: evt.target.value}))

使用Custom Hook提取并复用组件代码

所有在组件加载的时候只执行一次的逻辑抽象出来，Custom Hook登场

export const useMount = (callback) => {
    useEffect(() => {
        callback()
    }, [])
}

注意：无论是系统自带的hook，还是我们自己定义的hook，都是不可以再爱普通函数中运行的，他只能在其他hook中运行，或者是组件中运行，自定义hook，一定要使用use开头命名

export const useDebounce = (value, delay) => {
    const [debounceValue, setDebounceValue] = useState(value)
    useEffect(() => {
        // 每次在value变化之后设置一个定时器
        const timeout = setTimeout(() => setDebounceValue(value), delay)
        // 每次在上一个useEffect处理完以后再运行
        return () => clearTimeout(timeout)
    }, [value, delay])
    return debounceValue
}
// 状态在react当中相当于什么呢，通俗的来讲它是需要响应式的，当这个值改变的时候，我们能够测到它改变，页面跟着相应的触发，useEffect可以跟着触发。
// custom Hook最大的特征，在它的里面要使用别的hook，如果它不需要使用hook，那么使用普通函数即可。