利用react开发一些网页小工具

业务分析

分层

     视图层 --> 负责显示数据，每一个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 库

     官网 https://ant.desgin/index-cn

 

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={{ width: 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

     官网 https://cn.mbox.js.org/

     使用了观察者模式

          观察者观察某个目标，目标对象(Obserable)发生了变化，就会通知自己内部注册了的观察者Observer

 

利用mobx对程序进行改造

 

以上之实现了一些入门级功能，功能还需日后增加