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

2022-07-09 10:18:14 字數 3166 閱讀 1911

本篇拋開業務**,從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只有在需要擴充套件以及需要定製化改造的場景下才會用的到.

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

檢視某個類的完整繼承關係 選中類的名稱,然後按f4 quick type hierarchy quick type hierarchy可以顯示出類的繼承結構,包括它的父類和子類 supertype hierarchy supertype hierarchy可以顯示出類的繼承和實現結構,包括它的父類和...

原始碼閱讀 Glide原始碼閱讀之with方法(一)

前言 本篇基於4.8.0版本 原始碼閱讀 glide原始碼閱讀之with方法 一 原始碼閱讀 glide原始碼閱讀之load方法 二 原始碼閱讀 glide原始碼閱讀之into方法 三 大多數情況下,我們使用glide 就一句 但是這一句 裡面蘊含著成噸的 with方法有以下幾個過載方法 publi...

ArrayList底層原始碼

arraylist的屬性 private static final int default capacity 10 預設初始容量的大小 private static final object empty elementdata 空陣列,用於有參構造時引數為零的例項 private static fi...