formily 底層庫原始碼閱讀以及api理解

本篇拋開業務**,從formily底層閱讀**,進行分析.但並不是原始碼解析,比較懶,只在閱讀的時候打了注釋,也不想浪費大量的篇幅展示**

這是官網的描述,介紹了內部使用observable graph,來記錄任意時刻的全量狀態,也方便回滾.

分為以下幾步:

接入方式目前提供了全域性註冊機制與單例註冊機制,全域性註冊主要使用 registerformcomponent 和 registerformitemcomponent 兩個api來註冊,單例註冊則是直接在 schemaform 屬性上傳 formcomponent 和 formitemcomponent。如果是 spa 場景,推薦使用單例註冊的方式

import react from 'react'
import from '@formily/react-schema-renderer'
import from 'antd'
export const compatformcomponent = () => 
export const compatformitemcomponent = () => 
if (props.invalid) 
if (props.warnings && props.warnings.length) 
return (
)}/***
全域性註冊方式
registerformcomponent(compatformcomponent)
registerformitemcomponent(compatformitemcomponent)
***/
//單例註冊方式
export default () =>

可以看到，擴充套件表單整體或區域性的樣式，僅僅只需要通過擴充套件 form/formitem 元件就可以輕鬆解決了，這裡需要注意的是，formitem 元件接收到的 props 有點複雜，不用擔心，後面會列出詳細 props api，現在我們只需要知道大概是如何註冊的就行了.

因為元件庫的所有元件都是原子型元件，同時大部分都相容了 value/onchange 規範，所以我們可以借助 connect 函式快速接入元件庫的元件，通常，我們接入元件庫元件，大概要做 3 件事情：

import react from 'react'
import from '@formily/react-schema-renderer'
import from 'antd'
const maptextcomponent = (
target: react.jsxelementconstructor,
props: any = {},
fieldprops: any = {}
): react.jsxelementconstructor=> = fieldprops
if (editable !== undefined) 
} if (array.isarray(props.datasource)) 
return target
}const mapstyledprops = (
props: iconnectprops,
fieldprops: mergedfieldcomponentprops
) => = fieldprops
if (loading) else if (errors && errors.length) 
}const acceptenum = (component: react.jsxelementconstructor) => ) => )
} else 
}}registerformfield(
'number',
connect()(acceptenum(inputnumber)) //處理列舉態
)

json schema 描述表單資料結構，其實是天然支援的，但是表單最終還是落在 ui 層面的，可惜在 ui 層面上我們有很多元件其實並不能作為 json schema 的乙個具體資料節點，它僅僅只是乙個 ui 節點

import react from 'react'
import from '@formily/react-schema-renderer'
import from 'antd'
registervirtualbox('card', () => 
})export default () =>

card 就是乙個正常的 object schema 節點，只是需要指定乙個 x-component 為 card，這樣就能和 registervirtualbox 註冊的 card 匹配上，就達到了虛擬節點的效果.

這裡需要注意的是 x-component-props 是直接透傳到 registervirtualbox 的**函式引數上的。這是 json schema 形式的使用.

import react from 'react'
import from '@formily/react-schema-renderer'
import from 'antd'
const card = createvirtualbox('card', () => 
})export default () =>

還有 jschema 的使用方式：

import react from 'react'
import from '@formily/react-schema-renderer'
import from 'antd'
const card = createvirtualbox('card', () => 
})export default () =>

可以定義一下，什麼才是超複雜自定義元件：

為什麼我們通過正常的封裝自定義元件的形式不能解決問題呢？其實主要是受限於校驗，沒法整體校驗，所以，我們需要乙個能聚合大量字段處理邏輯的能力.

最近按照formily的相關api使用rxjs自己做了一版,感興趣的可以訪問來對比參考.

針對底層**再次做了下閱讀,發現還是有不少東西是很有用的,有些api只有在需要擴充套件以及需要定製化改造的場景下才會用的到.

formily 底層庫原始碼閱讀以及api理解

《原始碼閱讀》原始碼閱讀技巧,原始碼閱讀工具

原始碼閱讀 Glide原始碼閱讀之with方法（一）

ArrayList底層原始碼

formily 底層庫原始碼閱讀以及api理解

《原始碼閱讀》原始碼閱讀技巧,原始碼閱讀工具

原始碼閱讀 Glide原始碼閱讀之with方法（一）

ArrayList底層原始碼

相關推薦