自定义Hook

官方提供的Hook可以放在函数组件中使用以及自定义的Hook函数中也可以使用，不能在类组件以及普通的事件函数中使用。

自定义Hook是一个函数，其名称以 “use” 开头，函数内部利用官方提供的Hook来实现自己的业务功能。自定义Hook的特点是使用后会返回一个组件，自定义Hook调用后就可以当做标签使用，标签就是自定义Hook返回的组件。

自定义Hook要返回一个组件，而函数组件要返回一个模板。

自定义Hook案例：简单判断用户是否登录

自定义Hook
import { useState, useMemo } from 'react'
function useIsLogin(token) {
    
    let [flag, setFlag] = useState();
    useMemo(() => {
        if (token) {
            console.log(token,1)
            setFlag(true);
        } else {
            console.log(token,2)
            setFlag(false);
        }
    }, [token]);
    if (flag) {
    // 自定义Hook返回一个函数组件
        return function () {
            return (
                <div>
                    <p>用户已登录</p>
                </div>
            )
        }
    } else {
    // 自定义Hook返回一个函数组件
        return function () {
            return (
                <div>
                    <p>未登录，请登录</p>
                </div>
            )
        }
    }
}
export default useIsLogin;

组件中使用自定义Hook
import {useState} from 'react'
import useIsLogin from './useIsLogin.jsx'
export default function App() {
  let [userid,changeuid]=useState(null);
  // useIsLogin()调用后就会返回一个组件，LoginBox可以当标签使用
  let Loginbox=useIsLogin(userid);
  let transmituid=()=>{
    changeuid(666666);
  }
  return (
    <div>
      <h1>App组件</h1>
      <button onClick={transmituid}>changeuid</button>
      <Loginbox></Loginbox>
    </div>
  )
}

React 自定义Hook

自定义Hook