javascript - 在更新期间管理 React 组件行为

Question

我是 ReactJs 的新手，正在使用 ExtReact 框架。我正在显示一个网格，并进行了分页，效果很好。

我自定义了加载数据时显示的微调器，当“组件已安装”时它工作正常。

但是，当我更新组件时(比如当我使用 ExtReact 分页器插件切换页面时)，会显示另一个 native 微调器，我也想自定义它。

我的问题是我没有找到使用 lifeCycle 组件方法执行此操作的正确方法，因为 componentWillUpdate 方法已被弃用。

我最初只有一个“isLoading”状态，但我添加了“isUpdating”，因为“isLoading”在第一次渲染后由于存储数据的加载方式而被修改。

isUpdating 状态似乎保持为 false，这是控制台显示的内容:

快照正在更新:false更新!正在更新:false Solr ·古德曼!

这是我的组件代码:

    import React, {Component} from 'react';
import {Grid, Column, Toolbar, SearchField} from '@sencha/ext-modern';
import {withRouter} from "react-router-dom";
import Spinner from '../../resources/components/Spinner';

Ext.require('Ext.grid.plugin.PagingToolbar');

class Subscriptions extends Component {

    state = {
        isLoading: true,
    };

    store = Ext.create('Ext.data.Store', {
        fields: ['Field1', 'Field2', 'Field3'],
        autoLoad: false,
        pageSize: 30,
        proxy: {
            type: 'rest', // refers to the alias "proxy.ajax" on Ext.data.proxy.Ajax
            url: 'niceadress',
            reader: {
                type: 'json'
            }
        }
    });

    /**
     * Loading the datas into the store and then removes the spinner when fetched successfully
     */
    componentDidMount() {
        this.store.load({
            callback: function (records, operation, success) {
                this.setState({
                    isLoading: (!success),
                });
                console.log("Saul Goodman!");
            },
            scope: this
        });
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        if (nextState.isLoading === true){
            return false;
        } else {
            return true;
        }
    };

    getSnapshotBeforeUpdate(prevProps, prevState) {
        this.setState({
            isLoading: true,
        });
        console.log('Snapshot');
        console.log('Is loading:' + this.state.isLoading)
        return prevState;
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        this.setState({
            isLoading: (!prevState.isUpdating),
        });
        console.log('Updated!');
        console.log('Is loading:' + prevState.isLoading)
    }

    render() {

        if (this.state.isLoading) return <Spinner/>;

        return (
            <Grid
                store={this.store}
                plugins={['pagingtoolbar', 'listpaging']}
            >
                The Grid
            </Grid>
        )
    }
    }



    export default withRouter(Subscriptions);

知道我做错了什么吗？

编辑:好吧，我首先认为商店加载不会触发 componentDidUpdate 方法，这就是我单独编写 isUploading 状态的原因。我正在删除它，但我仍然没有解决我的问题。

在 componentDidUpdate 中调用 setState 后，如何防止 virtualDOM 重新渲染？

我正在寻找一种优雅的方式来打破这个循环。

Answer 1

The isUpdating state seems to stay false, this is what is displayed by the console

这是因为当 isUpdating 为真时，您的 shouldComponentUpdate 返回假。

你的 componentDidUpdate 的 setState 也有错别字