第五十三周总结——云文档开发一周总结

云文档开发笔记-第一周总结

云文档的开发已经一周了，整个文档基本开发完了，与其说是开发完了不如说是已经写好了整个的Demo，以后肯定还要加许多功能的。我想在这里说一下我开发的时候遇到的困难和解决方案。和我学习到了什么。

困难一-使用数组存储，每次改变使用useState改变值，删除值，查找值，几乎都要遍历一遍数组。
我最开始是将文件列表以数组的形式储存在了useState中，对象的形式如下。

export type defaultFiles = {
  id:string
  title: string
  body?: string
  isNew?: boolean
  path?: string
  isLoaded?: boolean
}[]
1
2
3
4
5
6
7
8

于是我做了一个大胆的决定，将数组存储改成对象储存，改成了如下的结构。

export type defaultFiles = {
  [key:string]: {
    id:string
    title: string
    body?: string
    isNew?: boolean
    path?: string
    isLoaded?: boolean
  }
}
1
2
3
4
5
6
7
8
9
10

其中对象属性的key值就是id值。这样查找id的使用就可以直接defaultFiles.id，删除的时候可以delete defaultFiles[id]，这样就省区了数组每次操作都要遍历的问题。目前我是这样存储的，如果要加上服务器的话，估计还是返回的数组的形式，为此我写了一个函数，将数组转换成对象的形式，且对象参数的key值是id值。

type defaultFilesType = {
  id:string
  title: string
  body?: string
  isNew?: boolean
  path?: string
  isLoaded?: boolean
}[]
export const flattenArr = (arr:defaultFilesType):Object => {
  return arr.reduce((map:map,item) => {
    map[item.id] = item;
    return map;
  }, {})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

困难二-当软件没打开或者打开，本地目录中的文件被删除、修改、新增该怎么办？
我当时想的就是，我可以在软件中创建文件，但是如果本地的文件被用户故意的修改怎么办呢？
看看我解决的逻辑。

1. 第一次进入软件，查看本地目录是否删除，如果删除则重新创建。
2. 每当打开软件的时候，注意是打开软件，不包括刷新软件。这时候就读取一下文档的目录，然后生成对象返回，为此我封装了一个hooks，因为软件代码还没公开，这里就不展示主要代码了。
3. 使用node来监听目录中文件的变化，例如：当软件打开，本地的文件被用户恶意删除，那么node监听到后就返回用户的操作，新增或删除，这里没有修改，因为修改就相当于删除了一个文件和修改了一个文件。
4. 此时我有遇到了一个问题就是，当我在软件里面操作文件的时候，node同样能监听到目录的改变，所以我有写了一个useState来储存文件的名称。例如：文件名列表中有a.md这个文件，当用户本地删除这个文件的时候，我就会判断一下我的useState中是否存在a.md，如果存在那就说明是本地删除的，如果不存在就说明是我通过软件删除的。

我同样为监听目录的node封装了一个hooks。

总结

1. 对数组的一些操作有些了解了，例如reduce。
2. 学会了封装一下hooks。
3. 对React组件间的props通信了解。
4. 我明白的最重要的事情就是，写React项目要敢写，不能一开始就考虑这里优化那里优化的，会导致哪里都不太敢写，就写不好了。先写下去，哪里不行了再重构，不能止步不前。