业务分析
分层
视图层 --> 负责显示数据，每一个React组件 一个xxx.js
服务层 -->负责业务数据处理逻辑，命名为xxxService.js
Model层 --> 负责数据，使用Local Storage 代替
以上三个文件都应该写进 src 目录中，方便以后编译
#～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
使用代码实现
构建一个TodoService类，文件名service.js
使用NAMESPACE 存储 Local Storeage的key 避免冲突，增加一个前缀（时间戳）
使用数组结构 存储待办的事件
LocalStorage 就像是一个本地的 后台数据库，持久化使用
import React from 'react'
//服务层，逻辑处理
//title来自用户浏览器端提交的数据，类似于视图层用户提交的文本框
import store from 'store';
export default class TodoService {
static NAMESPACE = 'todo:'; //前缀，业务区分 --> localstore.key
todos = [ ]; //存储待办事宜
//创建todo
create(title){
//定义变量，用于唯一标识
const todo = {
key: TodoService.NAMESPACE + new Date().valueOf(), //使用时间戳+标识符，用于识别
title:title, //需要完成的内容 来自于网页的输入框等等
completed:false //标识事件是否完成
};
//存储用户的代办事件
this.todos.push(todo);
//持久化todo
store.set(todo.key,todo);
return todo;
}
}
#~~~~~~~~~~~~~~~~~~~~~~
视图层
增加antd组件对一个网页进行美化
使用蚂蚁金服的开源React UI 库
antd 组件
使用 card 和input 输入框 两者结合
将视图层的文件 写入 Create.js文件中
import React from 'react'
import {Card,Input} from 'antd';
//导入可视化的模板工具，美化
import 'antd/lib/card/style';
import 'antd/lib/input/style';
//缺省导出无状态组件
export default props =>
(
<Card title="plz input >>>" style={{ 300 }}>
<Input onPressEnter={event => {props.onCreate(event.target.value)}} />
<p>说明1</p>
</Card>);
这里必须导入 React 否则会抛出异常 React is not defiend
#～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
定义index.js 来启动网页
import React from 'react';
import ReactDOM from 'react-dom';
import Create from "./Create";
import Todoservice from "./Service"
class Root extends React.Component{
constructor(props){
super(props); //使用构造器来继承一个属性
this.service =new Todoservice() //实例化一个新的存储数据库
}
handleCreate （values){
//访问TodoService 的create 方法处理数据
this.service.create(values); //当启动Create组件时，会调用service的create方法来保证数据的持久性
console.log(values)
}
render(){
return <div>
hello <br />
<Create onCreate={this.handleCreate.bind(this)}/>
通过bind 来保证自己的数据能够传给 handleCreate方法
{/* 增减onCreate属性，注入数据处理函数到Create组件的props中 */}
</div>;
}
}
ReactDOM.render(<Root />,document.getElementById('root'));
由于社区提供了 状态的管理库 ，有Redux和Mobx
这两种库，可以非常好的帮我们管理事务的状态
Redux 使用较严格的函数式编程思想，小项目优势不大
Mobx 稳定，简单实用，适合中小项目使用，由于使用面向对象的方式，方便我们学习及接受，使用也十分广泛
Mobx
使用了观察者模式
观察者观察某个目标，目标对象(Obserable)发生了变化，就会通知自己内部注册了的观察者Observer
利用mobx对程序进行改造
以上之实现了一些入门级功能，功能还需日后增加