react17 hooks 使用 mobx 記錄

1. 使用 

# 全局安裝
npm install -g create-react-app
# 構建一個my-app的項目
npx create-react-app my-app
cd my-app

# 啟動編譯當前的React項目，並自動打開 http://localhost:3000/
npm start

2. 安裝 mobx  

yarn add mobx mobx-react 

 

3. 由於 react 不支持最新的裝飾器寫法 需要如下操作

Support for the experimental syntax 'decorators-legacy' isn't currently enabled

npm install  customize-cra react-app-rewired @babel/plugin-proposal-decorators --save

　　

項目根目錄新建config-overrides.js文件加入以下代碼:


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

修改package.json文件如下：

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

4. 

 

 5. 新建 store 目錄

6. 新建 模塊文件

 

store

　　-- aboutStore.js

　　-- index.js

　　--  newsStore.js

ababoutStore.js

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

class AboutStore {
  constructor(){
    makeAutoObservable(this)
  }
  @observable
  abouts = '123'

  @observable
  numbers = 1
  
  @action
  setAbout = (abouts) => {
    this.abouts = abouts
  }

  @action
  setNumbers = () => {
    this.numbers++
  }
}

const aboutStore = new AboutStore();

export default aboutStore;

　　

newsStore.js


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

class NewsStore {
  constructor(){
    makeAutoObservable(this)
  }
  
  @observable
  news = '重要新聞'
  
  @action
  setNews = (news) => {
    this.news = news
  }
}

const newsStore = new NewsStore();

export default newsStore;

　　

 

index.js 

/* eslint-disable import/no-anonymous-default-export */
import aboutStore from './aboutStore'
import newsStore from './newsStore'


export default {
    aboutStore,
    newsStore
}

　　

入口 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from "mobx-react"
import stores from './store'
// import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <Provider {...stores}>
      <App />
    </Provider>,
  document.getElementById('root')
);

　　

app.js

import './App.css';
import { Observer,observer,useLocalObservable} from 'mobx-react';
import store from './store'


const App = () => {
    const localStore = useLocalObservable(() => store);
    const { aboutStore,newsStore}  = localStore
    return <Observer>{
      () => <div>
        <div>{aboutStore.abouts}</div> 
        <p style={{cursor:'pointer'}} onClick={ () =>  aboutStore.setAbout('哈哈哈')}>改變about</p>
        <p>{aboutStore.numbers}</p>
        <button onClick = { aboutStore.setNumbers }>add</button>
        <hr/>
        <h2>{newsStore.news}</h2>
        <button onClick={() => newsStore.setNews('非重要新聞') }>改變標題</button>
      </div>
    }</Observer>
}


export default observer(App);