2018-03-09 17:57:11 qq499576783 阅读数 517
  • 前端开发在线峰会

    前端开发者线上培训峰会,来自Smashing Magazine、美国Hulu、百度、美团、去哪儿、广发证券的六位国内外前端讲师,与您解读前端热门技术及创新应用实践,涉及数据状态管理、响应式开发、代码多端复用等话题。 内容涉及Redux最佳实践、响应式布局全新探索、Redux or Mobx前端应用状态管理、美团点评多端复用实践、去哪儿网前端统一构建解决方案等。

    3095 人正在学习 去看看 CSDN讲师

1. npm install mobx mobx-react --save

2. npm install babel-plugin-transform-decorators-legacy --save-dev

3. package.json中配置

"babel": {
"presets": [
"react-app"
],
"plugins": [ 
["transform-decorators-legacy"]       
]
}


4. 创建Store.js

import {observable, action, useStrict} from 'mobx';

useStrict(true);

class Store {
@observable num = 1;

@action plus(){
this.num ++;
}

@action minus(){
this.num --;
}
}

export default Store;


5. 在index.js中加入Store

import {Provider} from 'mobx-react';
import Store from './utils/Store';

const store = new Store();

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


6. 在Main.js中使用状态

import {observer,inject} from 'mobx-react';
@inject("store") @observer
class Main extends Component {
render() {
let {num} = this.props.store;
 return <div>
<div>{num}</div>
<button onClick={()=>{this.props.store.plus()}}>加1</button>
<button onClick={()=>{this.props.store.minus()}}>减1</button>
</div>
}
}


7. 实现效果


点击“加1”之后,变成


实现了计数器的功能。


2017-03-03 14:30:28 qq_32014215 阅读数 934
  • 前端开发在线峰会

    前端开发者线上培训峰会,来自Smashing Magazine、美国Hulu、百度、美团、去哪儿、广发证券的六位国内外前端讲师,与您解读前端热门技术及创新应用实践,涉及数据状态管理、响应式开发、代码多端复用等话题。 内容涉及Redux最佳实践、响应式布局全新探索、Redux or Mobx前端应用状态管理、美团点评多端复用实践、去哪儿网前端统一构建解决方案等。

    3095 人正在学习 去看看 CSDN讲师

学习使用 MobX 和 React Native 的一个不错的零点开始

-、Mobx 在React Natie项目中的 配置如下。

  1.我们先要创建一个 React Native 

       

react-native init ReactNative_MobX

       2.接下来,我们进入目录下,并安装需要的依赖:mobx 和 mobx-react

npm i mobx mobx-react --save
      3.我们也要安装一些 babel 插件,以支持 ES7 的 decorator 特性:

npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 --save-dev

       4.在根目录中创建一个 .babelrc 文件配置 babel 插件:


{
  "presets": ["react-native"],
  "plugins": [
    "syntax-decorators",
    "transform-decorators-legacy"
  ]
}
到这里已经配置Mobx集成到React Native 项目。

二、讲解mobx在react-native 项目的简单运用。

     Mobx在ReactNative中 主要用到的API分别有observable、autorun 、computed、action、map等。

   react-native 经常用 到 Mobx的API分别observable, computed, autorun, action ,map等。



import { observable, computed, autorun, action } from 'mobx';

class Foo {
  @observable
  selected = 0;

  @observable
  items = [];

  @computed
  get selectedItem() {
    if (this.selected >= this.items.length) {
      return null;
    }
    return this.items[this.selected];
  }

  @action
  addItem(item) {
    this.items.push(item);
  }

  @action
  removeAt(id) {
    this.items.splice(id, 1);
    if (this.selected >= id) {
      this.selected --;
    }
  }

  @action
  removeSelected() {
    this.items.splice(this.selected, 1);
  }
}

export default function demo5() {
  const foo = new Foo();
  autorun(() => {
    console.log(`Current selected is: ${foo.selectedItem}`);
  });
  foo.addItem(0);
  foo.addItem(1);
  foo.addItem(2);
  foo.addItem(3);

  foo.selected = 2;

  foo.removeSelected();

  foo.removeAt(0);
}



      

import { map, autorun } from 'mobx';

export default function demo6() {
  const foo = map({});
  autorun(() => {
    console.log(`map have ${foo.size} keys`);
  });

  foo.set('foo', 1);
  foo.set('bar', 1);
  foo.set('foo', 2);
  foo.delete('bar');
}


2019-06-11 14:20:02 dick3741 阅读数 71
  • 前端开发在线峰会

    前端开发者线上培训峰会,来自Smashing Magazine、美国Hulu、百度、美团、去哪儿、广发证券的六位国内外前端讲师,与您解读前端热门技术及创新应用实践,涉及数据状态管理、响应式开发、代码多端复用等话题。 内容涉及Redux最佳实践、响应式布局全新探索、Redux or Mobx前端应用状态管理、美团点评多端复用实践、去哪儿网前端统一构建解决方案等。

    3095 人正在学习 去看看 CSDN讲师
  1. 安装Mobx依赖
    npm install --save mobx mobx-react
  2. 安装装饰器插件
    方便使用mobx,如@observable,@observer,@action等
    npm install babel-plugin-transform-decorators-legacy --save-dev
  3. 修改.babelrc或者babel.config.js
    在plugins第一行添加:["transform-decorators-legacy"]
module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    ["transform-decorators-legacy"],
    ...
  ]
}

至此,结束!

2019-01-21 14:41:32 mikuoohash 阅读数 880
  • 前端开发在线峰会

    前端开发者线上培训峰会,来自Smashing Magazine、美国Hulu、百度、美团、去哪儿、广发证券的六位国内外前端讲师,与您解读前端热门技术及创新应用实践,涉及数据状态管理、响应式开发、代码多端复用等话题。 内容涉及Redux最佳实践、响应式布局全新探索、Redux or Mobx前端应用状态管理、美团点评多端复用实践、去哪儿网前端统一构建解决方案等。

    3095 人正在学习 去看看 CSDN讲师

公司最近开了一个新项目,继续采用ReactNative,作为项目负责人,博主正好有机会从头搭建一个项目。

在集成MobX的时候,出现了一些问题,主要是因为使用了 0.57.+ 的ReactNative版本,在0.56版本的ReactNative更新中,采用了Babel7,网上老的教程有些过时了,会报错。还用了5.8.0版本的MobX和5.4.3版本的MobX-React,都是最新的版本,也遇到了一些坑,解决时也费了一些功夫,写篇教程总结一下,也给大家分享分享。

1.安装mobx依赖

执行

yarn add mobx

或者

npm install mobx --save

个人觉得yarn命令比较好一些,不知道的可以看一下补充内容,知道的就可以跳过了。

补充内容:

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

安装完 yarn 后需要设置镜像源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名

2.安装mobx-react依赖

执行

yarn add mobx-react

或者

npm install mobx-react --save

3.测试mobx是否可用

安装完上面的依赖后,可以先测试一下mobx是否可用,运行项目,在自己工程中,新建一个js文件,或者用以前的js文件测试也可以。

添加代码

import {observable}  from  'mobx';

之后reload,看是否报错,不报错的话,就比较顺利,跳过步骤4,直接看步骤5。

如果提示“can't find variable:symbol”,而且是android版本的话,看步骤4,如果是iOS版本的话,请自行解决。

4.升级项目JavaScriptCore

①,修改RN项目package.json文件,添加新的依赖

"dependencies": {
 // ........... 省略其他依赖,代码  
+  "jsc-android": "236355.x.x"
}

命令行中输入yarn(或者npm install),执行命令。不懂得看上面的补充内容

②,修改android/build.gradle文件

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
     +   maven {
     +       // Local Maven repo containing AARs with JSC library built for Android
     +          url "$rootDir/../node_modules/jsc-android/dist"
     +      }
    }
}

③,修改android/app/build.gradle文件

android{

         //....省略之前代码

+  configurations.all {
+       resolutionStrategy {
+                force 'org.webkit:android-jsc:r236355'
+           }
+    }

}

重新编译项目,运行

5,安装装饰器插件,方便使用mobx,如@observable,@observer,@action等

一般来说,安装完mobx和mobx-react依赖,就可以使用mobx了,但为了写代码方便,通常会选择这种注解的方式来使用,所以需要安装插件

执行

yarn add --dev @babel/plugin-proposal-decorators 

 或者 

npm install --save-dev @babel/plugin-proposal-decorators 

 修改.babelrc文件,一般都有该文件,找不到的,自己创建一个,和package.json文件同级。

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [["@babel/plugin-proposal-decorators",
    {
      "legacy": true
    }]]
}“

"presets"这行保持你项目中的不动就可以,主要看"plugins”中的改变。

6.配置完毕,重新运行项目,测试

在代码中添加@observable,@observer等注解,reload查看是否报错

具体mobx的用法,自行参考其他文章,对于配置环境有什么的问题的,可以在文章下评论。

 

 

参考文章: 

https://cn.mobx.js.org/ MobX中文文档

https://github.com/mobxjs/mobx-react/issues/498

https://github.com/react-native-community/jsc-android-buildscripts#how-to-use-it-with-my-react-native-app

https://stackoverflow.com/questions/53230930/react-mobx-error-the-decorators-plugin-requires-a-decoratorsbeforeexport-op

ReactNative中文网

2019-07-25 22:42:54 chrislincp 阅读数 202
  • 前端开发在线峰会

    前端开发者线上培训峰会,来自Smashing Magazine、美国Hulu、百度、美团、去哪儿、广发证券的六位国内外前端讲师,与您解读前端热门技术及创新应用实践,涉及数据状态管理、响应式开发、代码多端复用等话题。 内容涉及Redux最佳实践、响应式布局全新探索、Redux or Mobx前端应用状态管理、美团点评多端复用实践、去哪儿网前端统一构建解决方案等。

    3095 人正在学习 去看看 CSDN讲师

因为最近打算用react+typescript写一个新项目,结果在集成mobx以及webpack 文件路径别名alias设置上碰到不少问题,在网上查了一些资料,然而大部分文章的解决方法因为使用工具的版本更新已经不再适用,因此在解决问题后打算写篇文章记录下期间踩过的坑。

一、通过create-react-app 搭建react项目

这一步没什么好说的,根据官方文档步骤即可
1.全局安装CRA

npm i create-react-app -g 

2.新建react+typescript项目

npx create-react-app my-app --typescript 
// 或者
yarn create react-app my-app --typescript

二、集成mobx

1.安装mobx

yarn add mobx mobx-react

2.安装react-app-rewired customize-cra
主要用于重写cra的webpack配置 下面会用到

yarn add react-app-rewired customize-cra

修改package.json中的scripts脚本

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

在项目中使用mobx:

// 新建一个store.js
import { observable } from 'mobx'
class Store {
  @observable
  todo = {}
}
export default new Store()

这时候xcode会有警告提示:
image.png
删除该警告只需要在根目录tsconfig.json 文件中compilerOptions下设置experimentalDecorators为true即可(此时可能需要重启vscode才能生效)
更新App.tsx

import React from "react";
import { Provider } from "mobx-react"
import store from "./store";

function App() {
  return (
    <Provider {...store}>
      <div>this is app</div>
    </Provider>
  );
}

export default App;

然后启动项目:

yarn start

然而会出现以下错误:
image.png

该问题主要是因为我们没法直接使用es7的decorator修饰器,需要配置babel进行转译

此时注意:由于网上目前大部分的资料并不适用,导致在这里踩了坑

在.babelrc 或package.json中使用插件,但是实测无效

{
"presets": ['react-app', '@babel/preset-env'],
"plugins": [["@babel/plugin-proposal-decorators", { legacy: true }]] 
}

后来在翻customize-cra文档的时候看到addDecoratorsLegacy()方法,于是在config-overrides.js文件中添加:

const { override,  addDecoratorsLegacy } = require('customize-cra');

module.exports = override(
  addDecoratorsLegacy(), 
);

安装@babel/plugin-proposal-decorators:

yarn add @babel/plugin-proposal-decorators -D

然后重新yarn start启动项目:编译成功~

三、设置别名alias

网上大部分资料都是以下两个步骤:
1.修改config-overrides.js文件:

const { override, addWebpackAlias, addDecoratorsLegacy } = require('customize-cra');
const path = require('path')

module.exports = override(
  addWebpackAlias({
    "@": path.resolve(__dirname, 'src')
  }),
  addDecoratorsLegacy(), 
);

2.在tsconfig.json文件中新增paths:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "baseUrl": "src",
    "paths": {
      "@/*": ["src/*"]
    },
    ...
  }
}

将App.tsx中store的引入方式改为:

import store from '@/store'

第一步没什么问题,然而在于第二个步骤,当你yarn start启动项目的时候你会发现tsconfig.json文件中的paths不见了!一脸懵逼有没有
理所当然的项目编译报错:Cannot find module ‘@/store’
image.png

最后在CRA这个issue下找到解决办法:
在根目录新建一个paths.json文件,具体文件名称可自行修改,加入以下内容:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

然后在tsconfig.json中新加:

"extends": "./paths.json"

打开App.tsx 文件查看store引入不再报错
image.png

最后启动项目:
image.png

ok,大功告成!

参考资料:
https://github.com/arackaf/customize-cra/blob/master/api.md#adddecoratorslegacy
https://github.com/facebook/create-react-app/issues/5645
https://ant.design/docs/react/use-in-typescript-cn

没有更多推荐了,返回首页