React&Redux中Scroll List封裝實踐

YanceyOfficial 發布于2019-08-21 14:03 / 1527人閱讀

摘要：建議你盡可能地把范式化，不存在嵌套。把所有數據放到一個對象里，每個數據以為主鍵，不同數據相互引用時通過來查找。

一直直在寫一個前端項目，來分享一些Scroll封裝的實踐

設計目標

因為項目中需要大量的類似Scroll List，ListView頁面：

github上看了圈感覺沒有特別喜歡的，就自己來封裝了一下
層次結構如下：

|-Scroll//主要處理諸如下拉刷新，上拉加載，加載狀態，錯誤信息等
|-----List //主要是List主體 
|--------ListEl //返回List里單個Component,

使用方式

可以像這樣簡潔的使用這個封裝的Scroll List(or List View)
有種來到了開發Windows RT、WPF使用ListView template的即視感

開始封裝 說明：JSON格式扁平化（normalizr）

我在項目中使用normalizer來格式扁平化JSON數據

開發復雜的應用時，不可避免會有一些數據相互引用。建議你盡可能地把 state 范式化，不存在嵌套。把所有數據放到一個對象里，每個數據以 ID 為主鍵，不同數據相互引用時通過 ID 來查找。把 應用的 state 想像成數據庫 。這種方法在 normalizr 文檔里有詳細闡述。
normalizr：將嵌套的JSON格式扁平化，方便被Redux利用；
舉個例子

[{
  id: 1,
  title: "Some Article",
  author: {
    id: 1,
    name: "Dan"
  }
}, {
  id: 2,
  title: "Other Article",
  author: {
    id: 1,
    name: "Dan"
  }
}]

處理后會變成

{
  result: [1, 2],
  entities: {
    articles: {
      1: {
        id: 1,
        title: "Some Article",
        author: 1
      },
      2: {
        id: 2,
        title: "Other Article",
        author: 1
      }
    },
    users: {
      1: {
        id: 1,
        name: "Dan"
      }
    }
  }
}

CommonScorll.js

import React, { PropTypes, Component } from "react";

class CommonScorll extends Component {
    constructor(props) {
        super(props);
        const {FirstLoading,ListLoading} =this.props;
        this.ListScroll=this.ListScroll.bind(this);
        this.FirstLoading=()=>FirstLoading();
        this.ListLoading=()=>ListLoading();
    }
    componentDidMount() {
        console.log("common scroll componentDidMount")       
        //下拉刷新監聽綁定
        window.addEventListener("scroll", this.ListScroll);
        //初次Load
        this.FirstLoading;
    }
    componentWillUnmount(){
        //移除監聽
        window.removeEventListener("scroll", this.ListScroll);
    }
    ListScroll(e) {
        var scrollTop = document.body.scrollTop; 
        var offsetHeight = document.body.offsetHeight; 
        var scrollHeight = document.body.scrollHeight; 
        if (scrollTop >= scrollHeight - offsetHeight) { 
             this.ListLoading;
        } 
    }
    render(){
        console.log("common scroll render")
        const {
            isFetch,
            isEnd,
            fetchFailed,
            failedMsg,
            EmptyElement
                }=this.props;
        let NoMore=();
        if(isEnd){
            NoMore=(
                ...
            );
        }
        ...//根據你的需求處理 底部如：加載更多，加載失敗時重新加載等
        
        return(
            
               {this.props.children}//因為List主體是被包裹在Scroll中的，所以加載children
               ...    
            
        );
    }

}

export default CommonScorll;

CommonList.js

import React, { PropTypes, Component } from "react";
import {ListEl} from "./ListEl"

class CommonList extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        console.log("common list componentDidMount")       
    }
    render(){
            console.log("common list render")
            const {
                    entities,
                    result,
                    type
                    }=this.props;
                    //數據經過normalize格式化
            let datas=[];
            if(result.length!==0){
                datas=[];
                result.forEach(function(id) {
                    datas.push(ListEl(id,entities,type))//ListEl是一個function 
                })
            }
            return(
                
                    {datas}
                
            );
        }
}

export default CommonList;

ListEl.js

import React, { PropTypes, Component } from "react";
import SmallCourseCate from "../Common/CourseCate/SmallCourseCate"

export function ListEl(id,entites,type) {
    switch (type) {
        case "samllCourseCate":
            if(entites.coursecates[id]){
                let coursecate=entites.coursecates[id];
                return(
                    
                )
            }else{
                return (
                    
                    small coursecate el try get coursecate is null
                    
                )
            }
        ...
        default:
        return (
            
                el type undefind
            
        )
    }
}

總結&TODO

封裝后總體Scroll List比較優雅和快捷

但是欠缺性能優化，使用immutable、shouldComponentUpdate優化性能

GPU云服務器云服務器 react-redux React_Redux_Appointm react-router-redux 二次淺封裝實踐【附源碼】

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

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

Byemess-基于React&amp;redux的在線Todo應用

摘要：在線注冊賬號，數據存儲于。年了，還不使用的異步控制體系。過度對數據模型進行裝飾的結果便是高耦合，這跟我初衷是基于在線存儲數據有關。為什么又是Todo，全世界的初學者都在做todo嗎？可能很多人要問這句話，其實這句話可以等同于：為什么你做了個云音樂播放器？為什么你做了個新聞閱讀APP？為什么你做了個VUE/REACT版本的CNODE？究其本質，這幾個應用都是data-map...

MRZYD 2019-08-20 17:07 評論0 收藏0
一篇文章讀懂 React &amp; redux 前端開發

摘要：如在中在中，聚合積累的結果是當前的對象。被稱為副作用，在我們的應用中，最常見的就是異步操作。至于為什么我們這么糾結于純函數，如果你想了解更多可以閱讀，或者它的中文譯本函數式編程指南。 DvaJS： React and redux based, lightweight and elm-style framework. https://dvajs.com/ 實例項目源碼：https://g...

cppowboy 2019-08-23 13:11 評論0 收藏0
一次react滾動列表的實踐---兼容ios安卓

摘要：希望新版兼容和安卓兩端的情況下，無限制的刷新加載數據。圖片大小限制，本次由于部分列表圖片過大，在安卓上導致黑屏的問題出現。一、背景近期項目改版，對原有的h5頁面進行了重新設計，數據呈現變成了瀑布流。希望新版兼容ios和安卓兩端的情況下，無限制的刷新加載數據。大致效果如下： showImg(https://segmentfault.com/img/bVblFDE?w=772&h=15...

array_huang 2019-08-26 13:27 評論0 收藏0
一些基于React、Vue、Node.js、MongoDB技術棧的實踐項目

摘要：利用中間件實現異步請求，實現兩個用戶角色實時通信。目前還未深入了解的一些概念。往后會寫更多的前后臺聯通的項目。刪除分組會連同組內的所有圖片一起刪除。算是對自己上次用寫后臺的一個強化，項目文章在這里。后來一直沒動，前些日子才把后續的完善。歡迎訪問我的個人網站：http://www.neroht.com/? 剛學vue和react時，利用業余時間寫的關于這兩個框架的訓練，都相對簡單，有的...

tangr206 2019-06-26 17:34 評論0 收藏0
React的移動端和PC端生態圈的使用匯總

摘要：調用通過注冊表調用到實例，透過的，調用到中的，最后通過，調用，根據參數相應模塊執行。京東的，多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術，我們不能停留在五分鐘狀態，特別喜歡一句話，用什么方式繪制UI界面一點不重要，重要的是底層的思維，解決問題和優化...

kun_jian 2019-08-02 15:28 評論0 收藏0