You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
# effect的妙用
|
|
|
|
|
|
|
|
FineUI组件中text,value,cls,css,selected,items,columnSize,rowSize,invisible,disabled等属性都已经支持了响应式
|
|
|
|
|
|
|
|
但是,总有一些属性没有支持响应式,或者一些组件提供的props并未支持响应式,这时候只能回归`_store`+`watch`了吗?
|
|
|
|
|
|
|
|
非也,有effect属性,看一个示例: 有一个自定义组件,想在状态变化的时候调用组件的某个方法
|
|
|
|
|
|
|
|
如下示例,effect函数自动收集`state.state1`依赖,在`state1`发生改变时,自动执行.需要注意的是effect函数会在组件初始化的时候自动执行一次.
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
const state = Fix.define({
|
|
|
|
state1: 0
|
|
|
|
});
|
|
|
|
const render = () => {
|
|
|
|
return {
|
|
|
|
type: "bi.my_custom_wdiget",
|
|
|
|
effect: (customWidget) => {
|
|
|
|
customWidget.customMethod(state.state1);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
|
|
|
effect支持数组形式,形式是长度为2的元组,第一个函数收集依赖,第二个函数为依赖变化后需要执行的操作.
|
|
|
|
这与watch很像,可以理解为第一个函数是需要watch的内容,第二个函数时变化的回调
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
};
|
|
|
|
```
|