0.1.4 • Published 1 year ago
@clean-js/react-presenter v0.1.4
为了进一步实现整洁架构,使用 mvp 的方式组织你的前端代码,让项目更加清晰
ViewState,一般是要在界面上显示需要的数据,或者临时数据
View,一般是 react,vue 之类的视图层,它显示数据,并将事件绑定到 Presenter
Presenter, 提供方法和 ViewState 给到 View
- service 实现业务逻辑, 为Presenter提供服务
快速上手
install
npm install @clean-js/presenter @clean-js/react-presenter --save
or
yarn add @clean-js/presenter @clean-js/react-presenter
Presenter
import { Presenter, injectable } from '@clean-js/presenter';
interface IViewState {
loading: boolean;
name: string;
}
@injectable()
export class NamePresenter extends Presenter<IViewState> {
constructor() {
super();
this.state = {
loading: false,
name: 'lujs',
};
}
changeName() {
this.setState((s) => {
s.name += '!';
});
}
}
View
import React from 'react';
import { usePresenter } from '@clean-js/react-presenter';
import { NamePresenter } from './presenter';
const Name = () => {
const { presenter, state } = usePresenter(NamePresenter);
return (
<div>
<p>name: {state.name}</p>
<button
onClick={() => {
presenter.changeName();
}}
>
hi
</button>
</div>
);
};
export default Name;
tsconfig.json
设置 tsconfig.json
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}
0.1.4
1 year ago
0.1.3
1 year ago
0.1.0
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.0.18
2 years ago
0.0.19
2 years ago
0.0.15
2 years ago
0.0.16
2 years ago
0.0.17
2 years ago
0.0.10
2 years ago
0.0.11
2 years ago
0.0.12
2 years ago
0.0.13
2 years ago
0.0.14
2 years ago
0.0.8
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.1
2 years ago