使用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