🎀个人主页：努力学习前端知识的小羊
感谢你们的支持：收藏🎄 点赞🍬 加关注🪐
React Hook
使用hook的理由：
- 高阶组件为了复用，导致代码层级复杂
- 生命周期的复杂
- 写成functional组件,无状态组件，因为需要状态，又改成了class,成本高
useState（保存组件状态）
const [state,usestate] = usestate(initialState)
- useState是对状态state进行初始化，initialState是初始化的值
- useState 能够返回一个数组，第一个元素是 state ，第二个是更新 state 的函数
useEffect（处理副作用）
useEffect(()=>{ },[]) //[],依赖的状态，可以传空数组
注意：不要对Dependencies撒谎,如果你明明使用了某个变量，却没有申明依赖中，你等于向React撒了谎，后果就是，当依赖的变量改变时，useEfect也不会再次执行, eslint会报警告
// 第一次执行一次，之后name（依赖）更新也会执行 useEffect(()=>{ setName(name.substring(0,1).toUpperCase()+name.substring(1)) },[name])
useCallback(记忆函数)
防止因为组件渲染，导致方法呗重新创建，起到缓存作业，只有第二个参数变化了，才重新声明一次
const handleChange=useCallback( (evt)=>{ setText(evt.target.value) },[] //[]:传入依赖 )
注意：
只有依赖发生改变，这个函数才会重新声明一次
如果传入空数组，那么就是第一次创建后被缓存，如果依赖后期改变了，得到的还是旧的依赖
如果不传第二个参数，每次都会重新声明一次，得到的就是最新的值
useMemo（记忆组件）
useMemo可以完全取代useCallback的功能，使用useMemo返回一个记忆函数是完全可以的
useMemo(()=>{} ,[])
useCallback与useMemo的区别：
- useCallback不会执行第一个参数函数，而是将他返回，而useMemo会执行第一个函数并将函数结果返回
- useCallback常用记忆事件函数，生成记忆后的事件函数并传递给子组件，而useMemo更适合经过函数计算得到一个确定的值
useRef（保存引用值）
const mytext = useRef() //React.createRef() <input ref={mytext}></input>
useRef可以保存先前的数值
useContext（减少组件层级）
const GlobalContext = React.createContext() //创建context对象
父组件
<GlobalContext.Provider value={{ call:"打电话", sms:"短信", info:info, changeInfo:(value)=>{ setinfo(value) } }}> <div> <Film_detail></Film_detail> </div> </GlobalContext.Provider>
使用useContext，子组件通过useContext(GlobalContext)获取数值，实现数据共享，同时减少组件层级，不再需要写标签
子组件（使用useContext）
const value = useContext(GlobalContext) return <div className='film_detail'> detail-{value.info} </div>
子组件（不使用useContext）
return ( <GlobalContext.Consumer> { (value)=> <div className='film_detail'> detail-{value.info} </div> } </GlobalContext.Consumer> )
useReduce
用来实现状态管理,usestate 的代替方案，并返回当前的state 以及与其配套的dispatch 方法
const [state,dispatch] = useReducer(reducer,intialState)
state表示状态对象， dispatch传入参数对象，根据标识执行函数方法
// 外部对象 const intialState = { count:0, } //传入参数对象 dispatch({ type:"kerwin-minus" })
//处理函数 const reducer = (prevstate,action)=>{ let newstate = {...prevstate} switch (action.type) { case "kerwin-minus": newstate.count--; return newstate case "kerwin-add": newstate.count++; return newstate default: return prevstate } }
自定义hook
规则：必须使用use开头，这个约定非常重要，如果不遵循的话，将无法判断某个函数是否包含对其内部Hook的调用，React将无法自动检查你的Hook是否违反了Hook的规则
自定义hook
function useFilter(cinemaList,mytext){ const getCinemaLiat = useMemo(()=>cinemaList.filter(item=>item. name.toUpperCase().includes(mytext.toUpperCase())|| item.address.toUpperCase().includes(mytext.toUpperCase()) ) ,[cinemaList,mytext]) return getCinemaLiat }
组件内调用
const {getCinemaLiat} = useFilter(cinemaList,mytext)
希望对小伙伴们有所帮助，期待你们的指点与支持✨✨✨
