Question

我正在尝试让MobX与功能组件一起工作。我想这样做而不必使用装饰器。我已经使用create-react-app设置了一个应用程序，添加了MobX和MobX-react作为依赖项。但是，我似乎无法在功能组件中使用observable。

import React from 'react';
import { extendObservable } from 'mobx';
import { observer } from 'mobx-react';

const Test = () => {
    extendObservable(this, {
        button: false
    });

    const handleB1 = () => {
        this.button = false;
    }

    const handleB2 = () => {
        this.button = true;
    }

    const getButton2 = () => {
        console.log('button2');
        return (
            <button type="button" onClick={handleB2}>Button 2</button>
        );
    };

    const getButton1 = () => {
        console.log('button1');
        return (
            <button type="button" onClick={handleB1}>Button 1</button>
        );
    };

    return (
        <div>
            {this.button ? getButton1() : getButton2()}
        </div>
    )
};

export default observer(Test);

单击按钮我希望组件由于可观察的更改而被重新呈现，但是我收到错误：

×
Error: [mobx] Invariant failed: Side effects like changing state are not 
allowed at this point. Are you trying to modify state from, for example, the render 
function of a React component? Tried to modify: ObservableObject@2.button

我已经尝试将observable声明为功能组件的一部分，或者在此之前：

const buttonState = () => {
    extendObservable(this, {
        button: false
    });
}

但是在这两种情况下我都无法让组件重新渲染，或者我不确定observable是否实际上是正确设置的。

如果我把整个事情写成这样一个类，那就完美了

import React from 'react';
import { extendObservable } from 'mobx';
import { observer } from 'mobx-react';

class Test extends React.Component {
    constructor(props) {
        super();
        extendObservable(this, {
            button: false
        });
    }

    handleB1 = () => {
        this.button = false;
    }

    handleB2 = () => {
        this.button = true;
    }

    getButton2 = () => {
        console.log('button2');
        return (
            <button type="button" onClick={this.handleB2}>Button 2</button>
        );
    };

    getButton1 = () => {
        console.log('button1');
        return (
            <button type="button" onClick={this.handleB1}>Button 1</button>
        );
    };

    render = () => {
        return  (
        <div>
            {this.button ? this.getButton1() : this.getButton2()}
        </div>
        )
    }
};

export default observer(Test);

Answer 1

在React中，功能组件不是持久的。它们从上到下运行，返回一些JSX，冲洗并重复。

let i = 0;

const FunctionalComp = (props) => {
  const foo = props.foo.toUpperCase();
  return <span>Rendered {i++} times. {foo}</span>;
}

所有这些功能组件都会同步创建值foo，然后返回范围。当此组件的父级重新呈现时，此组件将完全相同，但具有可能的新值。

它永远不会做任何其他事情，这就是它强大的原因。这就是为什么我们可以将它称为功能组件：因为它只取决于提供给它的值，因为它不会导致会改变应用程序其余部分方向的副作用，并且因为给定相同的参数，这个函数将在余下的剩余时间内产生相同的结果。

可预测=强大。

现在，类组件保持持久状态。它构造，初始化其状态，方法和属性，然后呈现并返回JSX。类（对象）仍然存在于内存中，因此它上面的所有值和方法也都存在。

类组件的方法不太可预测。

class Foo {
  name = 'tommy';

  getUpperName() {
    return this.name.toUpperCase();
  }

  setName(name) {
    this.name = name;
  }
}

每次使用相同的参数时，

Foo.getUpperName都不会产生相同的结果（提示：它不接受任何参数并依赖于它周围的上下文来确定其结果），所以该应用程序的其他部分可能会更改Foo.name，并且基本上可能会意外地控制Foo.getUpperName的结果。

该类可以更新自己的状态，导致自身和所有子组件重新计算其JSX返回值。

在普通箭头函数中，返回后，所有存在的函数都是它产生的返回值和函数语句（声明）。介于两者之间。

所有这些都说明，功能组件没有绑定this。（这是函数式编程中的禁忌。）它永远不会有状态。

因此，您无法对功能组件内部的this执行任何操作，并且它无法保存可观察值，因为每次重新呈现它都会重新实例化每个值。

在上面的示例中，即使this确实引用了Test，也会发生这种情况：

测试会将可观察值button创建为false。
测试会渲染按钮，然后单击该按钮。
测试会将可观察值button创建为false。
测试会渲染按钮，然后单击该按钮。
测试会将可观察值button创建为false。
测试会渲染按钮，然后单击该按钮。

等等。

在MobX中，您的observable需要依赖于持久数据结构并传递到返回UI标记的渲染函数中。

const store = observable({
  name: 'tommy'
});

const changeName = () => store.name = store.name.split('').reverse().join('');

const Foo = observer((props) => {
  return (
    <button onClick={changeName}>{store.name}'s button</button>
  )
});

这不是一个很好的模式，因为Foo和changeName都不是纯粹的，这个代码至少会起作用。

你需要这样做：

const store = () => {
  const self = {};

  self.actions = {
    setName: action((name) =>  self.name = name);
  }

  return extendObservable(self, { name: 'tommy' });
}

const App = (props) => {
    return <span><Foo store={store} /></span>
}

const Foo = observer((props) => {
  return (
    <button onClick={props.store.actions.setName}>
      {store.name}'s button
    </button>
  )
})

同样，这不是一个理想的实现，但它会起作用，我在工作，必须回到他们付钱给我做的事情。 ;）

使用具有反应功能组件的mobx并且没有装饰器

1 个答案: