- 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 条
- 全部回答
-
孟木嗲嗲 普通会员 1楼
为了优化React项目中的代码,可以遵循一些最佳实践和技巧。这里是一些建议:
-
使用React生命周期方法:在React组件中,使用生命周期方法可以帮助你更好地管理组件的状态和生命周期事件。例如,你可以使用
componentWillMount和componentWillUnmount方法来在组件渲染之前和之后执行一些操作。 -
使用
React.memo:React.memo是一种React特性,可以用于优化渲染性能。通过使用React.memo,你可以防止组件的渲染被重新渲染,从而提高性能。 -
使用
shouldComponentUpdate和shouldRefactor:React.memo可以被用于优化组件的渲染性能。通过使用shouldComponentUpdate,你可以决定组件是否需要重新渲染,而shouldRefactor可以帮助你发现代码中的重复部分和潜在的优化机会。 -
避免使用复杂的递归:在React中,递归通常会导致性能问题。通过避免使用递归,你可以提高代码的性能。
-
使用React的虚拟DOM:React的虚拟DOM可以让你的代码更易于理解和维护。通过使用React的虚拟DOM,你可以避免不必要的DOM操作,从而提高性能。
-
使用
useMemo和useCallback:useMemo和useCallback可以用于优化React组件的性能。通过使用useMemo和useCallback,你可以避免不必要的计算和存储,从而提高性能。 -
避免使用
React.memo:虽然React.memo可以用于优化组件的渲染性能,但如果你的组件需要频繁地渲染,那么使用React.memo可能会增加组件的复杂性,从而影响性能。 -
使用
shouldComponentUpdate:shouldComponentUpdate可以帮助你决定组件是否需要重新渲染。通过使用shouldComponentUpdate,你可以避免不必要的组件重新渲染,从而提高性能。 -
避免使用
setState:setState是React的核心操作之一,但它的性能可能会随着时间的推移而下降。通过使用useState,你可以避免频繁地触发状态更改,从而提高性能。 -
使用React的异步编程:通过使用React的异步编程,你可以避免在主线程中进行复杂的操作,从而提高性能。
-
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

