使用React Hooks复用复杂业务组件

导语：复杂业务逻辑复用一直是 React组件开发中的一大难题，团队目前同质化业务比较多，咱们的想法是直接复用已有的逻辑代码，由于还要考虑到数据的拉取，展现，显然纯UI组件不能知足咱们的需求。前段时间也在复杂业务组件抽取上下了很多功夫。本文将使用近期很是火的 React Hook特性抽取经常使用的业务组件，并比对业界已有方式，借此尝试探索出一套优雅的组件复用方案。

背景

现有的业务采用Redux管理业务数据，各模块关注的Reducer、Action是分散的，而且全部数据使用惟一Store储存。若是直接经过拷代码的方式，须要同时关注Reducer、Action目录，而后修改顶层Store中关注的Reducer。这样的开发方式对二次开发者来讲很是不友好，理清原有代码而后复用的时间消耗不亚于本身重写一套逻辑。为了减小没必要要的开发耗时，封装经常使用的复杂业务模块迫在眉睫。

现阶段方式

首先咱们将开发方式由纵向开发转为横向开发。即将同一业务模块的Reducer、Action、index放置同一文件夹。

目录结构以下：

component
    |———reducer
    |———action
    |———accets
    |___index.js
    |___index.less

这样仍是和原始React+Redux的开发方式同样，而二次开发者只须要拷贝业务模块文件夹再作细节修改了。
其实这样的开发方式仅仅是减小了开发者在多个文件夹来回切换的耗时，他们仍是须要梳理模块内部逻辑，而且须要在顶层Store中添加数据关注。除非咱们使用更多的Props使得组件能够知足各类场景，开发者只须要传递相关属性，便可直接使用，这样就会使得咱们的业务组件很是的重，有至关多做为判断用的鸡肋般的代码。

React Hooks

不了解React Hooks的同窗能够先移步React Hooks的简单介绍

Hooks的实质是把面向生命周期编程变成了面向业务逻辑编程。此时咱们业务组件的封装方式能够修改为
Hooks + UI Component。下面使用「排行榜」复杂业务模块的封装来进行实例说明。

一、Hooks逻辑

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

function useRank (cgi, params) {
  const [rankList, setRankList] = useState([])
  const [myRank, setMyRank] = useState({})
  const [isEnd, setIsEnd] = useState(0)

  // 第二个参数传递 [] 至关于将effect做为class Component中的componentDidMount使用
  useEffect(() => {
    let query = ''
    Object.keys(params).forEach((key, idx) => {
      query += idx === 0 ? `?${key}=${params[key]}` : `&${key}=${params[key]}`
    })
    // 拉取逻辑
    _.get(`${cgi}${query}`)
      .then(res => {
        const { myRank, rankList, isEnd } = camelcase(res.data.result)
        setRank(rankList)
        setMyRank(myRank)
        setIsEnd(isEnd)
      })
      .catch(e => console.log(e))
  }, [])

  return {
    myRank, rankList, isEnd
  }
}

二、UI Component

import React from 'react'
import { useRank } from './hooks'

const Rank = ({
  cgi = ''
  params = { off_set: 0, page_size: 10 },
}) => {
  
  // 使用自定义Hook
  const { rank = [], myRank, isEnd } = useRank(cgi, params)

  return (
    <div>
        ...
    </div>
  )
}

export default Rank

按这种方式咱们能够在须要拉取rank数据的时候直接调用方法获取到，而且不一样组件中数据相互独立，很是适用于多榜单切换的状况，以下图

const { rank = [], myRank, isEnd } = useRank(cgi, params)

业界其余方式

具体参考React Hooks深刻不浅出

感谢阅读，祝你们新年快乐～～～～

参考

React Hooks的简单介绍
React Hooks深刻不浅出
如何更优雅地使用 Redux