账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    在react项目里 ,如何优化这段代码?
    21
    0
    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>)
                    }
                })
            )
    
        }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 孟木嗲嗲 普通会员 1楼

      为了优化React项目中的代码,可以遵循一些最佳实践和技巧。这里是一些建议:

      1. 使用React生命周期方法:在React组件中,使用生命周期方法可以帮助你更好地管理组件的状态和生命周期事件。例如,你可以使用componentWillMountcomponentWillUnmount方法来在组件渲染之前和之后执行一些操作。

      2. 使用React.memoReact.memo是一种React特性,可以用于优化渲染性能。通过使用React.memo,你可以防止组件的渲染被重新渲染,从而提高性能。

      3. 使用shouldComponentUpdateshouldRefactorReact.memo可以被用于优化组件的渲染性能。通过使用shouldComponentUpdate,你可以决定组件是否需要重新渲染,而shouldRefactor可以帮助你发现代码中的重复部分和潜在的优化机会。

      4. 避免使用复杂的递归:在React中,递归通常会导致性能问题。通过避免使用递归,你可以提高代码的性能。

      5. 使用React的虚拟DOM:React的虚拟DOM可以让你的代码更易于理解和维护。通过使用React的虚拟DOM,你可以避免不必要的DOM操作,从而提高性能。

      6. 使用useMemouseCallbackuseMemouseCallback可以用于优化React组件的性能。通过使用useMemouseCallback,你可以避免不必要的计算和存储,从而提高性能。

      7. 避免使用React.memo:虽然React.memo可以用于优化组件的渲染性能,但如果你的组件需要频繁地渲染,那么使用React.memo可能会增加组件的复杂性,从而影响性能。

      8. 使用shouldComponentUpdateshouldComponentUpdate可以帮助你决定组件是否需要重新渲染。通过使用shouldComponentUpdate,你可以避免不必要的组件重新渲染,从而提高性能。

      9. 避免使用setStatesetState是React的核心操作之一,但它的性能可能会随着时间的推移而下降。通过使用useState,你可以避免频繁地触发状态更改,从而提高性能。

      10. 使用React的异步编程:通过使用React的异步编程,你可以避免在主线程中进行复杂的操作,从而提高性能。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部