React Hooks useContext场景下如何封装调用setUserContext的可复用函数

方案1：自定义返回回调函数的Hook（最推荐） #

解决你之前的误区：自定义Hook不需要在onClick回调中调用，只需要在组件顶层执行，返回的回调函数可以直接绑定给onClick。

// 单独抽离的自定义Hook useFavoriteItem.js
import { useContext } from 'react'
import UserContext from '你的UserContext文件路径'

export const useFavoriteItem = () => {
  const { userContext, setUserContext } = useContext(UserContext)
  // 重复逻辑统一封装在Hook内部
  const favoriteItem = (e) => {
    e.stopPropagation()
    e.preventDefault()
    setUserContext({ 
      ...userContext, 
      favoriteItems: JSON.parse(localStorage.getItem("favoriteItems")) 
    })
  }
  return favoriteItem
}

组件内使用方式：

import { useFavoriteItem } from './useFavoriteItem'

const YourComponent = () => {
  // 组件顶层调用Hook拿到处理函数
  const handleFavorite = useFavoriteItem()
  // 直接绑定到onClick属性即可
  return <button onClick={handleFavorite}>收藏</button>
}

方案2：封装普通工具函数，传入依赖参数 #

不需要在工具函数内调用useContext，把需要的上下文状态和更新方法作为参数传入即可实现复用。

// 单独抽离的工具函数 favoriteUtils.js
export const favoriteItemHandler = (e, userContext, setUserContext) => {
  e.stopPropagation()
  e.preventDefault()
  setUserContext({ 
    ...userContext, 
    favoriteItems: JSON.parse(localStorage.getItem("favoriteItems")) 
  })
}

组件内使用方式：

import { useContext } from 'react'
import UserContext from '你的UserContext文件路径'
import { favoriteItemHandler } from './favoriteUtils'

const YourComponent = () => {
  const { userContext, setUserContext } = useContext(UserContext)
  return <button onClick={(e) => favoriteItemHandler(e, userContext, setUserContext)}>收藏</button>
}

方案3：逻辑封装到Context Provider层直接导出 #

如果该逻辑只会和UserContext绑定使用，可以直接把处理函数放在Provider里，所有消费组件直接取用即可，不需要额外引入其他依赖。

// UserContextProvider.js
import { createContext, useContext, useState } from 'react'

const UserContext = createContext()

export const UserContextProvider = ({ children }) => {
  const [userContext, setUserContext] = useState(你的初始上下文值)
  // 逻辑直接封装在Provider内部
  const favoriteItem = (e) => {
    e.stopPropagation()
    e.preventDefault()
    setUserContext({ 
      ...userContext, 
      favoriteItems: JSON.parse(localStorage.getItem("favoriteItems")) 
    })
  }
  return (
    <UserContext.Provider value={{ userContext, setUserContext, favoriteItem }}>
      {children}
    </UserContext.Provider>
  )
}

// 导出统一的消费Hook
export const useUserContext = () => useContext(UserContext)

组件内使用方式：

import { useUserContext } from './UserContextProvider'

const YourComponent = () => {
  const { favoriteItem } = useUserContext()
  return <button onClick={favoriteItem}>收藏</button>
}

内容的提问来源于stack exchange，提问作者SoGoddamnUgly