/react-yafs

Yet Another File System in React DSL

Primary LanguageTypeScript

React-FS

使用React语法(JSX)来描述文件目录结构

举个例子🌰

const App = () => (
    <Directory name="aes">
        <Directory name="mmp">
            <File name="poke" />
        </Directory>
        <File name="cbc">
            abcd1234
        </File>
        <Directory name="rua" />
    </Directory>
)

ReactFS.render(<App />, process.cwd())

将会在 ./aes 中创建如下的结构

❯ tree aes
aes
├── cbc
├── mmp
│   └── poke
└── rua

2 directories, 2 files

其中 ./aes/cbc 中内容即为 abcd1234

知识点

  • Component, Element, Instances三者之间的关系
    • Instance是实际渲染中,渲染出来的东西(类比于DOM元素)
    • Element是一个JS对象,通过 type、props等字段来去表示这个元素(类比于vDOM)
    • Component是React组件,他通过 React.createElement 或者JSX语法,创建一个Element并返回
  • JSX组件,标签的resolve方式
    • 标签的type就是一个字符串,则被认为是原生组件,直接 createInstance 创造实例,如果标签首字母是小写,那么也认为它是字符串(这种情况就像字面量,不需要定义,直接用)
    • 标签的type是 Function(函数组件) 或者 Class(类组件),这时候React会再递归地寻找对应组件的实现,直到找到原生组件为止
  • Instance创建顺序:从里往外进行创建

难点

  • Reconciler的config,配置项很多

    大部分不需要,直接返个空函数、null即可,把泛型参数填上去有利于理解各个参数的类型与作用

  • 文件的实例用什么表示?

    文件新建了就是直接存在硬盘上了,没有handle

  • 创建顺序问题

    因为是从里往外创建,里层元素在创建的时候,是拿不到外层元素的路径的,所以不能在创建元素的时候新建文件,而是把创建动作存在来,和外层元素的创建动作连在一起【从尾巴向头部拼接链表】,形成一个Promise链,当到达根元素时,再执行整个Promise,这个时候文件新建的顺序就是正向的了

  • Promise并发问题

    一个目录下可能会有多个文件,这种情况下,Promise链的拼接就成了问题,需要要避免同级的Promise链被顶掉

另外的实现思路

  • append Child时什么也不做,等到准备render的时候再从顶层往下正向的创建,这样做比较简单
  • create Instance时真的创建文件(使用 memfs 来减轻IO负担),等到append Child时,再把文件移到正确的位置,最后render时dump出来(通过 unionfs