ReactNative可复用UI分离布局组件和状态组件技巧.docxVIP

第

ReactNative可复用UI分离布局组件和状态组件技巧

目录引言包装Context.Provider作为父组件使用ContextHook来实现子组件使用React顶层API动态设置样式复用Context，实现其它子组件抽取共同状态逻辑自由组合父组件与子组件示例

引言

单选，多选，是很常见的UI组件，这里以它们为例，来讲解如何分离布局组件和状态组件，以实现较好的复用性。

假如我们要实现如下需求：

这类UI有如下特点：

不管是单选还是多选，都可以有网格布局，我们可以把这个网格布局单独抽离出来，放到一个独立的组件中。多选有Label形式和CheckBox形式，表现形式不一样，但是状态逻辑是一样的，我们可以单独封装这个状态逻辑。单选有Label形式和RadioButton形式，表现形式不一样，但是状态逻辑是一样的，我们可以单独封装这个状态逻辑。布局可以很复杂，在某个层级中，才会发生选择行为。

现在让我们一步一步来实现一个设计良好的，可复用的UI组件。

包装Context.Provider作为父组件

为了实现父子组件的跨层级通讯，我们需要使用React.Context。

首先来实现CheckGroup组件。

//CheckContext.ts

exportinterfaceItemT{

label:string

value:T

exportinterfaceCheckContextT{

checkedItems:ArrayItemT

setCheckedItems:(items:ArrayItemT)=void

exportconstCheckContext=React.createContextCheckContextany({

checkedItems:[],

setCheckedItems:()={},

CheckGroup实际上是个CheckContext.Provider。

//CheckGroup.tsx

import{CheckContext,Item}from./CheckContext

interfaceCheckGroupPropsT{

limit:number

checkedItems:ArrayItemT

onCheckedItemsChanged:(items:ArrayItemT)=void

exportdefaultfunctionCheckGroup({

limit=0,

checkedItems=[],

onCheckedItemsChanged,

children,

}:PropsWithChildrenCheckGroupPropsany){

constsetCheckedItems=(items:ArrayItemany)={

if(limit=0||items.length=limit){

onCheckedItemsChanged.(items)

return(

CheckContext.Providervalue={{checkedItems,setCheckedItems}}

{children}

/CheckContext.Provider

使用ContextHook来实现子组件

复选组件有多种表现形式，我们先来实现CheckLabel。主要是使用useContext这个hook。

//CheckLabel.tsx

import{CheckContext,Item}from./CheckContext

interfaceCheckLabelPropsT{

item:ItemT

style:StylePropTextStyle

checkedStyle:StylePropTextStyle

exportdefaultfunctionCheckLabel({

item,

style,

checkedStyle,

}:CheckLabelPropsany){

const{checkedItems,setCheckedItems}=useContext(CheckContext)

constchecked