How to use mobx-react ' observer ' without decorator syntax?

当在不支持装饰器语法的环境中使用 MobX 与 React 时，我们可以使用 observer 函数直接将 React 组件转换为反应式组件。这种方式不需要使用装饰器语法，而是采用一个函数包装的形式。这样做的主要步骤如下：

1. 导入必要的模块：首先，需要从 mobx-react 包中导入 observer 函数。

javascript
import { observer } from 'mobx-react';

1. 创建 React 组件：定义一个普通的 React 组件。

javascript
import React from 'react';

function TodoView({ todo }) {
  return (
    <div>
      <input
        type="checkbox"
        checked={todo.finished}
        onChange={() => todo.toggle()}
      />
      {todo.title}
    </div>
  );
}

1. 使用 observer 函数：使用 observer 函数包装你的 React 组件，使其成为响应式组件。这样，当观察的数据变化时，组件会自动重新渲染。

javascript
const ObservableTodoView = observer(TodoView);

1. 使用组件：在你的应用中使用转换后的组件。

javascript
import ReactDOM from 'react-dom';
import { observable } from 'mobx';

const todo = observable({
  title: "Learn MobX",
  finished: false,
  toggle() {
    this.finished = !this.finished;
  }
});

ReactDOM.render(<ObservableTodoView todo={todo} />, document.getElementById('app'));

在上面的例子中，TodoView 组件通过 observer 函数被转换为一个 MobX 的反应式组件。因此，当 todo 对象的 finished 属性改变时，TodoView 组件会自动重新渲染以反映最新的状态。

这种方法相对直接，并且能够适用于不支持装饰器的 JavaScript 环境，如 Create React App 默认配置。这样做不仅保持了代码的清晰和易于管理，还可以享受 MobX 提供的响应式编程的好处。