[JavaScript知识库]react hooks的用法

一，页面初始化的结构
export const SearchPanel=()=>{
二、声明字段的类型,请求字段类型
const【param，setParam】=useState（{
name：'',
personId:''
}）
四、写请求接口的代码
useEffect（（）=>{
fetch('').then(async response=>{
setList（await response.json（））
})
}，【param】）
三、下面写页面的页面结构与样式
return 
五、如何写onchange绑定的事件(作用是保持value的值不会改变)
onchange={evt=>setParam({...param,
name:evt.target.value
})}

}

如何设置服务器的链接地址
1，新建一个env 正式环境一般使用 npm bulid
2，新建一个.env.development 一般使用 npm start


如何使用map的数组 循环渲染方法
   {
            list.map(project=><tr>
                <td>{project.name}</td>
                <td>{project.personName}</td>

            </tr>)
        }

如何使用find数组方法
{users.find(user=>user.id===project.personId).name}


处理自定义的url参数
export  const isFalsy = (value)=> value ===0 ? false: !value
//在一个函数里，改变转入的对象本身是不好的
export  const cleanObject=(object)=>{
    //Object.assgin({},object)
const result={...object}
    Object.keys(result).forEach(key=>{
        //0
        const value=result[key]
        if(isFalsy(value)){
            delete  result[key]

        }
    })
    return result
}
如何编写自定义hooks
export  const useMount=(callback)=>{
    useEffect(()=>{
        callback()
    },[])
}

debounce原理讲解:
一定要理解:这三个函数都是同步操作，所以它们都是在0~1s 这个时间段内瞬间完成的;
//log()#1// timeout#1
//log()#2//发现timeout#1!取消之，然后设置timeout#2
//log()#3//发现timeout#2!取消之，然后设置timeout#3
//所以,log()#3结束后，就只剩timeout#3在独自等待了


自定义hooks的写法

export  const useDebounce=(value,delay)=>{
//首先声明一个状态
    const [debouncedValue,setDebouncedValue]=useState(value)
    useEffect(()=>{
        //当value 值发生变化的时候 那么设置一个定时器控制他的变化 然而delay不会影响变化
        //每次在value变化后，设置一个定时器
        const timeout=setTimeout(()=>setDebouncedValue(value),delay)
        //每次在上一个useEffectc处理完后以后再运行
        return()=>clearTimeout(timeout)
    },[value,delay])
    return debouncedValue
}