mobx-react 是通过组件将 mobx 和 react 进行组合，导出了 observer 和一些开发工具. 详细文档参考MobX 支持react和 react-native
nstallation
npm install mobx-react --save
Or CDN: https://unpkg.com/mobx-react (namespace: mobxReact)
import {observer} from 'mobx-react';
// - or, for custom renderers without DOM: -
import {observer} from 'mobx-react/custom';
Boilerplate projects that use mobx-react
一些脚手架项目 :
- Minimal MobX, React, ES6, JSX, Hot reloading: MobX-React-Boilerplate
- TodoMVC MobX, React, ES6, JSX, Hot reloading: MobX-React-TodoMVC
- Minimal MobX, React, Typescript, TSX: MobX-React-Typescript-Boilerplate
- Minimal MobX, React, ES6(babel), JSPM with hot reloading modules: jspm-react
- React Native Counter: Mobx-React-Native-Counter
API documentation
observer(componentClass)
observer 是 转换react组件定义的装饰器, 将 react 组件 或 独立渲染的函数 变成响应式组件 , 在 一些可观察的值发生变化的时候 ，这个响应式组件会 追踪 render 和 自动 re-render。
// ---- ES5 syntax ----
const TodoView = observer(React.createClass({
displayName: "TodoView",
render() {
return <div>{this.props.todo.title}</div>
}
}));
// ---- ES6 syntax ----
const TodoView = observer(class TodoView extends React.Component {
render() {
return <div>{this.props.todo.title}</div>
}
})
// ---- ESNext syntax with decorators ----
@observer class TodoView extends React.Component {
render() {
return <div>{this.props.todo.title}</div>
}
}
// ---- or just use a stateless component function: ----
const TodoView = observer(({todo}) => <div>{todo.title}</div>)
Observer 在你的组件中提供了一块匿名区域，被作为一个唯一的子节点。在渲染过程中 会被追踪和自动的重复渲染 可根据需要进行手动调节。
render() {
return (
<div>
手动 {this.props.person.name}
自动 <Observer>
{() => <div>{this.props.person.name}</div>}
</Observer>
</div>
)
}
}
const person = observable({ name: "John" })
React.render(<App person={person} />, document.body)
person.name = "Mike" // will cause the Observer region to re-render
你可以通过 render属性 或 子节点(children) 添加 但两者不能同时存在。
render() {
return (
<div>
{this.props.person.name}
<Observer
render= {() => <div>{this.props.person.name}</div>}
/>
</div>
)
}
}
const person = observable({ name: "John" })
React.render(<App person={person} />, document.body)
person.name = "Mike" // will cause the Observer region to re-render
Observer 可以通过 inject 注入 store
const user = mobx.observable({
name: "Noa"
})
const UserNameDisplayer = ()=>(
<Observer
inject={(stores)=>({user:stores.userStore})}
render={props => (<NameDisplayer name={props.user.name}/>)}
/>
)
const App = () => (
<Provider userStore={user}>
<UserNameDisplayer />
</Provider>
)
如果一个组件抛出error 错误打印在控制台上 没有造成应用crash ，可能会被忽略掉。 所以 mobx-react 提供一个错误的钩子函数 来制作错误收集系统。
import { onError } from "mobx-react";
onError((error) => {
console.log(error);
});
哪些组件应该 被标记成 observer?
渲染observable data 的组件 应该被标记成 observer 。
About shouldComponentUpdate
可以设置自定义的shouldComponentUpdate 但通常应该避免这种情况，因为mobx 会基于PureRenderMixin 提供高度优化的 shouldComponentUpdate的实现
如果 提供了自定义 shouldComponentUpdate 则在props发生改变的时候 或 state改变 时 会 咨询它 但是 如果是一个observable发生改变 组件将会被re render 不会咨询 shouldComponentUpdate
从版本4 开始 mobx 不在对 已经发生深刻变化的 non-observable objects 进行重新渲染。
componentWillReact（生命周期钩子）
当使用 mobx-react 时，您可以定义一个新的生命周期钩子，componentWillReact，当组件计划re-render 时会触发.
Provider 和 Inject
Provider 是一个组件，可以使用react上下文机制将store(其他东西)传递给子组件。如果你不希望显示传递多层组件 使用provider
inject 可以获得store 它是一个更高阶的组件，它接受一个字符串列表并使这些存储可用于被包装的组件。
@inject("color") @observer
class Button extends React.Component {
render() {
return (
<button style={{background: this.props.color}}>
{this.props.children}
</button>
);
}
}
class Message extends React.Component {
render() {
return (
<div>
{this.props.text} <Button>Delete</Button>
</div>
);
}
}
class MessageList extends React.Component {
render() {
const children = this.props.messages.map((message) =>
<Message text={message.text} />
);
return <Provider color="red">
<div>
{children}
</div>
</Provider>;
}
}
componentWillReact 不带参数
componentWillReact 在初始渲染之前不会触发（改用 componentWillMount）
