FineUI-100-Questions/questions/27.effect的妙用.md

effect的妙用

FineUI组件中text,value,cls,css,selected,items,columnSize,rowSize,invisible,disabled等属性都已经支持了响应式

但是,总有一些属性没有支持响应式,或者一些组件提供的props并未支持响应式,这时候只能回归_store+watch了吗?

非也,有effect属性,看一个示例: 有一个自定义组件,想在状态变化的时候调用组件的某个方法

如下示例,effect函数自动收集state.state1依赖,在state1发生改变时,自动执行.需要注意的是effect函数会在组件初始化的时候自动执行一次.

const state = Fix.define({
    state1: 0
});
const render = () => {
    return {
        type: "bi.my_custom_wdiget",
        effect: (customWidget) => {
            customWidget.customMethod(state.state1);
        }
    };
};

effect支持数组形式,形式是长度为2的元组,第一个函数收集依赖,第二个函数为依赖变化后需要执行的操作. 这与watch很像,可以理解为第一个函数是需要watch的内容,第二个函数时变化的回调

const state = Fix.define({
    state1: 0,
    state2: 0,
});
const render = () => {
    return {
        type: "bi.my_custom_wdiget",
        effect: [
            () => {
                return [state.state1, state.state2];
            },
            (customWidget) => {
                customWidget.customMethod(state.state1, state.state2);
            }
        ]
    };
};