React中的自定义Hook我觉得真的是特别香了,自定义Hook本质上是一种函数代码逻辑的抽取,类似vue2.0的mixin,但是mixin有多少坑我就不说了…

下面我来通过三个案例要具体使用一下自定义Hook

一.Context的共享

首先我们在APP.js中定义两个context

export const UserContext = createContext()
export const TokenContext = createContext()

   <UserContext.Provider value={{name:'lsh'}}>
     <TokenContext.Provider value={{token:'asd'}}>
     <ContextShare/>
     </TokenContext.Provider>
   </UserContext.Provider>

ContextShare是子组件，把它包裹起来，UserContext传一个name，TokenContext传一个token，然后我们在ContextShare里面获取这两个参数

我们在开发的时候通常会创建一个hook文件夹，里面专门放上自定义hook,在hook文件夹里面创建一个

user-hook.js

import React, { useContext } from 'react'
import {UserContext,TokenContext} from '../App'
export default function useUserContext() {
  const user = useContext(UserContext)
  const token = useContext(TokenContext)
  return [user,token]
  return (
    <div>   
    </div>
  )
}

将UserContext,TokenContext导入，然后通过useContext来赋值给我们定义的变量，然后给它return出去，这样我们在不同的组件也都能获取到

之后我们在其他页面怎么用呢？那就更简单了

import React, { useContext } from 'react'
import useUserContext from '../hook/user-hook'
export default function ContextShare() {
  const [user,token] = useUserContext()
  console.log(user,token)
  return (
    <div>
    </div>
  )
}

直接将这个hook.js导入，然后

const [user,token] = useUserContext()

完事，不过这里我要强调一下，我们定义的hook，组件名前面一定要是以use开头的，这个切记！！！！！！！！

二.获取页面滚动位置

还是首先我们在hook文件夹里面创建一个scroll-postion.js

import React,{useState,useEffect} from 'react'
export default function useScrollPostion() {
  const [scrollPosition, setScrollPostion] = useState(0)
  useEffect(() => {
    const handleScroll = () => {
      setScrollPostion(window.scrollY)
    }
    document.addEventListener('scroll', handleScroll);
    return () => {
      document.removeEventListener('scroll', handleScroll)
    }
  },[])
   
   return [scrollPosition]

  return (
    <div>
      
    </div>
  )
}

然后再组件调用

import React, { useEffect, useState } from 'react'
import useScrollPostion from '../hook/scroll-postion'

export default function CustomScroll() {
  
 const position = useScrollPostion() 
 

  return (
    <div style={{ padding: '1000px 0 ' }}>
      gogoing
      <h2>{position}</h2>
    </div>
  )
}

三.localStorage的存储

跟上面的同理

localstoagehook.js

import React,{ useState, useEffect } from 'react'

export default function useLocalstoagehook(key) {

  const [name, setName] = useState(() => {
    const name = JSON.parse(localStorage.getItem(key))
    return name
  })

  useEffect(() => {
    // localStorage.setItem('name', name)
    localStorage.setItem(key, JSON.stringify(name))
  }, [name])
   
  return [name,setName]

  return (
    <div>
      
    </div>
  )
}

组件调用

import React, { useState, useEffect } from 'react'

import useLocalstoagehook from '../hook/localstoagehook'

export default function CustomLocalStorage() {
  
  const [name,setName]= useLocalstoagehook('name')

  return (
    <div>
      {name}
      <button onClick={e => setName('lsh')}>设置</button>
    </div>
  )
}

是不是觉得自定义hook特别好用，对于我们抽取相同逻辑代码来说，不过切记定义的hook组件名前面跟上use！！！