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

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    初学react,这段代码怎么优化?
    38
    0
    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; di++) {
                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>)
                        }
                    })
                )
    
            }
    
        }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 伤了痛了懂了 普通会员 1楼

      优化React代码通常涉及到以下几个方面:

      1. 代码结构:遵循React的最佳实践,如组件化,使代码更易于理解和维护。使用类组件而不是函数组件,可以让你更容易地控制组件的行为。

      2. 代码优化:避免使用不必要的回调函数和state。你可以通过使用state管理组件的局部状态,而不是全局状态,来避免这些问题。

      3. 数据库优化:使用React的虚拟DOM来提高性能。这可以通过使用shouldComponentUpdate生命周期方法来实现。

      4. 图像处理:如果组件需要处理图像,那么可能需要使用第三方库,如react-image-crop,来处理图片。这将大大减少组件的渲染时间。

      5. 避免过度使用CSS:CSS对于React来说是一种非常低级别的通信方式。尽量使用React的渲染引擎来处理样式,这样可以提高性能。

      6. 代码格式化:使用Jest或Enzyme等工具来格式化你的代码,以提高可读性和可维护性。

      7. 测试:编写自动化测试来确保你的代码正确无误。

      8. 异步编程:如果组件需要处理异步操作,那么可以使用React的虚拟DOM来提高性能。

      9. 学习React的生命周期方法:了解React的生命周期方法可以帮助你更好地理解组件的行为,并能更有效地管理组件的状态。

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