React中如何“加載更多”？

darkerXi 發(fā)布于2019-08-23 15:53 / 2545人閱讀

摘要：前提條件假設(shè)首頁文章列表放于的中。思考步驟通過創(chuàng)建加載更多按鈕組件，并綁定回調(diào)函數(shù)。理想狀態(tài)函數(shù)通過出一個異步獲取數(shù)據(jù)并更新中的數(shù)據(jù)，組件再重新循環(huán)輸出。

前提條件：

假設(shè)首頁文章列表放于 store 的 list 中。

思考步驟：

通過 styled-components 創(chuàng)建“加載更多”按鈕組件，并綁定click回調(diào)函數(shù)A。

理想狀態(tài) 函數(shù)A 通過 dispatch 出一個 action 異步獲取數(shù)據(jù)并更新 store 中的 list 數(shù)據(jù)，組件再重新循環(huán)輸出 list。

首要問題通訊，要讓首頁文章模塊和 store 通訊我們需要使用到 react-redux （通過提供的 Provider 標(biāo)簽中的 store 屬性接收到store，通過 connect 函數(shù)打通模塊和傳入的 store 間的通訊。）

其次獲取數(shù)據(jù)，使用 axios 異步獲取數(shù)據(jù)相對簡單但是這部分代碼寫在哪最合適？？因為要 dispatch 所以首先想到 mapDispatchToState ，但我們不是直接 dispatch 而是先獲取異步數(shù)據(jù)，所以需要中間人介入也就是中間件使用 redux-thunk 可以 dispatch 函數(shù)，而函數(shù)中就可以異步獲取數(shù)據(jù)并 dispatch 出攜帶了異步返回數(shù)據(jù)的 action。

云服務(wù)器 GPU云服務(wù)器加載更多下拉加載更多 jquery加載更多 ListView加載更多

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

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

相關(guān)文章

前端每周清單第 43 期：2017 JavaScript 回顧、Rust 與 WebAssembly

摘要：楊冀龍是安全焦點民間白帽黑客組織核心成員，被浪潮之巔評為中國新一代黑客領(lǐng)軍人物之一他在本文中依次分享了對于黑客的定義如何從黑客成為一名安全創(chuàng)業(yè)者技術(shù)創(chuàng)業(yè)踩過的坑給技術(shù)創(chuàng)業(yè)者建議等內(nèi)容。 showImg(https://segmentfault.com/img/remote/1460000012377230?w=1240&h=796); 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為...

xorpay 2019-08-22 11:15 評論0 收藏0
前端每周清單第 29 期：Web 現(xiàn)狀分析與優(yōu)化策略、Vue 單元測試、Headless Chrom

摘要：前端每周清單第期現(xiàn)狀分析與優(yōu)化策略單元測試爬蟲作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清單第 29 期：Web 現(xiàn)狀分析與優(yōu)化策略...

HackerShell 2019-08-21 12:05 評論0 收藏0
React-全家桶仿簡書部分功能

摘要：全家桶仿簡書部分功能前言前段時間接觸了下，一直想要自己寫一個小練手。在眾多應(yīng)用中，考慮之后選擇了簡書來模仿，這段時間就利用了工作之余的時間進(jìn)行開發(fā)。在這里簡單敘述一下我仿簡書部分布局以及功能實現(xiàn)的過程，僅做學(xué)習(xí)用途。 React-全家桶仿簡書部分功能前言前段時間接觸了下React，一直想要自己寫一個小Demo練手。在眾多應(yīng)用中，考慮之后選擇了簡書來模仿，這段時間就利用了工作之余的時...

Jinkey 2019-08-23 13:40 評論0 收藏0
使用Vue的HOC技術(shù)開發(fā)一個無限加載列表

摘要：高階組件的概念，是里面經(jīng)常提到的，類似于高階函數(shù)。高階函數(shù)高階組件高階組件用是代碼復(fù)用的優(yōu)秀工具，主要在處理邏輯方面和普適性上，有著奇效。前言在web開發(fā)上，我們都對數(shù)據(jù)采用分頁加載的機(jī)制，一種變形就是在頁面采用循環(huán)加載的機(jī)制，拉到頁面最下方有個加載更多的按鈕。問題在于，當(dāng)不同的數(shù)據(jù)要展示時，就要寫很多這種列表，但是其中的邏輯都是相似的。維護(hù)一組數(shù)據(jù) 加載更多數(shù)據(jù) 將數(shù)據(jù)用對應(yīng)...

stefan 2019-08-23 14:36 評論0 收藏0
記錄一下自己的春招，唯品會、360、京東offer已收、騰訊offer_call已達(dá)?。?！

摘要：春招結(jié)果五月份了，春招已經(jīng)接近尾聲，因為到了周五晚上剛好有空，所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續(xù)到四月底，截止今天，已經(jīng)斬獲唯品會電商前端研發(fā)部大數(shù)據(jù)與威脅分析事業(yè)部京東精銳暑假實習(xí)生的騰訊的是早上打過來的。春招結(jié)果五月份了，春招已經(jīng)接近尾聲，因為到了周五晚上剛好有空，所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續(xù)到四月底，截止今天，已經(jīng)斬獲唯品...

freewolf 2019-08-22 16:57 評論0 收藏1