【Javascript】Custom Hook 与 HOC 让代码不再臃肿、冗余

[AwesomeDevin]

引言

为了更高效地开发、维护前端代码，我们最常听到也最常用的方式就是将通用性较强的组件或逻辑提取成公共函数或公共组件，减少重复代码，那么还有别的方式吗？本文将带你通过Custom Hook与HOC实现极致的逻辑复用，大幅提升代码开发及维护体验。
在了解具体细节前，我们需要先了解Custom Hook与HOC。

Custom Hook

通过Custom Hook，当两个函数之间存在共享逻辑时，我们可以把共享逻辑提取到第三个函数中，而组件和 Hook 都是函数，所以也同样适用这种方式，即支持 Hook 内 调用其他 Hook。

Custom Hook 必须以 “use” 开头，这个约定非常重要。不遵循的话，由于无法判断某个函数是否包含对其内部 Hook 的调用，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则。

示例代码如下, 下述组件A、B存在逻辑复用问题 ：

组件A

function A() {
  const [isShow, switchShow] = useState(false);
  const switch = () => {
     switchShow(!isShow)
 }
  return <div onClick={switch}>组件A</div> ;
}

组件B

function B() {
  const [isShow, switchShow] = useState(false);
  const switch = () => {
     switchShow(!isShow)
  }
  return <div onClick={switch}>组件B</div> ;
}

解决方案：

自定义 hook useShowStatus

function useShowStatus(defaultStatus){
  const [isShow, switchShow] = useState(defaultStatus);
  const switch = () => {
     switchShow(!isShow)
  }
  return { isShow, switch }
}

组件A

function A() {
  const { isShow, switch }= useShowStatus(false);
  return <div onClick={switch}>组件A</div> ;
}

组件B

function B() {
  const { isShow, switch }= useShowStatus(false);
  return <div onClick={switch}>组件B</div> ;
}

js逻辑重复的问题解决了！，那么如果是以下情况出现了组件引用的多次复用，又该怎么解决呢？

组件A

import { Modal, Button } from 'antd'
function A(){
  const { isShow, switch }= useShowStatus(false);
  return <div>
      <Button onClick={switch}>组件A</Button>
      <Modal show={isShow} />
    </div> ;
}

组件B

import { Modal, Button } from 'antd'
function B(){
  const { isShow, switch }= useShowStatus(false);
  return <div onClick={switch}>
      <Button onClick={switch}>组件B</Button>
      <Modal show={isShow} />
    </div> ;
}

这时便可以用到HOC了。

HOC

HOC又称高阶组件，它接收一个函数作为参数，并且返回值也是一个函数，

高阶组件 HocCom

import { Modal } from 'antd'
function Hoc(Com){
  return function HocCom(props){
    const { isShow, switch }= useShowStatus(false);
    const hocComProps = {
      ...props,
      switch
    }
    return <>
      <Modal show={isShow}  />
      <Com {...hocComProps} />
    </>
  }
}
export default Hoc

组件A

import Hoc from './HocCom'
function A(props){
  const { switch }= props
  return <div>
      <Button onClick={switch}>组件A</Button>
    </div> ;
}
Hoc(A)

组件B

import Hoc from './HocCom'
function B(props){
  const { switch }= props
  return <div>
      <Button onClick={switch}>组件B</Button>
    </div> ;
}
Hoc(B)

总结

如此一来，公共组件及相关状态都放到了HOC中进行管理，大幅提升了代码简洁程度，同时也提升了代码维护效率及开发者开发体验。以上便是Custom Hook 与 HOC 让代码不再臃肿、冗余的代码实践了，如果读者有不同的想法或意见，欢迎在评论区提出，互相学习。