成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

React&Redux中Scroll List封裝實(shí)踐

YanceyOfficial / 1575人閱讀

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

一直直在寫一個(gè)前端項(xiàng)目，來(lái)分享一些Scroll封裝的實(shí)踐
設(shè)計(jì)目標(biāo)

因?yàn)轫?xiàng)目中需要大量的類似Scroll List，ListView頁(yè)面：

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

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

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

我在項(xiàng)目中使用normalizer來(lái)格式扁平化JSON數(shù)據(jù)

開(kāi)發(fā)復(fù)雜的應(yīng)用時(shí)，不可避免會(huì)有一些數(shù)據(jù)相互引用。建議你盡可能地把 state 范式化，不存在嵌套。把所有數(shù)據(jù)放到一個(gè)對(duì)象里，每個(gè)數(shù)據(jù)以 ID 為主鍵，不同數(shù)據(jù)相互引用時(shí)通過(guò) ID 來(lái)查找。把 應(yīng)用的 state 想像成數(shù)據(jù)庫(kù) 。這種方法在 normalizr 文檔里有詳細(xì)闡述。
normalizr：將嵌套的JSON格式扁平化，方便被Redux利用；
舉個(gè)例子
[{
  id: 1,
  title: "Some Article",
  author: {
    id: 1,
    name: "Dan"
  }
}, {
  id: 2,
  title: "Other Article",
  author: {
    id: 1,
    name: "Dan"
  }
}]

處理后會(huì)變成

{
  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)聽(tīng)綁定
        window.addEventListener("scroll", this.ListScroll);
        //初次Load
        this.FirstLoading;
    }
    componentWillUnmount(){
        //移除監(jiān)聽(tīng)
        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ù)你的需求處理 底部如：加載更多，加載失敗時(shí)重新加載等
        
        return(
            

               {this.props.children}//因?yàn)長(zhǎng)ist主體是被包裹在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)過(guò)normalize格式化
            let datas=[
];
            if(result.length!==0){
                datas=[];
                result.forEach(function(id) {
                    datas.push(ListEl(id,entities,type))//ListEl是一個(gè)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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

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

    MRZYD 評(píng)論0 收藏0

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

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

    cppowboy 評(píng)論0 收藏0

  • 一次react滾動(dòng)列表的實(shí)踐---兼容ios安卓

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

    array_huang 評(píng)論0 收藏0

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

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

    tangr206 評(píng)論0 收藏0

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

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

    kun_jian 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<