812913 / todoList

使用Mobx实现的一个简单的todoList

todoList

使用Mobx+React实现的一个简单的todoList

使用

npm install(下载所有依赖)   
npm start(启动本地服务器，预览)  
npm run build(构建项目，打包输出dist目录)   

遇到的问题

• 没有理解mobx真正的意义
  mobx是一个状态管理库，主要就是解决React组件之间通信的问题，避免使用state来管理状态。
  最开始做的时候，没有理解其意义，表面上使用了mobx，但只是把相应的store传给了父组件的props，然后使用props实现父子组件的通信。
  虽然表面上没有问题，但实际上并没有真正使用Mbox来进行状态管理。后来进行了调整。

• 分chunk打包
  使用老师给的asyncLoad.jsx，进行打包出现错误

    // asyncLoad.jsx
    import React, { Component } from 'react';
    export default function asyncLoad(cb) {
    return class AsyncComponent extends Component {
        state = {
        component: null,
        };
        async componentWillMount() {
        this.setState({
            component: (await cb()).default,
        });
        }
        render() {
        const { component: Cmp } = this.state;
        if (Cmp) {
            return <Cmp />;
        } else {
            return null;
        }
        }
    };
    }
  
    //TodoListView.jsx
    ...
    import asyncLoad from "./asyncLoad.jsx";
    const TodoView=asyncLoad(()=>import("./TodoView.jsx"));
    ...  
  

  错误原因：
  asyncLoad.jsx中使用async，所以需要下载babel-plugin-transform-runtime并进行配置。
  options:{ presets:['es2015','env','react','stage-0'], plugins:['transform-runtime','transform-decorators-legacy'] } webpack中配置chunk打包后的文件名：chunkFilename

    output:{
        filename:'[name].[hash:4].bundle.js',//用于输出文件的文件名
        path:path.resolve(__dirname,'dist'),//输出目录，绝对路径
        chunkFilename: '[name].[chunkhash:5].chunk.js',
    }   
  

其他注意问题

mobx中使用decorator(装饰器)，因此需要下载并配置babel-plugin-decorators-legacy