react table里跳转页面_React项目---记账本项目总结

我的钱呢?--记账薄

前段时间写了一个React项目---我的钱呢?--记账薄,算是在学习完React之后有了一个更深的了解,项目我已经上传到github有兴趣的朋友可以下载下来试试.下面是效果预览,因为GitHub访问比较慢,所以我也在gitee上部署了.

https://he_zhongfeng.gitee.io/where-is-my-money-website/#/add​he_zhongfeng.gitee.io

手机参看效果最佳

使用create-react-app创建项目

项目我是通过create-react-app创建的,因为配webpack比较麻烦,用cdn的话网页加载会变慢,所以我选择了使用create-react-app来初始化项目

支持SCSS

在项目中我想使用scss,但是需要去下载node-scss但是下载了dart-scss之后还是需要去下载node-scss(react只支持node-scss),但是node-scss下载慢,还容易被墙,下载之后编译也慢,所以我查了很多的方法之后发现npm6.9有一个新功能叫做package alias于是我是用yarn add node-scss@npm:dart-scss来偷梁换柱,瞒天过海

使用CSS in JS 之 style-components

在封装组件的过程中,我是用的是style-components来编写样式的,这样可以让css和JS'在同一个文件中,减少了引入的过程,也减少了文件数量

typescript教你写代码

在项目中我的所有JS代码都是使用的TS,TS可以明确的提示数据类型,还可以自定义数据类型,还可以在编译之前就指出代码的错误,在项目中TS部分我是需要什么学什么的,所以没有涉及到太多的TS语法

React router跳转页面

在使用React router的时候我是直接去官网找的例子,然后自己修修改改实现路由跳转的,因为只有三个页面,所以跳转起来比较简单

React Router: Declarative Routing for React​reacttraining.com

封装----减少代码重复

在项目中需要用到标签,而标签要在两个网页中都要使用到,所以我就使用自定义Hook来封装组件

import {useEffect, useState} from "react";
import {createId} from "../lib/createId";
import {useUpdate} from "./useUpdate";

const useTags = () => {
    const [tags, setTags] = useState<{ id: number, name: string }[]>([]);
    useEffect(() => {
     let localTags =  JSON.parse(window.localStorage.getItem("tags") || "[]");
        if(localTags.length === 0){
            localTags = [
                {id: createId(), name: '衣'},
                {id: createId(), name: '食'},
                {id: createId(), name: '住'},
                {id: createId(), name: '行'}];
        }
        setTags(localTags)
    },[]);
    useUpdate(()=>{
        window.localStorage.setItem("tags", JSON.stringify(tags))
    },tags);
    const findTag = (id: number) => tags.filter(tag => tag.id === id)[0];
    const findTagIndex = (id: number) => {
        let result = -1;
        for (let i = 0; i < tags.length; i++) {
            if (tags[i].id === id) {
                result = i;
                break;
            }
        }
        return result;
    };
    const updateTag = (id: number, {name}: { name: string }) => {
        setTags(tags.map(tag => tag.id === id ? {id, name} : tag));
    };
    const deleteTag = (id: number) => {
        setTags(tags.filter(tag => tag.id !== id));
    };
    const addTag = () => {
        const tagName = window.prompt("请输入新增标签的内容:");
        if (tagName !== null && tagName !== "") {
            setTags([...tags, {id: createId(), name: tagName}])
        }
    };
    const getName = (id :number) =>{
        const tag = tags.filter((t)=>t.id === id)[0];
        return tag ? tag.name :"";
    };
    return {tags, setTags, findTag, findTagIndex, updateTag, deleteTag, addTag,getName}
};
export {useTags}

这样在那个页面中只要调用useTags就可以使用这个Hooks里面的API了

实现数据的持久化

在实现页面持久化的时候,由于这个只是一个简单的本地项目,所以我使用了localstory来存储数据,在每次保存记录的时候存储数据,在每次渲染的时候取数据.

全部使用的是函数组件

在最新的函数组件中加入了hooks来强化函数组件的功能,所以就出现了函数组件跟类组件功能一样但是函数组件却比较简单的情况,所以我就全部使用函数组件来封装