缓存组件

// 使用场景1 Form在父页面上
import cacheComponent from 'components/CacheComponent';

@connect(( loading, event )=>({loading, event}))
@Form.create({ fieldNameProp: null })
@cacheComponent({cacheKey: '/hpfm/event/list'})
export default class EventList extends React.Component {
    state = {};
    componentDitMount(){
        // 使用 state 中的 分页信息 查询数据
        this.handleQueryList(this.state.pagination);
    }
    /**
      * 使用处理完成后的分页信息 和 表单数据 查询数据
      * @param {Object} pagination - 分页信息
      * @param {Number} pagination.page - 当前分页
      * @param {Number} pagination.size - 分页大小
      */
    @Bind()
    queryList(pagination = { page: 0, size: 10 }){
        const formValues = this.props.form.getFieldsValue();
        // 需要把处理好的分页信息存放在state中
        this.setState({pagination});
        this.props.dispatch({
            type: '',
            payload: {
                ...pagination,
                ...formValues,
            },
        });
    }
    render(){
        return (
            // ...
            <div />
        );
    }
}

// 使用场景2: 页面内组件使用 cacheComponent, 以及 3层路由使用
import cacheComponent from 'components/CacheComponent';
// 事件列表
@connect(( loading, event )=>({loading, event}))
export default class EventList extends React.Component {
    @Bind()
    handleGoToDetail(record){
        deleteCache('/hpfm/event/detail');
        // ... 跳转到子页面的代码
    }

    render(){
        return (
            <React.Fragment>
                <FilterForm />
                <Table />
                { /* ... */ }
            </React.Fragment>
        );
    }
}

@Form.create({ fieldNameProp: null })
@cacheComponent({cacheKey: '/hpfm/event/list'})
class FilterForm extends React.Component {
    // ...
}

// 事件详情
@connect(( loading, eventDetail )=>({loading, eventDetail}))
@Form.create({ fieldNameProp: null })
@cacheComponent({cacheKey: '/hpfm/event/detail'})
export default class EventDetail extends React.Component {
    state = {};
    @Bind()
    handleGoToRule(record){
        // ... 跳转到子页面事件规则的代码
    }
}

// 事件规则页面
@connect(( loading, eventRule )=>({loading, eventRule}))
@Form.create({ fieldNameProp: null })
export default class EventDetail extends React.Component {
    state = {};
    render(){
        return (
            // ...
            <div />
        );
    }
}