mana-observable
Simple class property decorator that makes the class properties observable and can be easily used with React.
功能
- 对基于类的数据管理系统提供变更追踪机制。可独立使用,
- 配合依赖注入容器使用,为 React 组件提供管理数据。
安装
npm i mana-observable --save
用法
数据 API
数据 api 可以独立使用,不需要在依赖注入的环境中
@prop
将类中的基础类型属性转化为可追踪属性。对于基础类型 (当前支持数值、字符、布尔) 以及一般的引用类型,当值或引用发生变化时,触发数据的变更。对于部分内置类型 (数组、map、plainObject) 除引用变更外,其管理的内部值或引用发生变化时,也会触发数据变更。
class Ninja {
@prop name: string = '';
}
watch
监听一个带有可追踪属性对象的属性变更
// 监听某个可追踪属性的变化
watch(ninja, 'name', (obj, prop) => {
// ninja name changed
});
// 监听对象所有可追踪属性的变化
watch(ninja, (obj, prop) => {
// any observable property on ninja changed
});
observable
经过 babel 处理的类可能会在实例上定义属性,而属性装饰器作用在原型上,因而无法进行属性转换。所以这里引入新的 API 解决相关的问题,后续希望提供免除该 API 调用的使用方式。
class Ninja {
@prop name: string = '';
}
React API
当前仅提供基于 React hooks 的 API。
useInject
在 react 组件中,如果希望使用依赖注入容器中带有可追踪属性的对象,那么可以使用 useInject 来获取他们。
@singleton()
class Ninja {
@prop name: string = '';
}
container.register(Ninja);
export function NinjaRender() {
const ninja = useInject(Ninja);
return <div>{ninja.name}</div>;
}
useObserve
为了精确控制每个 React 组件只因为自己访问的可追踪属性变更而进行 update,也为了在子组件内提供 hook 的创建时机,通过除 useInject 外方式获取到的对象,应当通过 useObserve 进行处理,重置其作用组件更新的范围。
export function NinjaName(props: { ninja: Ninja }) {
const ninja = useObserve(props.ninja);
return <div>{ninja.name}</div>;
}
getOrigin
在 React 组件中,我们访问的组件并不是原始实例,而是实例的代理,如果在 API 调用等环节需要获取原始对象(例如作为参数传递给其他 API),需要通过调用 getOrigin 方法获得。