自定义Hook

什么情况下自定义Hook

当我们想在两个或者多个函数之间共享逻辑时，我们会把它提取到第三个函数中。这实现共享逻辑的第三个函数就是Hook

规则

• 自定义 Hook 是一个函数。
• 其名称以 use开头。
• 函数内部可以调用其他的 Hook。
• 在两个组件中使用相同的 Hook 不会共享 state 。

xxxxxxxxxx
//自定义的hook
import { useEffect, useState } from "react";

export default function useUserInfo(){
    const [userInfo,setUserInfo]=useState({})

    useEffect(()=>{
        const info=JSON.parse(localStorage.getItem('userInfo')) 
        setUserInfo(info)
    },[])
    return [userInfo,setUserInfo]
}

使用自定义的Hook

xxxxxxxxxx
import React from 'react';
import useUserInfo from '../components/useUserInfo'

export default function User() {
    const [userInfo,setUserInfo]=useUserInfo()
    return (
        <div>
            <h3>我是第一个使用自定义Hook的组件</h3>
            {userInfo.name}
            <button onClick={()=>setUserInfo({name:'百战111'})}>更改用户信息</button>
        </div>
    );
}

xxxxxxxxxx
import React from 'react';
import useUserInfo from '../components/useUserInfo';

export default function User1() {
    const [userInfo,setUserInfo]=useUserInfo()
    return (
        <div>
            <h3>我是第二个调用自定义hook的组件</h3>
            {userInfo.name}
            <button onClick={()=>setUserInfo({name:'百战222'})}>更改用户</button>
        </div>
    );
}

实时效果反馈

1. 下面说法错误的是:

A 自定义的Hook是一个函数

B 自定义的Hook函数名要以use开头

C 自定义Hook用来在多个组件间共享逻辑

D 自定义Hook用来在多个组件间共享state

答案

1=>D