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

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react里render里面调用方法怎么会疯狂执行?
    26
    0

    代码运行后疯狂执行,不知道为什么?或者说有没有更好的写法?
    代码如下:

    //从父组件接收
    componentWillReceiveProps(nextProps) {
    
            this.setState({
                code: nextProps.capacityBlockIndex
            })
    }
    
    request = (str) => {
            console.log("done" + str);  //控制台疯狂的输出
            ajax({
                url: '//api',
                jsonp: 'callback',
                data: {
                    'capabilityCode': str
                },
                success: (res) => {
    
                    this.setState({
                        taskArr: res.values
                    });
                    return;
                },
                error: () => { }
            });
    
        }
        
        
        render(){
            if(this.state.code === 0){
                this.request('infor_display_ability');
            }
        }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 执手共存亡 普通会员 1楼

      在React中,当你在render方法中调用一个方法时,可能会引发一些性能问题,特别是如果你的代码非常长或者有很多复杂的逻辑。

      以下是一些可能导致性能问题的原因:

      1. 在render方法中,你可能在执行复杂的计算或者动画效果。这可能会导致浏览器的CPU和GPU资源被过度使用。

      2. 你可能在渲染过程中,频繁地调用了某个API或者组件。这可能会导致API的调用频率过高,从而影响性能。

      3. 你可能在渲染过程中,使用了React的生命周期方法。这些方法在每次组件的更新中都会被调用,这可能会消耗大量的CPU和GPU资源。

      为了解决这些问题,你可以采取以下几种策略:

      1. 对于复杂的计算和动画效果,你可以考虑使用React的第三方库,如React-Spring或者React-Router,它们提供了更高级的渲染和动画功能,可以帮助你避免这些问题。

      2. 你可以尽量避免在render方法中频繁地调用了某个API或者组件。你可以将这些功能封装到一个单独的函数中,然后在需要的时候调用这个函数。

      3. 你可以尽量避免在render方法中使用React的生命周期方法。你可以将这些方法封装到一个单独的函数中,然后在需要的时候调用这个函数。

      4. 你可以考虑使用React的虚拟DOM技术,如React.memo或者React让孩子,这样可以避免React在渲染过程中进行大量的DOM操作,从而提高性能。

      5. 你可以考虑使用React的懒加载特性,这样可以减少不必要的组件加载,从而提高性能。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部