【React】--React hook

🎀个人主页：努力学习前端知识的小羊
感谢你们的支持：收藏🎄 点赞🍬 加关注🪐

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)获取数值，实现数据共享，同时减少组件层级，不再需要写<GlobalContext.Consumer></GlobalContext.Consumer>标签

子组件（使用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)

希望对小伙伴们有所帮助，期待你们的指点与支持✨✨✨