ReactJS：在渲染之前准备数据

Question

我正在创建一个分页组件，它在渲染之前有一段准备逻辑。

import React, {PropTypes, Component} from "react";
import PaginationItemComponent from "scripts/components/paginationItemComponent";

const MAX_ITEMS = 10;

const prepareShiftItems = (activeShift, pagesCount) => {
    let toLeftCaption, toRightCaption, endPage;

    const startPage = activeShift * MAX_ITEMS + 1;
    const end = (activeShift + 1) * MAX_ITEMS;

    if (end >= pagesCount) {
        toRightCaption = null;
        endPage = pagesCount;
    } else {
        endPage = end;
        toRightCaption = "-->";
    }

    if (activeShift === 0) {
        toLeftCaption = null;
    } else {
        toLeftCaption = "<--";
    }

    let activePages = [];
    for (let i = startPage; i <= endPage; i++) {
        activePages.push(i);
    }

    return {
        toLeftCaption,
        toRightCaption,
        activePages
    };
};

const getActiveShiftByPageNumber = (activePageNumber) => {
    const div = (activePageNumber - 1) / MAX_ITEMS;
    return Math.floor(div);
};

class PaginationComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            activePageNumber: props.activePageNumber,
            activeShift: getActiveShiftByPageNumber(props.activePageNumber)
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            activePageNumber: nextProps.activePageNumber,
            activeShift: getActiveShiftByPageNumber(nextProps.activePageNumber)
        });
    }

    setActivePage(activePageNumber) {
        if (this.state.activePageNumber === activePageNumber) {
            return;
        }

        const {onChange} = this.props;

        if (onChange) {
            onChange(activePageNumber);
        }

        this.setState({
            activePageNumber
        });
    }

    moveToRight() {
        this.setState({
            activeShift: this.state.activeShift + 1
        });
    }

    moveToLeft() {
        this.setState({
            activeShift: this.state.activeShift - 1
        });
    }

    render() {
        if (this.props.pagesCount < 2) {
            return null;
        }

        const {activePages, toLeftCaption, toRightCaption} =
            prepareShiftItems(
                this.state.activeShift,
                this.props.pagesCount
            );

        return (
            <ul className="pagination-component">
                {
                    toLeftCaption &&
                    <li onClick={this.moveToLeft.bind(this)} className="to-left">
                        {toLeftCaption}
                    </li>
                }

                {
                    activePages.map((pageNumber) =>
                        <PaginationItemComponent
                            key={pageNumber}
                            pageNumber={pageNumber}
                            onClick={this.setActivePage.bind(this, pageNumber)}
                            isActive={pageNumber === this.state.activePageNumber}/>)
                }

                {
                    toRightCaption &&
                    <li onClick={this.moveToRight.bind(this)} className="to-right">
                        {toRightCaption}
                    </li>
                }
            </ul>
        );
    }
}

const {number, func} = PropTypes;

PaginationComponent.propTypes = {
    pagesCount: number.isRequired,
    activePageNumber: number.isRequired,
    onChange: func
};

export default PaginationComponent;

我的问题是：我是否需要在构造函数中第一次调用prepareShiftItems然后在componentWillReceiveProps中调用，或者我可以保持原样。我想知道这种情况的最佳做法。谢谢你的回答。