)
}
}
```
* api
Bind component and execute setState automatically
```js
import { immutableUpdate as update } from 'dt2react';
class App extends Component {
constructor() {
super()
this.update = update.bind(this)
this.state = {
name: 'John',
relation: {
family: 0,
friend: 1
},
honor: ['1', '2', '3']
}
}
someUsage() {
this.update('set', 'name', 'Wall')
this.update('set', 'relation.family', 1)
this.update('set', ['relation', 'family'], 0)
this.update('set', {
name: 'Jamas',
'relation.friend': 0
})
this.update('push', 'honor', '4') // ['1', '2', '3', '4']
this.update('splice', 'honor', 0) // ['2', '3', '4']
// All above actions just render once and all state has changed.
}
}
```
* Silent usage
which would not execute setState automatically
```js
import { immutableUpdate as update } from 'dt2react';
const myData = { x: { y: 0 } }
const newData = update(myData, 'set', 'x.y', 1)
console.log(newData) // {x: {y: 1}}
```
#### enhancePortal
#### Portal
#### reactEvents
wrapper of `eventlistener`
```js
import addEventListener from 'dt2react/lib/events/eventlistener';
var handler = addEventListener(document.body, 'click', function(e){
console.log(e.target); // works for ie
console.log(e.nativeEvent); // native dom event
});
handler.remove(); // detach event listener
```
> use. (target: ReactNode, eventType: string, listener: Function): { remove: Function }
```js
import addEventlistener from 'dt2react/lib/react/reactEvents';
```
#### getDefaultContainer
> create default container
```js
const rootDiv = getDefaultContainer();
```
#### PureRenderMixin
```js
import PureRenderMixin from 'dt2react/lib/react/PureRenderMixin';
shouldComponentUpdate(nextProps, nextState) {
return PureRenderMixin.shouldComponentUpdate.call(this, nextProps, nextState);
}
// or
shouldComponentUpdate(...args) {
return PureRenderMixin.shouldComponentUpdate.apply(this, args);
}
```
#### PureRenderDeepMixin
> deep compare
```js
import PureRenderDeepMixin from 'dt2react/lib/react/PureRenderDeepMixin';
shouldComponentUpdate(nextProps, nextState) {
return PureRenderDeepMixin.shouldComponentUpdate.call(this, nextProps, nextState);
}
// or
shouldComponentUpdate(...args) {
return PureRenderDeepMixin.shouldComponentUpdate.apply(this, args);
}
```
#### ResizeDetector
```js
import withResize, { ResizeDetector } from 'dt2react/lib/react/withResize';
```
#### RemoteViewer
```js
import RemoteViewer, { getRemoteComponent, getRemoteModule } from 'dt2react/lib/react/RemoteViewer';
export const WebStudioExecutor = getRemoteComponent({
scriptConfig: {
key: 'amosasp',
url: getMfUrl('amosasp_dist/remoteEntry.js')
},
scope: 'amosasp',
module: './amos-webstudio',
onDone: (d) => d.WebStudioExecutor
});
```
直接使用远程模块
```js
import { getRemoteModule } from 'dt2react/lib/react/RemoteViewer';
function getMfUrl(entry) {
// 注意 __mf_prefix_url__ ，结尾不能写后缀 `/`
// 如下方式，支持设置 `__mf_prefix_url__=''`
if (window.__mf_prefix_url__ !== undefined || window.__mf_prefix_url__ !== null){
return `${window.__mf_prefix_url__}/${entry}`;
}
return `/mf_lib/${entry}`;
}
export const mfRV = getRemoteModule({
scriptConfig: {
key: 'amosmf',
url: getMfUrl('amosmf_dist/remoteEntry.js')
},
scope: 'amosmf',
module: './handsontable',
onDone: (d) => ({
HotTable: d.HotTable,
HotColumn: d.HotColumn
}),
debugConfig
});
// demo
class HTableDemo extends Component {
constructor(props) {
super(props);
this.state = {
laoding: true,
HotTable: null,
HotColumn: null
};
this._asyncInit();
}
_asyncInit = () => {
mfRV.loadMf(({ HotTable, HotColumn }) => {
this.setState({
laoding: false,
HotTable,
HotColumn
});
});
}
render() {
const { laoding, HotTable, HotColumn } = this.state;
if (laoding){
return null;
}
return (