国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用React Hooks復(fù)用復(fù)雜業(yè)務(wù)組件

dreamans / 3070人閱讀

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

導(dǎo)語：復(fù)雜業(yè)務(wù)邏輯復(fù)用一直是React組件開發(fā)中的一大難題，團(tuán)隊(duì)目前同質(zhì)化業(yè)務(wù)比較多，我們的想法是直接復(fù)用已有的邏輯代碼，因?yàn)檫€要考慮到數(shù)據(jù)的拉取，展示，顯然純UI組件不能滿足我們的需求。前段時(shí)間也在復(fù)雜業(yè)務(wù)組件抽取上下了不少功夫。本文將使用近期非常火的React Hook特性抽取常用的業(yè)務(wù)組件，并比對業(yè)界已有方式，借此嘗試探索出一套優(yōu)雅的組件復(fù)用方案。
背景

現(xiàn)有的業(yè)務(wù)采用Redux管理業(yè)務(wù)數(shù)據(jù)，各模塊關(guān)注的Reducer、Action是分散的，并且所有數(shù)據(jù)使用唯一Store儲存。如果直接通過拷代碼的方式，需要同時(shí)關(guān)注Reducer、Action目錄，然后修改頂層Store中關(guān)注的Reducer。這樣的開發(fā)方式對二次開發(fā)者來說非常不友好，理清原有代碼然后復(fù)用的時(shí)間消耗不亞于自己重寫一套邏輯。為了減少不必要的開發(fā)耗時(shí)，封裝常用的復(fù)雜業(yè)務(wù)模塊迫在眉睫。

現(xiàn)階段方式

首先我們將開發(fā)方式由縱向開發(fā)轉(zhuǎn)為橫向開發(fā)。即將同一業(yè)務(wù)模塊的Reducer、Action、index放置同一文件夾。

目錄結(jié)構(gòu)如下：

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

這樣還是和原始React+Redux的開發(fā)方式一樣，而二次開發(fā)者只需要拷貝業(yè)務(wù)模塊文件夾再做細(xì)節(jié)修改了。
其實(shí)這樣的開發(fā)方式僅僅是減少了開發(fā)者在多個(gè)文件夾來回切換的耗時(shí)，他們還是需要梳理模塊內(nèi)部邏輯，并且需要在頂層Store中添加數(shù)據(jù)關(guān)注。除非我們使用更多的Props使得組件可以滿足各種場景，開發(fā)者只需要傳遞相關(guān)屬性，即可直接使用，這樣就會使得我們的業(yè)務(wù)組件非常的重，有相當(dāng)多作為判斷用的雞肋般的代碼。

React Hooks

不了解React Hooks的同學(xué)可以先移步React Hooks的簡單介紹

Hooks的實(shí)質(zhì)是把面向生命周期編程變成了面向業(yè)務(wù)邏輯編程。此時(shí)我們業(yè)務(wù)組件的封裝方式可以修改成
Hooks + UI Component。下面使用「排行榜」復(fù)雜業(yè)務(wù)模塊的封裝來進(jìn)行實(shí)例說明。

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)

  // 第二個(gè)參數(shù)傳遞 [] 相當(dāng)于將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數(shù)據(jù)的時(shí)候直接調(diào)用方法獲取到，并且不同組件中數(shù)據(jù)相互獨(dú)立，非常適用于多榜單切換的情況，如下圖

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

業(yè)界其他方式

具體參考React Hooks深入不淺出

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

參考

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/100564.html

相關(guān)文章

  • 從Mixin到hooks，談?wù)剬?em>React16.7.0-alpha中即將引入的hooks的理解

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

    ZweiZhao 評論0 收藏0

  • 從Mixin到hooks，談?wù)剬?em>React16.7.0-alpha中即將引入的hooks的理解

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

    funnyZhang 評論0 收藏0

  • 從Mixin到hooks，談?wù)剬?em>React16.7.0-alpha中即將引入的hooks的理解

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

    wizChen 評論0 收藏0

  • React Hooks入門: 基礎(chǔ)

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

    mrli2016 評論0 收藏0

  • React Hook起飛指南

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

    姘擱『 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<