mobx-react 简单翻译

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）