React框架 dva 和 mobx 的使用感受

React是一款流行的JavaScript库，用于构建用户界面。在React生态系统中，有许多框架和库可以帮助我们更轻松地构建React应用程序。本文将介绍两个React框架dva和mobx的使用感受，包括它们的优缺点、使用方法和示例说明。

dva

dva是一个基于React和Redux的轻量级框架，用于构建复杂的单页应用程序。它提供了一些有用的功能，例如路由、数据流管理、副作用处理等。以下是使用dva的步骤：

1. 安装dva：

bash
npm install dva --save

1. 创建一个dva应用程序：

```javascript
import dva from 'dva';

const app = dva();
```

1. 定义数据模型：

javascript
app.model({
namespace: 'count',
state: 0,
reducers: {
add(state) { return state + 1 },
},
});

1. 定义路由：

javascript
app.router(({ history }) =>
<Router history={history}>
<Route path="/" component={IndexPage} />
</Router>
);

1. 启动应用程序：

javascript
app.start('#root');

dva的优点是它提供了一些有用的功能，例如路由、数据流管理、副作用处理等。它还有一个方便的插件系统，可以轻松地扩展其功能。以下是一个使用dva的示例：

import dva from 'dva';
import { Router, Route } from 'dva/router';

const app = dva();

app.model({
  namespace: 'count',
  state: 0,
  reducers: {
    add(state) { return state + 1 },
  },
});

function IndexPage({ dispatch, count }) {
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch({ type: 'count/add' })}>Add</button>
    </div>
  );
}

app.router(({ history }) =>
  <Router history={history}>
    <Route path="/" component={IndexPage} />
  </Router>
);

app.start('#root');

在这个示例中，我们定义了一个名为“count”的数据模型，它有一个名为“add”的reducer，用于增加计数器的值。我们还定义了一个名为IndexPage的组件，用于显示计数器的值和一个按钮，用于增加计数器的值。最后，我们使用dva的router函数定义了一个路由，将IndexPage组件与根路径“/”关联起来。

mobx

mobx是一个简单、可扩展的状态管理库，用于构建React应用程序。它提供了一种简单的方式来管理应用程序的状态，并且可以轻松地与React集成。以下是使用mobx的步骤：

1. 安装mobx：

bash
npm install mobx mobx-react --save

1. 创建一个mobx store：

```javascript
import { observable, action } from 'mobx';

class CounterStore {
@observable count = 0;

 @action.bound
 increment() {
   this.count++;
 }

}

const counterStore = new CounterStore();
```

1. 在React组件中使用store：

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

@observer
class Counter extends React.Component {
render() {
return (

{this.props.store.count}

Add

);
}
}

ReactDOM.render(, document.getElementById('root'));
```

mobx的优点是它提供了一种简单的方式来管理应用程序的状态，并且可以轻松地与React集成。它还提供了一些有用的功能，例如计算属性、观察者等。以下是一个使用mobx的示例：

import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

class CounterStore {
  @observable count = 0;

  @action.bound
  increment() {
    this.count++;
  }
}

const counterStore = new CounterStore();

@observer
class Counter extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.store.count}</h1>
        <button onClick={this.props.store.increment}>Add</button>
      </div>
    );
  }
}

ReactDOM.render(<Counter store={counterStore} />, document.getElementById('root'));

在这个示例中，我们定义了一个名为“CounterStore”的mobx store，它有一个名为“increment”的action，用于增加计数器的值。我们还定义了一个名为Counter的React组件，用于显示计数器的值和一个按钮，用于增加计数器的值。最后，我们使用mobx-react的observer函数将Counter组件转换为观察者组件，以便在store的状态发生变化时自动重新渲染组件。