基于React与Redux的留言墙的完成

2019年8月30日 212次阅读 来源: hjava

背景

由于某奇迹群须要留言墙用于年会，同时须要挪用大象民众号服务器接口，所以在今年年初开辟了留言墙用于运动现场交换。

设想

本次留言墙分为两部份。一部份为运动展现部份，另一部份为背景审批部份。

运动展现部份为匿名留言墙情势（后改成实名制），须要依据收到的留言墙举行向上腻滑转动，假如没有音讯吸收则住手在末了一条音讯上。

背景审批部份为管理人员对用户像某个特定民众号发送的特定花样音讯举行考核，符合上墙要求的音讯则经由过程考核，经由过程运动展现页面举行展现。

手艺计划

React

该项目采用了React作为View层的衬着框架。关于React的简朴引见，人人可以戳阮一峰的博客React 入门实例教程, 须要体系进修的同砚可以戳React的官方网站React英文版，React中文版。发起人人浏览React英文版网站，中文版网站相对于英文版网站来讲缺少了一部份内容，比方React的children部份，多是由于英文文档更新致使的翻译不太实时的缘由。

Redux

Redux的进修可以经由过程Redux中文文档来举行。内里有许多的示例可以辅佐举行进修。详细运用要领会经由过程背面的步骤举行引见。

完成

React

在View层中，有两个组件。

  • Message

        <div className="message">
            {this.props.flag === false ? <img src={this.props.photo} alt="头像"/> : ''}
                <div className="message-content">
                    {this.props.uname} [{this.parseDate(this.props.sendTime)}] {this.props.text}
                    {this.props.flag === true ? this.props.approve === 0 ?
                        <button onClick={this.props.approveMsg}>经由过程</button> : '已由过程' : ''}
                </div>
            </div>

  • MsgList

        <div>
        <button onClick={(e)=>{this.handleClick(e)}}>猎取音讯</button>
            <div id="wall">
                <ul>
                    {this.props.msgs.map((message, index) =>
                        <Message {...message} key={index} flag={this.props.flag}
                                              approveMsg={()=>{this.props.approveMsg(index, message.id)}}/>
                    )}
                </ul>
            </div>
        </div>

个中Message为每条音讯的组件，MsgList为全部音讯列表的组件。

Redux

Action

Action主要为处置惩罚数据的数据层。大部份的数据操纵都放在Action中，经由过程dispatch(Action)的要领来关照readucer举行数据更新，从而经由过程react-redux来关照组件更新。
起首，会定义一些Action常量，用于操纵定名。

export const WALL_REQUEST = 'WALL_REQUEST';
export const WALL_REQUEST_SUCCESS = 'WALL_REQUEST_SUCCESS';
export const WALL_REQUEST_FAIL = 'WALL_REQUEST_FAIL';

export const CHECK_MSGS = 'CHECK_MSGS';
export const CHECK_MSGS_SUCCESS = 'CHECK_MSGS_SUCCESS';
export const CHECK_MSGS_FAIL = 'CHECK_MSGS_FAIL';
export const MSG_REQUEST = 'MSG_REQUEST';
export const MSG_REFUSE = 'MSG_REFUSE';
export const MSG_PASS = 'MSG_PASS';

同时，会定义一些函数，用于View层中与Action部份举行通讯，从而触发某些操纵。

export function fetchMsgs(number) {
    const path = '/nh/show/msg';
    return dispatch=> {
        dispatch(requestMsgs(number));
        return window.fetch(URL + path).then(response=>response.json()).then(json=>dispatch(receiveMsgs(json.data)));
    }
}

在reducer中运用了window变量中的fetch接口用于数据猎取，有关于此接口的运用我背面会写另一篇文章来举行引见，人人假如须要材料可以先戳此处，须要中文版的童鞋可以戳此处。

Reducer

在Reducer中，会对当前state中的一切数据举行处置惩罚，转变state中的全局数据从而驱动组件从新衬着。

function msgsReducer(state = [], action) {
    switch(action.type) {
        case WALL_REQUEST:
        {
            return state.slice(action.number)
        }
        case WALL_REQUEST_SUCCESS:
        {
            return [
                ...state, ...action.data
            ]
        }
        default:
        {
            return state;
        }
    }
}

在reducer中平常经由过程Action中声明的操纵和action所带来的参数对state举行操纵。每次都须要返回一个新的对象或许数组，而不能再原有数据上举行修正，从而防止数据更新后组件不更新的题目。

Server

server端返回的数据为一次性数据，即数据取事后就不会再返回，因而须要在前端Reducer内里对数据举行存储。由于数据为转动显现，因而须要一个行列来举行掌握。

难点

转动题目

scrollTop+setInterval

最最先的转动计划挑选此计划。此计划在完成上也最为简朴。然则，当音讯数目抵达1K量级时，可以显著的感觉到有卡顿的征象发作，转动很不流通，因而扬弃了此要领。

transform+setInterval

由于上一个计划中scrollTop在节点数过量的状况下会致使卡顿的题目，因而在转动上采用了transform的要领，然则由于setInterval粒度不够小，因而对其举行了替代。

transform+window.requestAnimationFrame

window.requestAnimationFrame是浏览器接口，被挪用的频次是每秒60次，然则平常会遵照W3C规范划定的频次。运用此接口可以保证挪用频次，同时可以合营transform的变化数字来举行速率掌握。因而采用了此要领。

节点删除功用

由于在留言墙的运用过程当中，会有不停的新的节点发生而且转动出视口，因而为了节约内存，须要将转动出视口的节点删除，从而防止全部网页斲丧的内存越来越大。
由于转动体式格局确定为transform的转动体式格局，因而挑选了在要求挪用返回数据后同时触发删除代码，对当前音讯节点举行推断，对已转动到视口外的数据节点举行删除，并重置transform值，从而到达删除节点的目标。

componentWillReceiveProps(nextProps) {
    if(this.props.flag === false && this.props.msgs.length !== nextProps.msgs.length) {
        let number = Math.floor((-this.y) / this.msgHeight),
            element = document.getElementById('wall').getElementsByTagName('ul')[0];
        if(number > 0) {
            this.y = this.y + number * this.msgHeight;
            element.style.transform = 'translateY(' + (this.y) + 'px)';
            return;
        }
        window.cancelAnimationFrame(this.animationId);
        this.animationId = window.requestAnimationFrame(this.scroll.bind(this));
    }
}

经由过程组件吸收新数据衬着时来重置transform值，完成节点删除事情。

不足

假如音讯并发数目较多，会致使音讯聚集在视口下方守候向上转动，由此能够斲丧大批的内存，后续依然须要优化，防止一切接受到的未展现的数据都衬着出来聚集在下方。

总结

在刚最先设想时最少斟酌到了转动的状况，并没有斟酌到音讯越来越多致使页面占用内存越来越大的题目。当完成最初版本的音讯转动时，在本身测试的过程当中由于音讯数目过大致使卡顿，所以斟酌到了转动方面的优化与节点删除的题目。transform的效力优于scrollTop，而window.requestAnimationFrame的机能又优于setInterval，然则在开辟时候上不是迥殊足够，因而挑选了机能最好的手艺计划，然则舍弃了一部份优化的计划。

    原文作者：hjava
    原文地址: https://segmentfault.com/a/1190000004613762
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞