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

資訊專欄INFORMATION COLUMN

前端開發中，滑動展現日志麻煩？這個組件來幫你

Clect / 735人閱讀

摘要：使用者需要做的，就是完成回調函數里的邏輯即可，十分簡單。如果你需要異步生成，你需要設置參數為元素展現時的回調函數，接收和作為參數。多次展現時，是否每次都觸發回調函數組件里監聽滑動事件時，用了。

寫在前面

在這個數據無比重要的時代，用戶在網頁上面的一系列操作，都需要用數據記錄下來。在一個網頁中，某個元素的點擊數，展現數可以說是最基本的指標了。點擊數很簡單，用戶點擊的時候，上報一條點擊日志即可。但是展現日志，就稍微麻煩一點了。特別是對于必須要上下滑動頁面才會出現的元素。滑動展現的場景，在feed流形式的產品上十分常見。所以，一個輕量級的組件，react-scroll-to-show-cb 誕生了。

組件整體介紹

安裝：

npm install react-scroll-to-show-cb --save

該組件是基于React開發的，適用于采用react開發的項目。目前主流的react版本都支持。preact也支持，但是需要配置以下的alias :

alias: {
    "react": "preact-compat",
    "react-dom": "preact-compat"
}

使用者只需要將 react組件 或者 html element 直接塞到 react-scroll-to-show-cb 的childern里面去，當對應的元素進入可視區域時，會觸發回調函數，并且返回必要的信息。使用者拿到這些信息，就能夠上報展現日志了。使用者需要做的，就是完成回調函數里的邏輯即可，十分簡單。

組件用法

先看一個例子：

import React from "react";
import ReactDOM from "react-dom";
import ReactScrollToShowCb from"react-scroll-to-show-cb";

class App extends React.Component {
    
    render() {
        return 

            
                
1

                
2

                
3

                
4

                
5

                
6

                
7

            
        

    }

    handleShow(index, dom) {
        console.log(`index: ${index}`);
        console.log("dom:", dom);
    }

    handleInitEnd(instance){
        console.log(instance);
    }

}


ReactDOM.render(, document.body);

ReactScrollToShowCb 的 children

支持 Class React Component ，支持 Html Elements, 不支持 Functional React Component 。可以為數組，也可以為單個元素。如果為數組，則數組里面的每個元素都必須為同樣的類型，即 屬于同一類 Class React Component 或者 同一種 Html Elements。

async

如果你需要異步生成children，你需要設置async參數為true.

onScrollToShow

元素展現時的回調函數，接收 index 和dom作為參數。

onInitEnd

react-scroll-to-show-cb組件初始化后觸發，接收組件實例作為參數。

once

多次展現時，是否每次都觸發回調函數

wait

組件里監聽滑動事件時，用了throttle。wait 控制回調函數的觸發頻率。

ReactScrollToShowCb.Update

當ReactScrollToShowCb的children被更新時（新增child或者刪除child），需要手動調用Update這個靜態方法來更新ReactScrollToShowCb。這樣，新增的child也會有滑動展現的邏輯，被刪除的child也不會再繼續觸發滑動展現的邏輯。這對于在feed流中 【下拉刷新】和【上滑加載】的業務邏輯十分有用。Update接受一個參數：ReactScrollToShowCb的實例。這個實例可以通過onInitEnd方法獲得。

為什么不支持react函數式組件直接作為children

組件在實現是，用了ref來獲取原始DOM。而函數式組件不支持ref。之前考慮在函數式組件外面新增一層html，但是這樣侵入性太強，直接破壞了原有的DOM結構，特別是在children是數組的情況下，會導致某些css失效。目前沒有很好的方法在父組件中獲取函數式組件的原始DOM。遇到函數式組件，可以將 ReactScrollToShowCb 寫到函數式組件內部return的jsx里面去。

支持異步生成children、增加child、刪除child, 但如果后續修改了children, 那么組件將不會繼續工作。

考慮到修改children的情況太多，可以新增，替換，刪除等等，如果支持所有情況，需要在組件內處理大量因為children變化而帶來的邏輯，這樣會使組件的復雜程度大大增加，并且對性能也是一個考驗。而本組件的定位就是實現一個簡單的滑動展現回調功能，所以react-scroll-to-show-cb只支持了異步生成children。而增加child、刪除child需要手動調用Update來更新react-scroll-to-show-cb。 但若有對children的修改，組件將停止正常工作。如果有修改children，然后滑動展現觸發回調的需求，可以考慮實例化多個react-scroll-to-show-cb來實現。

寫在后面

組件代碼地址在：這里

之所以開發這個組件，確實是因為之前和如今的工作中確實遇到了各個業務線都需要滑動展現日志的情況，當時都是在業務中直接搞，和業務耦合度較大，不容易復用。完全抽離出來后，就可以直接使用了。本文簡單介紹了組件，以及開發過程中的一些思考，符合預期。最后，歡迎關注公眾號:

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

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

相關文章

  • 日志排查問題困難？分布式日志鏈路跟蹤來幫你

    摘要：當前線程的子線程會繼承其父線程中的的內容。若希望在線程池與主線程間傳遞，需配合和使用。 一、背景 開發排查系統問題用得最多的手段就是查看系統日志，在分布式環境中一般使用ELK來統一收集日志，但是在并發大時使用日志定位問題還是比較麻煩，由于大量的其他用戶/其他線程的日志也一起輸出穿行其中導致很難篩選出指定請求的全部相關日志，以及下游線程/服務對應的日志。 ? 二、解決思路 每個請求都使...

    EasonTyler 評論0 收藏0

  • 找工作怎么辦，拉勾小程序來幫你

    摘要：于是我便萌發了一個新想法，自己手擼一個拉勾小程序。開發工具與資源平臺微信開發者工具用于敲網頁代碼，但是最主要用來進行手機效果預覽。微信小程序開發者文檔微信小程序開發的文檔，資源庫，以及規范可以模擬我們想要的數據，非常方便。 引言 現在的前端有各種各樣的新知識和新框架，小程序才出生幾年，就已經火到這種程度了，所以作為前端學習者，這個新技能我們是一定要盡快get到的。學習小程序最好的方法就...

    junbaor 評論0 收藏0

  • 想要更精準的小程序模版消息推送？我們來幫你實現

    摘要：在用戶喜愛的眾多功能中，使用率最高的是模版消息推送。模版消息推送數的量級也由早期每天幾百條，變為后來的每天數百萬條。平臺支持少知曉云已經支持包括微信小程序和支付寶小程序在內的各大小程序平臺的消息推送，對平臺的支持也將在近期上線。 兩年多前，為了讓更多的人找到好玩、好用的小程序，我們成立了「知曉程序」。 再后來，我們推出了后端云服務平臺——知曉云，幫助大家降低創業成本，提升開發效率。 「...

    RobinTang 評論0 收藏0

  • [譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

    摘要：一般來說，聲明式編程關注于發生了啥，而命令式則同時關注與咋發生的。聲明式編程可以較好地解決這個問題，剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區處理，這樣就能讓開發者專注于發生了啥，這里推薦一波與。 本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。 繼續譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...

    roadtogeek 評論0 收藏0

發表評論

0條評論

Clect

男|高級講師

TA的文章

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