- 安裝 MobX
- 單個(gè)頁(yè)面內(nèi)部使用mobx
- 全局使用mobx（Provider） (沒(méi)有找到解決數(shù)據(jù)持久化的辦法，即類似redux-persist)
- 網(wǎng)絡(luò)請(qǐng)求Promise返回?cái)?shù)據(jù)修改
更加詳細(xì)請(qǐng)查看官方文檔
https://mobx.js.org/README.html
https://github.com/mobxjs/mobx-react
https://mobx-react.js.org/observer-hoc
https://github.com/mobxjs/mobx-react-lite
安裝 MobX
npm install --save-dev @babel/plugin-proposal-decorators
npm install mobx-react --save
npm install mobx --save
當(dāng)前版本
"mobx": "^6.1.8",
"mobx-react": "^7.1.0",
設(shè)置 babel.config.js
plugins: [
'react-native-reanimated/plugin',
["@babel/plugin-proposal-decorators", { "legacy": true }], <-----add
],
單個(gè)頁(yè)面內(nèi)部使用mobx
第一種方式 observer
??推薦此種方式
方法組件使用observer包裹
observer<P>(baseComponent: FunctionComponent<P>): FunctionComponent<P>
import {observer, useLocalObservable, Observer, useObserver} from 'mobx-react'
export default Home = observer(({ route, navigation })=>{
const homeStore = useLocalObservable(() => ({
address: '北京',
isFriend: false,
toDoList: [],
bannerList: [],
changeFiend(isF) {
this.isFriend = isF
},
get friendMsg(){
return this.isFriend ? '好朋友' : '陌生人'
}
}))
const onGoodFriend = React.useCallback(()=>{
homeStore.changeFiend(true)
})
const onStranger = React.useCallback(()=>{
homeStore.changeFiend(false)
})
return (
<View style={styles.mainView}>
<View style={{marginBottom:100}}>
<Text>mobx數(shù)據(jù)測(cè)試：</Text>
<Text>{homeStore.address}</Text>
<Text>你們是：{homeStore.friendMsg}</Text>
<View style={{flexDirection:'row',justifyContent:'center'}}>
<TouchableOpacity style={styles.btn} onPress={onGoodFriend}>
<Text>好朋友</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btn} onPress={onStranger}>
<Text>陌生人</Text>
</TouchableOpacity>
</View>
</View>
<Text>Home</Text>
</View>
);
})
第二種方式 <Observer>
使用Observer包裹的會(huì)自動(dòng)改變唆樊，而外部的不會(huì)
<Observer>{renderFn}</Observer>
import {observer, useLocalObservable, Observer, useObserver} from 'mobx-react'
export default Chat=({ route, navigation })=>{
const chatStore = useLocalObservable(() => ({
chatName: '張三',
changeChatName(name) {
this.chatName = name
},
}))
const onChangeChatName = React.useCallback(()=>{
chatStore.changeChatName('李四')
})
return (
<View style={styles.mainView}>
<Text>外部數(shù)據(jù){chatStore.chatName}</Text>
<Observer>
{
()=>{
return <View>
<Text>內(nèi)部數(shù)據(jù)：{chatStore.chatName}</Text>
<TouchableOpacity style={{marginTop:15}} onPress={onChangeChatName}>
<Text>點(diǎn)擊修改</Text>
</TouchableOpacity>
</View>
}
}
</Observer>
<Text>Chat</Text>
</View>
);
};
第三種方式 useObserver
return 的組件使用 useObserver包裹
????????[mobx-react-lite] 'useObserver(fn)' is deprecated. Use<Observer>{fn}</Observer>instead, or wrap the entire component inobserver.
import {observer, useLocalObservable, Observer, useObserver} from 'mobx-react'
export default Contact=({ route, navigation })=>{
const contactStore = useLocalObservable(() => ({
chatName: '張三',
changeChatName(name) {
this.chatName = name
},
}))
const onChangeChatName = React.useCallback(()=>{
contactStore.changeChatName('李四')
})
return useObserver(()=>{
return <View style={styles.mainView}>
<Text>{contactStore.chatName}</Text>
<TouchableOpacity style={{marginTop:15}} onPress={onChangeChatName}>
<Text>點(diǎn)擊修改</Text>
</TouchableOpacity>
<Text>Contact</Text>
</View>
})
};
全局使用mobx (沒(méi)有找到解決數(shù)據(jù)持久化的辦法芭梯，即類似redux-persist)
提前了解：http://react.caibaojian.com.cn/docs/context.html
??：可以打開(kāi)app就調(diào)用用戶信息接口杏慰，然后更新userInfo
程序入口APP.js
import { observable } from 'mobx';
const userInfo = observable({
name: "胡桃",
jobTitle:'往生堂堂主',
changeName(name){
this.name = name
},
changeJobTitle(title){
this.jobTitle = title
},
})
const globalInfo = observable({
udid: "1234567890",
changeUDID(udid){
this.udid = udid
},
})
export default App=()=>{
console.log('App');
return (
<Provider userInfo={userInfo} globalInfo={globalInfo}>
<NavigationContainer>
<DrawerNavigator/>
</NavigationContainer>
</Provider>
);
};
其他頁(yè)面使用前的準(zhǔn)備
需要先獲取Provider傳遞的數(shù)據(jù)
import { MobXProviderContext} from 'mobx-react'
// 這里return的就是 {userInfo, globalInfo}
export const useStores=()=> {
return React.useContext(MobXProviderContext)
}
然后其他頁(yè)面就可以通過(guò) 調(diào)用useStores來(lái)獲取相應(yīng)的數(shù)據(jù)
?? 使用observer包裹才會(huì)實(shí)時(shí)刷新留储，設(shè)置同樣的數(shù)據(jù)不會(huì)刷新
import {observer } from 'mobx-react'
import {action} from 'mobx'
export default Mine=observer(({ route, navigation })=>{
console.log('Mine');
const {userInfo,globalInfo} = useStores()
const onChangeUserInfo=React.useCallback(()=>{
userInfo.changeName('琴')
userInfo.changeJobTitle('西風(fēng)騎士團(tuán)代理團(tuán)長(zhǎng)')
})
const onChangeUserName=React.useCallback(action(()=>{
userInfo.sex = '女' // 增加新的字段
}))
const onChangeUDID=React.useCallback(()=>{
globalInfo.changeUDID('qwer')
})
return (
<View style={styles.mainView}>
<View style={{marginBottom:200}}>
<Text>用戶信息</Text>
<Text>姓名：{userInfo.name}{userInfo.sex}</Text>
<Text>職位：{userInfo.jobTitle}</Text>
<Text>UDID:{globalInfo.udid}</Text>
<TouchableOpacity style={styles.btn} onPress={onChangeUserInfo}>
<Text>修改用戶</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btn} onPress={onChangeUserName}>
<Text>修改用戶-增加新的屬性</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btn} onPress={onChangeUDID}>
<Text>修改UIDI</Text>
</TouchableOpacity>
</View>
<Text>Mine</Text>
</View>
);
})
網(wǎng)絡(luò)請(qǐng)求Promise返回?cái)?shù)據(jù)修改
const HttpFetch = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(() => {
resolve('從網(wǎng)絡(luò)返回的數(shù)據(jù)')
}, 3000);
})
}
const homeStore = useLocalObservable(() => ({
httpResult:'',
getFetchResult(){
HttpFetch().then(action((result)=>{
this.httpResult = result
}))
}
}))
