摘要：設(shè)計(jì)本次留言墻分為兩部分?；顒?dòng)展示部分為匿名留言墻形式后改為實(shí)名制，需要根據(jù)收到的留言墻進(jìn)行向上平滑滾動(dòng)，如果沒有消息接收則停止在最后一條消息上。主要為處理數(shù)據(jù)的數(shù)據(jù)層。

由于某事業(yè)群需要留言墻用于年會(huì)，同時(shí)需要調(diào)用大象公眾號(hào)服務(wù)器接口，所以在今年年初開發(fā)了留言墻用于活動(dòng)現(xiàn)場(chǎng)交流。

本次留言墻分為兩部分。一部分為活動(dòng)展示部分，另一部分為后臺(tái)審批部分。

活動(dòng)展示部分為匿名留言墻形式（后改為實(shí)名制），需要根據(jù)收到的留言墻進(jìn)行向上平滑滾動(dòng)，如果沒有消息接收則停止在最后一條消息上。

后臺(tái)審批部分為管理人員對(duì)用戶像某個(gè)特定公眾號(hào)發(fā)送的特定格式消息進(jìn)行審核，符合上墻要求的消息則通過審核，通過活動(dòng)展示頁(yè)面進(jìn)行展示。

該項(xiàng)目采用了React作為View層的渲染框架。關(guān)于React的簡(jiǎn)單介紹，大家可以戳阮一峰的博客React 入門實(shí)例教程, 需要系統(tǒng)學(xué)習(xí)的同學(xué)可以戳React的官方網(wǎng)站React英文版，React中文版。建議大家閱讀React英文版網(wǎng)站，中文版網(wǎng)站相對(duì)于英文版網(wǎng)站來(lái)說(shuō)缺少了一部分內(nèi)容，例如React的children部分，可能是由于英文文檔更新導(dǎo)致的翻譯不太及時(shí)的原因。

Redux的學(xué)習(xí)可以通過Redux中文文檔來(lái)進(jìn)行。里面有很多的示例能夠輔助進(jìn)行學(xué)習(xí)。具體使用方法會(huì)通過后面的步驟進(jìn)行介紹。

在View層中，有兩個(gè)組件。

Message

    

            {this.props.flag === false ?  : ""}
                

                    {this.props.uname} [{this.parseDate(this.props.sendTime)}] {this.props.text}
                    {this.props.flag === true ? this.props.approve === 0 ?
                        通過 : "已通過" : ""}
                
            
            

MsgList

    

        {this.handleClick(e)}}>獲取消息
            

                

                    {this.props.msgs.map((message, index) =>
                        {this.props.approveMsg(index, message.id)}}/>
                    )}
                
            
        

其中Message為每條消息的組件，MsgList為整個(gè)消息列表的組件。

Action主要為處理數(shù)據(jù)的數(shù)據(jù)層。大部分的數(shù)據(jù)操作都放在Action中，通過dispatch(Action)的方法來(lái)通知readucer進(jìn)行數(shù)據(jù)更新，從而通過react-redux來(lái)通知組件更新。
首先，會(huì)定義一些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";

同時(shí)，會(huì)定義一些函數(shù)，用于View層中與Action部分進(jìn)行通信，從而觸發(fā)某些操作。

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接口用于數(shù)據(jù)獲取，有關(guān)于此接口的使用我后面會(huì)寫另一篇文章來(lái)進(jìn)行介紹，大家如果需要資料可以先戳此處，需要中文版的童鞋可以戳此處。

在Reducer中，會(huì)對(duì)當(dāng)前state中的所有數(shù)據(jù)進(jìn)行處理，改變state中的全局?jǐn)?shù)據(jù)從而驅(qū)動(dòng)組件重新渲染。

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所帶來(lái)的參數(shù)對(duì)state進(jìn)行操作。每次都需要返回一個(gè)新的對(duì)象或者數(shù)組，而不能再原有數(shù)據(jù)上進(jìn)行修改，從而避免數(shù)據(jù)更新后組件不更新的問題。

server端返回的數(shù)據(jù)為一次性數(shù)據(jù)，即數(shù)據(jù)取過后就不會(huì)再返回，因此需要在前端Reducer里面對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ)。由于數(shù)據(jù)為滾動(dòng)顯示，因此需要一個(gè)隊(duì)列來(lái)進(jìn)行控制。

最開始的滾動(dòng)方案選擇此方案。此方案在實(shí)現(xiàn)上也最為簡(jiǎn)單。但是，當(dāng)消息數(shù)目到達(dá)1K量級(jí)時(shí)，能夠明顯的感覺到有卡頓的現(xiàn)象發(fā)生，滾動(dòng)很不流暢，因此拋棄了此方法。

由于上一個(gè)方案中scrollTop在節(jié)點(diǎn)數(shù)過多的情況下會(huì)導(dǎo)致卡頓的問題，因此在滾動(dòng)上采用了transform的方法，但是由于setInterval粒度不夠小，因此對(duì)其進(jìn)行了替換。

window.requestAnimationFrame是瀏覽器接口，被調(diào)用的頻率是每秒60次，但是一般會(huì)遵循W3C標(biāo)準(zhǔn)規(guī)定的頻率。使用此接口可以保證調(diào)用頻率，同時(shí)能夠配合transform的變化數(shù)字來(lái)進(jìn)行速度控制。因此采用了此方法。

由于在留言墻的使用過程中，會(huì)有不斷的新的節(jié)點(diǎn)產(chǎn)生并且滾動(dòng)出視口，因此為了節(jié)省內(nèi)存，需要將滾動(dòng)出視口的節(jié)點(diǎn)刪除，從而避免整個(gè)網(wǎng)頁(yè)消耗的內(nèi)存越來(lái)越大。
由于滾動(dòng)方式確定為transform的滾動(dòng)方式，因此選擇了在請(qǐng)求調(diào)用返回?cái)?shù)據(jù)后同時(shí)觸發(fā)刪除代碼，對(duì)當(dāng)前消息節(jié)點(diǎn)進(jìn)行判斷，對(duì)已經(jīng)滾動(dòng)到視口外的數(shù)據(jù)節(jié)點(diǎn)進(jìn)行刪除，并重置transform值，從而達(dá)到刪除節(jié)點(diǎn)的目的。

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));
    }
}

通過組件接收新數(shù)據(jù)渲染時(shí)來(lái)重置transform值，完成節(jié)點(diǎn)刪除工作。

如果消息并發(fā)數(shù)量較多，會(huì)導(dǎo)致消息堆積在視口下方等待向上滾動(dòng)，由此可能消耗大量的內(nèi)存，后續(xù)仍然需要優(yōu)化，避免所有接受到的未展示的數(shù)據(jù)都渲染出來(lái)堆積在下方。

在剛開始設(shè)計(jì)時(shí)至少考慮到了滾動(dòng)的情況，并沒有考慮到消息越來(lái)越多導(dǎo)致頁(yè)面占用內(nèi)存越來(lái)越大的問題。當(dāng)完成最初版本的消息滾動(dòng)時(shí)，在自己測(cè)試的過程中因?yàn)橄?shù)量過大導(dǎo)致卡頓，所以考慮到了滾動(dòng)方面的優(yōu)化與節(jié)點(diǎn)刪除的問題。transform的效率優(yōu)于scrollTop，而window.requestAnimationFrame的性能又優(yōu)于setInterval，但是在開發(fā)時(shí)間上不是特別充足，因此選擇了性能最好的技術(shù)方案，但是舍棄了一部分優(yōu)化的方案。