React Hooks时代的代码组织

React Hooks时代的代码组织

技术杂谈小彩虹2021-08-26 5:52:5280A+A-

Hook是官方为解决组件之间重用有状态逻辑困难的问题而创造的。Hooks允许您根据相关内容(例如设置订阅或获取数据)将一个组件拆分为较小的函数,而不是基于生命周期方法强制拆分。 Hooks 允许我们根据代码的用途来分割代码

根据代码的用途而不是代码的性质拆分业务逻辑

function Page(){
  // ============================== PartA部分 ==============================
  const [partA1State,setPartA1State] = useState()
  const handlePartA1Click = () => {
    // ...
  }

  const [partA2State,setPartA2State] = useState()
  const handlePartA2 = () => {
    // ...
  }
  
  const [partA3State,setPartA3State] = useState()
  const handlePartA3 = () => {
    // ...
  }
  // ...

  const partA = <> <div onClick={handlePartA1Click} >{partA1State}</div> ... </>

  // ============================== PartB部分 ==============================
  const [partB1State,setPartB1State] = useState()
  const handlePartB1Click = () => {
    const list = partA1State * 100 // 使用到了A1部分
    // ...
  }

  const [partB2State,setPartB2State] = useState()
  const handlePartB2 = () => {
    // ...
  }
  
  const [partB3State,setPartB3State] = useState()
  const handlePartB3 = () => {
    // ...
  }
  // ...

  const partB = <> <div onClick={handlePartB1Click} >{partB1State}</div> ... </>

  return <div> <div>{partA}</div> <div>{partB}</div> </div>
}

使用这种形式组织代码,随着项目需求的增加与变更,代码维护思路应当会相当清晰。

1. 修改时

修改时只需找到对于模块的逻辑修改。

2. 新增时

新增时,根据具体逻辑量考虑。如果修改后代码量变得足够大,则使用老办法——拆分组件。这种组织形式对于组件拆分来说,也是十分清晰的。

function PartA({partA1State, handlePartA1Click}){
  // ============================== PartA部分 ==============================

  const [partA2State,setPartA2State] = useState()
  const handlePartA2 = () => {
    // ...
  }
  
  const [partA3State,setPartA3State] = useState()
  const handlePartA3 = () => {
    // ...
  }
  // ...

  // 原来变量的形式修改成直接return即可
  return <> <div onClick={handlePartA1Click} >{partA1State}</div> ... </>
}

function PartB({partA1State}){
  // ============================== PartB部分 ==============================
  const [partB1State,setPartB1State] = useState()
  const handlePartB1Click = () => {
    const list = partA1State * 100 // 使用到了A1部分
    // ...
  }

  const [partB2State,setPartB2State] = useState()
  const handlePartB2 = () => {
    // ...
  }
  
  const [partB3State,setPartB3State] = useState()
  const handlePartB3 = () => {
    // ...
  }
  // ...

  return  <> <div onClick={handlePartB1Click} >{partB1State}</div> ... </>
}

function Page(){
  // 提取公用状态到父组件 (通过其他的状态管理方案也是一样)
  const [partA1State,setPartA1State] = useState()
  const handlePartA1Click = () => {
    // ...
  })

  return <div> <div> <PartA partA1State={partA1State} handlePartA1Click={handlePartA1Click}/> </div> <div> <PartB partA1State={partA1State}/> </div> </div>
}

以上可以看出,用这种方式组织代码,进行组件的拆分时一眼就可以区分出相关逻辑,几乎只需要几次简单的剪切粘贴和少量修改。

3.删除时

需求变更,弃用PartB部分。

function Page(){
  // ============================== PartA部分 ==============================
  const [partA1State,setPartA1State] = useState()
  const handlePartA1Click = () => {
    // ...
  }

  const [partA2State,setPartA2State] = useState()
  const handlePartA2 = () => {
    // ...
  }
  
  const [partA3State,setPartA3State] = useState()
  const handlePartA3 = () => {
    // ...
  }
  // ...

  const partA = <> <div onClick={handlePartA1Click} >{partA1State}</div> ... </>

  return <div> <div>{partA}</div> </div>
}

以上是我对hooks时代业务代码组织形式的一些浅薄理解,希望可以和大家一起分享,并得到更多意见

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们