Limitations Pitfalls
Defects
For the action of a normal synchronization process, the merge problem with the same state being changed multiple times is ignored and we will fix it.
Since IE11 does not support ES6 Proxy/Reflect, we will consider adding Proxy/Reflect polyfill to support IE11.
Currently known unsupported types are: Set
/ WeakSet
/ Map
/ WeakMap
, and soon we will support it.
Pitfalls
- Use references and copies as directly as possible
const store = this.props.store
const {foo, bar} = store
iFlow is not recommended to the above example, the state reference relationship, we will monitor the store
all changes to update, if we need to listen to update foo
and bar
directly, then we recommend to use their reference or copy directly.
const {foo, bar} = this.props.store
//or
const foo = this.props.store.foo
const bar = this.props.store.bar
This will only listen the foo
and bar
change updates.
- Single-layer immutable store is effective when using immutable
@immutable
is a single-layer traversal props, so the mixed structure of the iFlow store and plain objects is invalid.
For example:
class Parent extends Component {
// this.props.sub is iflow store
render() {
return <Sub store={this.props.sub} />
}
}
@immutable
class Sub extends Component {
// omit
}
This is effective. But the following example is not valid:
class Parent extends Component {
// this.props.sub is iflow store
render() {
const store = {foo:'bar', sub: this.props.sub}
return <Sub store={store} />
}
}
@immutable
class Sub extends Component {
// omit
}
Of course, if you're not using @immutable
You can arbitrarily pass the iFlow store.
- About the Usage of PureComponent
Because the iFlow connector uses the mutable store by default, So the connector directly with the React.PureComponent connection will not be updated, iFlow connector corresponding component should be react.Component, do not worry, iFlow will automatically diff comparison, it is more efficient and automatic than the light comparison of React.PureComponent.
If you really need to use react.PureComponent, then it is recommended that you could use cooperatively with @immutable
. This is a great help in Sub-Component performance optimization.
For example:
@flow(store)
@immutable
class Body extends PureComponent {
render () {
return (
<div>
<button onClick={() => this.props.store.calculate(-1)}>-</button>
{this.props.store.counter}
<button onClick={() => this.props.store.calculate(1)}>+</button>
</div>
)
}
}