在react项目里 ，如何优化这段代码？

Question

renderFooter2 (quantity) {
        const _self = this;

        console.log('showPageNumber = ', _self.state.showPageNumber)

        let wordStyle = {
            color: 'rgba(71,129,255,1)'
        }

        let numberFrameCommon = {
            width: 38,
            height: 38,
            marginLeft: 10,
            cursor:'pointer'
        }

        let numberFrame = {
            ...numberFrameCommon,
            background: 'rgba(71, 129, 255, 1)',
            color: 'rgba(255, 255, 255, 1)',
        }

        let numberFrame2 = {
            ...numberFrameCommon,
            background: 'rgba(27, 29, 45, 1)',
            color:'rgba(99, 107, 138, 1)'
        }

        let ellipsisStyle = {
            ...numberFrameCommon,
            background: 'rgba(27, 29, 45, 1)',
            color:'rgba(99, 107, 138, 1)'
        }

        let data = [];

        for(let di=1; di<=_self.state.showPageNumber; di++) {
            data[di-1] = di;
        }

        return (

            data.map((item, index, arr) => {

                //console.log('item = ', item);
                //console.log('index = ', index);
                if(index === 0) {
                    return (<div
                        key = {index}
                        style = {
                            _self.state.currentClickPage === index?
                                numberFrame : numberFrame2
                        }
                        className={'numberFrame'}
                        onClick={() => this.showPageData(index)}
                    >
                        {index+1}
                    </div>)
                } else if( index === 1 ) {
                    return (<div
                        key = {index}
                        style = {ellipsisStyle}
                        className={'numberFrame'}
                    >
                        ...
                    </div>)
                } else if( index<_self.state.currentClickPage &&
                    _self.state.currentClickPage-index<4 ) {
                    return (<div
                        key = {index}
                        style = {
                            _self.state.currentClickPage === index?
                                numberFrame : numberFrame2
                        }
                        className={'numberFrame'}
                        onClick={() => this.showPageData(index)}
                    >
                        {index+1}
                    </div>)
                } else if ( index === _self.state.currentClickPage ) {
                    return (<div
                        key = {index}
                        style = {
                            _self.state.currentClickPage === index?
                            numberFrame : numberFrame2
                        }
                        className={'numberFrame'}
                        onClick={() => this.showPageData(index)}
                    >
                        {index+1}
                    </div>)
                } else if (index>_self.state.currentClickPage &&
                    index-_self.state.currentClickPage<5 ) {
                    return (<div
                        key = {index}
                        style = {
                            _self.state.currentClickPage === index?
                                numberFrame : numberFrame2
                        }
                        className={'numberFrame'}
                        onClick={() => this.showPageData(index)}
                    >
                        {index+1}
                    </div>)
                } else if (index-_self.state.currentClickPage === 5) {
                    return (<div
                        key = {index}
                        style = {ellipsisStyle}
                        className={'numberFrame'}
                    >
                        ...
                    </div>)
                } else if (index === _self.state.showPageNumber-1) {
                    return (<div
                        key = {index}
                        style = {
                            numberFrame2
                        }
                        className={'numberFrame'}
                        onClick={() => this.showPageData(index)}
                    >
                        { _self.state.showPageNumber}
                    </div>)
                }
            })
        )

    }

Answer 1

这么诡异的代码很久没有看到了。建议你可以尝试：

1. 使用箭头函数
2. 不重新赋值的变量，用const
3. switch case 代替 if else
4. 使用classnames包
5. 颜色，大小等可以提取成常量
6. data的空数组，下面的循环不出错吗
7. 变量的名称语意化，尽量不要加2，3，4，5的后缀

编程规范的书籍建议你多阅读一下。代码还是要优雅些，别人才愿意看。你要知道你写的代码不是自己看的。