React&Redux中Scroll List封装实践

YanceyOfficial 发布于2019-08-21 14:03 / 1409人阅读

摘要：建议你尽可能地把范式化，不存在嵌套。把所有数据放到一个对象里，每个数据以为主键，不同数据相互引用时通过来查找。

一直直在写一个前端项目，来分享一些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优化性能

云服务器海外云主机 react-redux React_Redux_Appointm react-router-redux 二次浅封装实践【附源码】

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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