成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端開發(fā)中，滑動展現(xiàn)日志麻煩？這個組件來幫你

Clect / 747人閱讀

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

寫在前面

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

組件整體介紹

安裝：

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

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

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

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

組件用法

先看一個例子：

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 ?？梢詾閿?shù)組，也可以為單個元素。如果為數(shù)組，則數(shù)組里面的每個元素都必須為同樣的類型，即 屬于同一類 Class React Component 或者 同一種 Html Elements。

async

如果你需要異步生成children，你需要設(shè)置async參數(shù)為true.

onScrollToShow

元素展現(xiàn)時的回調(diào)函數(shù)，接收 index 和dom作為參數(shù)。

onInitEnd

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

once

多次展現(xiàn)時，是否每次都觸發(fā)回調(diào)函數(shù)

wait

組件里監(jiān)聽滑動事件時，用了throttle。wait 控制回調(diào)函數(shù)的觸發(fā)頻率。

ReactScrollToShowCb.Update

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

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

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

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

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

寫在后面

組件代碼地址在：這里

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100221.html

相關(guān)文章

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

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

    EasonTyler 評論0 收藏0

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

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

    junbaor 評論0 收藏0

  • 想要更精準(zhǔn)的小程序模版消息推送？我們來幫你實現(xiàn)

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

    RobinTang 評論0 收藏0

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

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

    roadtogeek 評論0 收藏0

發(fā)表評論

0條評論

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