React中如何“加載更多”？

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

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

前提條件：

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

思考步驟：

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

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

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

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

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

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

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

相關(guān)文章

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

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

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

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

HackerShell 2019-08-21 12:05 評(píng)論0 收藏0
React-全家桶仿簡(jiǎn)書(shū)部分功能

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

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

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

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

摘要：春招結(jié)果五月份了，春招已經(jīng)接近尾聲，因?yàn)榈搅酥芪逋砩蟿偤糜锌眨院?jiǎn)單地記錄一下自己的春招過(guò)程。我的春招從二月初一直持續(xù)到四月底，截止今天，已經(jīng)斬獲唯品會(huì)電商前端研發(fā)部大數(shù)據(jù)與威脅分析事業(yè)部京東精銳暑假實(shí)習(xí)生的騰訊的是早上打過(guò)來(lái)的。春招結(jié)果五月份了，春招已經(jīng)接近尾聲，因?yàn)榈搅酥芪逋砩蟿偤糜锌眨院?jiǎn)單地記錄一下自己的春招過(guò)程。我的春招從二月初一直持續(xù)到四月底，截止今天，已經(jīng)斬獲唯品...

freewolf 2019-08-22 16:57 評(píng)論0 收藏1