• 缓存组件


    01. 说明

    用来被注解缓存组件props.form的表单值,和组件的state

    需要缓存的场景:

    1. 父路由跳转子路由(同一tab)

    02. 使用

    // 使用场景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 />
            );
        }
    }
    
    

    03. 注意

    1. 每个tab的 cacheKey 都是基于src/common/router重的path, 且父级路由唯一且互不包含
    2. cacheKey: 是使用router中的path
    3. cacheComponent注解必须放在需要缓存组件的最近的位置
    4. 如果有多级父子路由嵌套
      1. A => B; B => C;
      2. A 的 子路由是 B; B 的 子路由是 C
      3. 在 A 页面跳转到 B 页面时 需要调用deleteCache清空 B页面内组件的缓存