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

812913/todoList

todoList

使用

遇到的问题

其他注意问题