Reactjs 使用带有react功能组件且不带装饰器的mobx

我试图让MobX使用react中的功能组件。我想这样做，而不必使用装饰。我已经用create-react-app设置了一个应用程序，添加了MobX和MobX-react作为依赖项。 然而，我似乎无法在功能组件中获得可观察的对象

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);

我曾经尝试过将可观察对象声明为功能组件的一部分，或者像这样：

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

但在这两种情况下，我都无法让组件重新启动，或者我不确定可观察对象的设置是否正确

如果我把整件事写成这样一个类，它会工作得很好

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);

从“React”导入React；
从'mobx'导入{extendObservable}；
从'mobx react'导入{observer}；
类测试扩展了React.Component{
建造师（道具）{
超级（）；
可扩展可维护（此{
按钮：false
});
}
把手1=（）=>{
this.button=false；
}
把手2=（）=>{
this.button=true；
}
getButton2=（）=>{
console.log（'button2'）；
返回(
按钮2
);
};
getButton1=（）=>{
console.log（'button1'）；
返回(
按钮1
);
};
渲染=（）=>{
返回(
{this.button？this.getButton1（）：this.getButton2（）}
)
}
};
导出默认观察者（测试）；

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

let i = 0;

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

Foo.getuperName

不会在每次与相同的参数一起使用时都产生相同的结果（提示：它不接受任何参数，并取决于其周围的上下文来确定其结果），因此应用程序的其他部分可能会更改

Foo.name

，并且本质上，控制Foo.getUpperName的结果，可能是偶然的

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

在纯箭头函数中，返回后，只存在它生成的返回值和函数语句（声明）。两者之间什么都没有

综上所述，功能组件没有绑定到它的

this

。（这是函数式编程中的禁忌。）它永远不会有状态

因此，您不能在功能组件内部使用此执行任何操作，它也不能保存可观察的值，因为每次重新呈现时，它都会重新实例化这些值

在上面的示例中，即使

此

引用了

测试

，也会发生以下情况：

测试将可观察值

按钮

创建为

假

测试将呈现按钮，然后单击该按钮

测试将可观察值

按钮

创建为

假

测试将呈现按钮，然后单击该按钮

测试将可观察值

按钮

创建为

假

测试将呈现按钮，然后单击该按钮

诸如此类

在MobX中，您的可观察对象需要存在于持久数据结构上，并被传递到返回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>
  )
});

---

再说一次，这不是一个理想的实现，但它会起作用，我正在工作，必须回到他们付钱让我做的事情上来

函数组件只是一个函数，因此

extendObservable（this，…）

不会像类示例中那样工作。如果有state，为什么要使用函数组件？我想使用函数组件，因为我发现语法更容易阅读。最初，我写这篇文章是为了一个简单的删除按钮，点击后会展开显示两个按钮，一个确认，一个删除。我认为在这样一个简单的组件中有一个状态是有意义的，但是现在你已经为我解释清楚了，它现在实际上是有意义的。不过，在再次阅读文档之后，这一部分似乎是我想做的：如果你有一个

定时器

对象，那将非常有用，但是我担心如果这是React

TimerView

，它将不会像预期的那样工作。您关于类组件的FP的观点是错误的，因为useState与Observable的作用方式相同。这不是一个理想的实现-有没有关于一个好的实现的建议（可能是链接）？

class Foo {
  name = 'tommy';

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

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

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>
  )
});

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>
  )
})