ใช้ hooks หรือ HOC เลือกของคุณ
การใช้hooksหรือรูปแบบHOC (ส่วนประกอบคำสั่งซื้อที่สูงขึ้น)คุณสามารถมีการอัปเดตอัตโนมัติเมื่อร้านค้าของคุณเปลี่ยน นี่เป็นวิธีที่มีน้ำหนักเบามากโดยไม่มีกรอบ
ใช้วิธีการเก็บเบ็ดเพื่อจัดการการปรับปรุงร้านค้า
interface ISimpleStore {
on: (ev: string, fn: () => void) => void;
off: (ev: string, fn: () => void) => void;
}
export default function useStore<T extends ISimpleStore>(store: T) {
const [storeState, setStoreState] = useState({store});
useEffect(() => {
const onChange = () => {
setStoreState({store});
}
store.on('change', onChange);
return () => {
store.off('change', onChange);
}
}, []);
return storeState.store;
}
withStores HOC อัปเดตการจัดการร้านค้า
export default function (...stores: SimpleStore[]) {
return function (WrappedComponent: React.ComponentType<any>) {
return class WithStore extends PureComponent<{}, {lastUpdated: number}> {
constructor(props: React.ComponentProps<any>) {
super(props);
this.state = {
lastUpdated: Date.now(),
};
this.stores = stores;
}
private stores?: SimpleStore[];
private onChange = () => {
this.setState({lastUpdated: Date.now()});
};
componentDidMount = () => {
this.stores &&
this.stores.forEach((store) => {
// each store has a common change event to subscribe to
store.on('change', this.onChange);
});
};
componentWillUnmount = () => {
this.stores &&
this.stores.forEach((store) => {
store.off('change', this.onChange);
});
};
render() {
return (
<WrappedComponent
lastUpdated={this.state.lastUpdated}
{...this.props}
/>
);
}
};
};
}
คลาส SimpleStore
import AsyncStorage from '@react-native-community/async-storage';
import ee, {Emitter} from 'event-emitter';
interface SimpleStoreArgs {
key?: string;
defaultState?: {[key: string]: any};
}
export default class SimpleStore {
constructor({key, defaultState}: SimpleStoreArgs) {
if (key) {
this.key = key;
// hydrate here if you want w/ localState or AsyncStorage
}
if (defaultState) {
this._state = {...defaultState, loaded: false};
} else {
this._state = {loaded: true};
}
}
protected key: string = '';
protected _state: {[key: string]: any} = {};
protected eventEmitter: Emitter = ee({});
public setState(newState: {[key: string]: any}) {
this._state = {...this._state, ...newState};
this.eventEmitter.emit('change');
if (this.key) {
// store on client w/ localState or AsyncStorage
}
}
public get state() {
return this._state;
}
public on(ev: string, fn:() => void) {
this.eventEmitter.on(ev, fn);
}
public off(ev: string, fn:() => void) {
this.eventEmitter.off(ev, fn);
}
public get loaded(): boolean {
return !!this._state.loaded;
}
}
วิธีใช้
ในกรณีของ hooks:
// use inside function like so
const someState = useStore(myStore);
someState.myProp = 'something';
ในกรณีของ HOC:
// inside your code get/set your store and stuff just updates
const val = myStore.myProp;
myOtherStore.myProp = 'something';
// return your wrapped component like so
export default withStores(myStore)(MyComponent);
ทำให้แน่ใจ
เพื่อส่งค้าของคุณเป็นซิงเกิลตันเพื่อรับประโยชน์จากการเปลี่ยนแปลงระดับโลกเช่น:
class MyStore extends SimpleStore {
public get someProp() {
return this._state.someProp || '';
}
public set someProp(value: string) {
this.setState({...this._state, someProp: value});
}
}
// this is a singleton
const myStore = new MyStore();
export {myStore};
วิธีนี้ค่อนข้างง่ายและใช้งานได้สำหรับฉัน ฉันยังทำงานเป็นทีมขนาดใหญ่และใช้ Redux และ MobX และพบว่ามันดีเหมือนกัน แต่ก็มีจำนวนมาก ฉันแค่ชอบวิธีการของตัวเองเพราะฉันเกลียดรหัสมากสำหรับสิ่งที่สามารถทำได้ง่ายเมื่อคุณต้องการมัน
this.forceUpdate()forceUpdate()ถ้าอย่างนั้นจะเป็นการดีถ้าจะบอกว่าคำถามยังไม่ได้คำตอบหรือคำตอบที่เหมาะสม?