在React应用中轻松使用obvious的库
npm:
npm install react obvious-react
umd:
<script src="https://unpkg.com/obvious-react@{version}/dist/index.umd.js"></script>
获取Bus并创建Socket
import { BusProvider, SocketProvider } from 'obvious-react';
const bus = window.__Bus__.host;
const socket = bus.createSocekt();
ReactDOM.render((
<BusProvider bus={bus}>
<SocketProvider socket={socket}>
<App />
</SocketProvider>
</BusProvider>
), document.getElementById('app'));
ObviousApp是一个容器组件,它将在组件挂载时激活app,并在组件卸载时销毁app
import React from 'react';
import { ObviousApp } from 'obvious-react';
function App() {
return <ObviousApp ctx="vueApp" activateConfig={{ message: 'hello' }} />
}
属性 | 必须 | 类型 | 默认 | 说明 |
---|---|---|---|---|
ctx | 是 | CustomCtxType | - | app激活上下文 |
bus | 否 | Bus | BusProvider中提供的bus | 用来激活app的bus |
activateConfig | 否 | object | {} | 激活参数 |
destroyConfig | 否 | object | {} | 销毁参数 |
onActivate | 否 | () => void | - | 激活成功后的回调 |
onDestroy | 否 | () => void | - | 销毁成功后的回调 |
除了上述props外,组件还暴露了activateApp和destroyApp方法,用于手动激活和销毁app
在BusProvider和SocketProvider的子组件中,可以分别用useBus和useSocket获取bus和socket实例
import React from 'react';
import { useBus, useSocket } from 'obvious-react';
function App() {
const bus = useBus();
const socket = useSocket();
React.useEffect(() => {
bus.loadApp('vueApp').then(() => {
socket.broadcast('vueAppLoaded');
})
}, [])
return (
<div id="app"></div>
);
}
通过useObviousState,将obvious的state转为React组件内部的state
import React from 'react';
import { useObviousState } from 'obvious-react';
function App() {
const [text, setText] = useObviousState('text');
return <input value={text} onChange={(e) => setText(e.target.value)} />
}
useObviousState的第一个参数是要绑定的obvious状态名,是必选的。同时可以将可选的配置对象作为第二个参数传入,配置项如下
属性 | 说明 |
---|---|
socket | 操作obvious状态的socket,如果不传,则使用SocketProvider提供的socket |
initialValue | 状态初始值。如果指定了该配置项,且状态没有被init时,将调用socket.initState初始化状态 |
通过useBroadcast和useUnicast监听广播和单播事件
import React from 'react';
import { useBroadcast, useUnicast } from 'obvious-react';
function App() {
const [count, setCount] = React.useState(0)
useBroadcast('increase', () => {
setCount((oldValue) => oldValue + 1)
});
useUnicast('getCount', () => {
return count;
});
return <div>{count}</div>
}
useBroadcast和useUnicast接收3个参数,第一个参数是事件名,第二个参数是监听回调,前两个参数是必选的。第三个参数是监听事件的socket的实例,如果不传,则使用SocketProvider中提供的socket
对于Class组件,obvious-react提供了withObviousState高阶组件,可以将obvious的状态映射为组件的props
import React from 'react';
import { withObviousState } from 'obvious-react';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div style={{ backgroundColor: props.themeColor }}>{props.text}</div>
);
}
}
const themeBus = window.__Bus__.theme;
const themeSocket = themeBus.createSocket();
export default withObviousState({
text: 'text', // 键为prop名,值为obvious状态名,操作状态的socket为SocketProvider提供的socket
themeColor: { // 如果值是对象,则可以指定操作状态的socket
state: 'themeColor',
socket: themeSocket
}
})(App);
除了对某个状态指定socket,也可以在第二个参数中传入操作所有状态的socket
withObviousState({text: 'text', themeColor: 'themeColor'}, socket)(App)
obvious-react is MIT licensed