利用mobx的store中的变量变化引起页面都重新渲染的问题

mobx中用observable的变量在组件中取值，如果其中一个变量变化，则该组件的render中所有元素都会重新渲染，如果只想render数据变化的那个组件，则需要把该部分功能单独写成一个子组件，在子组件中inject该变量所在的store，只把变化的值放在改子组件中变化，父组件不包含与该变量有关的内容，就不会重新渲染父组件，只会渲染子组件。

父组件：

import Stdout from './Stdout';
import { inject, observer } from 'mobx-react';

@inject('xx')
@observer
class Comp extends React.Component {
    displayName = 'Comp';

    fun = async() => {
        await this.props.xx.func();
    }

    render(){
        return <div>
                <Button onClick={this.fun} />
                <Stdout />
            </div>
    }
}

export default Comp;

子组件，stdout为请求回来的变量

import React from 'react';

import { inject, observer } from 'mobx-react';

@inject('xx') //store的文件
@observer
class Comp extends React.Component {
    displayName = 'Comp';

    render() {
        const {xx} = this.props;
        const {stdout} = xx;
        return <div>stdout</div>;
    }
}

export default Comp;

store文件xx.js：

import {observable, action} from 'mobx';
import fetch from 'r-cmui/components/utils/fetch';

export default class Config {

 @observable stdout = null;

 async func () {
    const ret = await fetch(url);
    if (ret && ret.success) {
        this.setSTDOUT(ret.data);
    }
    return ret;
}

 @action
    setSTDOUT (ret) {
        this.stdout = ret;
    }
}

欢迎关注我的公众号，两只摩羯程序员的日常更新~~