How to optimize the code of react, for beginners?

renderFooter (quantity) {

        const _self = this;

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

        let numberFrameCommon = {
            width: 40,
            height: 40,
            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 = {
            width:40,
            height:40,
            background: "rgba(27,29,45,1)",
            marginLeft:10,
            fontSize:"14px",
            borderRadius: "2px",
            fontFamily: "MicrosoftYaHei",
            color:"rgba(99,107,138,1)"
        }


        let data = [];

        for(let di=1; di<=_self.state.pageQuantity; diPP) {
            data.push(di)
        }

        //console.log( "pageQuantity = ", _self.state.pageQuantity )

        if ( _self.state.pageQuantity <= 10 ) {
            return (
                data.map((item, index, arr) => {

                    //console.log("item = ", item);
                    //console.log("index = ", index);

                    return (<div
                        key = {index}
                        style = {
                            _self.state.footFlag === index ?
                                numberFrame: numberFrame2
                        }
                        className={"numberFrame flexCenter"}
                        onClick={() => this.showPageData(index)}
                    >
                        {index+1}
                    </div>)

                })
            )
        }  else if ( _self.state.pageQuantity >10 ) {

            return (

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

                    //console.log("item = ", item);
                    //console.log("index = ", index);
                    if(index<9) {
                        return (<div
                            key = {index}
                            style = {
                                _self.state.footFlag === index ?
                                    numberFrame: numberFrame2
                            }
                            className={"numberFrame flexCenter"}
                            onClick={() => this.showPageData(index)}
                        >
                            {index+1}
                        </div>)
                    } else if ( index === 9) {
                        return (<div
                            key = {index}
                            style = {ellipsisStyle}
                            className={"numberFrame"}
                        >
                            ...
                        </div>)
                    } else if (item === _self.state.pageQuantity) {
                        return (<div
                            key = {index}
                            style = {numberFrame}
                            className={"numberFrame"}
                            onClick={() => this.showPageData(index)}
                        >
                            {item}
                        </div>)
                    }
                })
            )

        }

    }
Apr.11,2021

the logic should not need to be optimized, and the writing method can be optimized

.
  • for example, the first half of the code is stripped out and separated as a method call
  • each if else branch writes a separate method call

  • detach style
  • you don't need to use both for, and map, to map directly.
Menu