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

資訊專欄INFORMATION COLUMN

React&Redux中Scroll List封裝實踐

YanceyOfficial / 1533人閱讀

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

一直直在寫一個前端項目，來分享一些Scroll封裝的實踐
設(shè)計目標(biāo)

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

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

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

可以像這樣簡潔的使用這個封裝的Scroll List(or List View)
有種來到了開發(fā)Windows RT、WPF使用ListView template的即視感
開始封裝 說明：JSON格式扁平化（normalizr）

我在項目中使用normalizer來格式扁平化JSON數(shù)據(jù)

開發(fā)復(fù)雜的應(yīng)用時，不可避免會有一些數(shù)據(jù)相互引用。建議你盡可能地把 state 范式化，不存在嵌套。把所有數(shù)據(jù)放到一個對象里，每個數(shù)據(jù)以 ID 為主鍵，不同數(shù)據(jù)相互引用時通過 ID 來查找。把 應(yīng)用的 state 想像成數(shù)據(jù)庫 。這種方法在 normalizr 文檔里有詳細(xì)闡述。
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")       
        //下拉刷新監(jiān)聽綁定
        window.addEventListener("scroll", this.ListScroll);
        //初次Load
        this.FirstLoading;
    }
    componentWillUnmount(){
        //移除監(jiān)聽
        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=(
                ...
            );
        }
        ...//根據(jù)你的需求處理 底部如：加載更多，加載失敗時重新加載等
        
        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;
                    //數(shù)據(jù)經(jīng)過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

            

        )
    }
}
總結(jié)&TODO

封裝后總體Scroll List比較優(yōu)雅和快捷

但是欠缺性能優(yōu)化，使用immutable、shouldComponentUpdate優(yōu)化性能

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

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

相關(guān)文章

  • Byemess-基于React&redux的在線Todo應(yīng)用

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

    MRZYD 評論0 收藏0

  • 一篇文章讀懂 React & redux 前端開發(fā)

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

    cppowboy 評論0 收藏0

  • 一次react滾動列表的實踐---兼容ios安卓

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

    array_huang 評論0 收藏0

  • 一些基于React、Vue、Node.js、MongoDB技術(shù)棧的實踐項目

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

    tangr206 評論0 收藏0

  • React的移動端和PC端生態(tài)圈的使用匯總

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

    kun_jian 評論0 收藏0

發(fā)表評論

0條評論

YanceyOfficial

男|高級講師

TA的文章

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