本篇拋開業務**,從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...