使用React Hooks復用復雜業務組件

dreamans 發布于2019-08-23 14:24 / 3072人閱讀

摘要：前段時間也在復雜業務組件抽取上下了不少功夫。本文將使用近期非常火的特性抽取常用的業務組件，并比對業界已有方式，借此嘗試探索出一套優雅的組件復用方案。即將同一業務模塊的放置同一文件夾。下面使用排行榜復雜業務模塊的封裝來進行實例說明。

導語：復雜業務邏輯復用一直是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。下面使用「排行榜」復雜業務模塊的封裝來進行實例說明。

1、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
  }
}

2、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 (
    
        ...
    
  )
}

export default Rank

按這種方式我們可以在需要拉取rank數據的時候直接調用方法獲取到，并且不同組件中數據相互獨立，非常適用于多榜單切換的情況，如下圖

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

業界其他方式

具體參考React Hooks深入不淺出

感謝閱讀，祝大家新年快樂～～～～

參考

React Hooks的簡單介紹
React Hooks深入不淺出
如何更優雅地使用 Redux

GPU云服務器云服務器 React hooks react-hooks React Hooks 文檔重大更新！ java復雜業務邏輯

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100564.html

從Mixin到hooks，談談對React16.7.0-alpha中即將引入的hooks的理解

摘要：已經被廢除，具體缺陷可以參考二為了解決的缺陷，第二種解決方案是高階組件簡稱。我們定義了父組件，存在自身的，并且將自身的通過的方式傳遞給了子組件。返回一個標識該的變量，以及更新該的方法。 ??為了實現分離業務邏輯代碼，實現組件內部相關業務邏輯的復用，在React的迭代中針對類組件中的代碼復用依次發布了Mixin、HOC、Render props等幾個方案。此外，針對函數組件，在Reac...

ZweiZhao 2019-08-02 11:52 評論0 收藏0
從Mixin到hooks，談談對React16.7.0-alpha中即將引入的hooks的理解

摘要：已經被廢除，具體缺陷可以參考二為了解決的缺陷，第二種解決方案是高階組件簡稱。我們定義了父組件，存在自身的，并且將自身的通過的方式傳遞給了子組件。返回一個標識該的變量，以及更新該的方法。 ??為了實現分離業務邏輯代碼，實現組件內部相關業務邏輯的復用，在React的迭代中針對類組件中的代碼復用依次發布了Mixin、HOC、Render props等幾個方案。此外，針對函數組件，在Reac...

funnyZhang 2019-08-29 17:09 評論0 收藏0
從Mixin到hooks，談談對React16.7.0-alpha中即將引入的hooks的理解

摘要：已經被廢除，具體缺陷可以參考二為了解決的缺陷，第二種解決方案是高階組件簡稱。我們定義了父組件，存在自身的，并且將自身的通過的方式傳遞給了子組件。返回一個標識該的變量，以及更新該的方法。 ??為了實現分離業務邏輯代碼，實現組件內部相關業務邏輯的復用，在React的迭代中針對類組件中的代碼復用依次發布了Mixin、HOC、Render props等幾個方案。此外，針對函數組件，在Reac...

wizChen 2019-08-23 12:39 評論0 收藏0
React Hooks入門: 基礎

摘要：當組件安裝和更新時，回調函數都會被調用。好在為我們提供了第二個參數，如果第二個參數傳入一個數組，僅當重新渲染時數組中的值發生改變時，中的回調函數才會執行。前言　　首先歡迎大家關注我的Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現，能堅持下去也是靠的是自己的熱情和大家的鼓勵，希望大家多多關注呀！React 16.8中新增了Hooks特性，并且在React官方文檔中新增...

mrli2016 2019-08-23 15:36 評論0 收藏0
React Hook起飛指南

摘要：起飛指南作者元瀟方凳雅集出品目前放出來了個內置，但僅僅基于以下兩個，就能做很多事情。行代碼實現一個全局元瀟根組件掛上即可子組件調用隨時隨地實現一個局部元瀟的本質是的一個語法糖，感興趣可以閱讀一下的類型定義和實現。 React Hook起飛指南作者：元瀟方凳雅集出品 16.8目前放出來了10個內置hook，但僅僅基于以下兩個API，就能做很多事情。所以這篇文章不會講很多API，...

姘擱『 2019-08-26 10:47 評論0 收藏0