锐客网

  1. 首页 > 睿知 > it技术 > >

React|React Native可复用 UI分离布局组件和状态组件技巧

目录

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

引言 单选，多选，是很常见的 UI 组件，这里以它们为例，来讲解如何分离布局组件和状态组件，以实现较好的复用性。
假如我们要实现如下需求：
React|React Native可复用 UI分离布局组件和状态组件技巧
文章图片

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

包装 Context.Provider 作为父组件 为了实现父子组件的跨层级通讯，我们需要使用 React.Context。
首先来实现 CheckGroup 组件。
// CheckContext.tsexport interface Item {label: stringvalue: T}export interface CheckContext {checkedItems: Array>setCheckedItems: (items: Array>) => void}export const CheckContext = React.createContext({checkedItems: [],setCheckedItems: () => {},})

CheckGroup 实际上是个 CheckContext.Provider。
// CheckGroup.tsximport { CheckContext, Item } from './CheckContext'interface CheckGroupProps {limit?: numbercheckedItems?: Array>onCheckedItemsChanged?: (items: Array>) => void}export default function CheckGroup({limit = 0,checkedItems = [],onCheckedItemsChanged,children,}: PropsWithChildren) {const setCheckedItems = (items: Array) => {if (limit <= 0 || items.length <= limit) {onCheckedItemsChanged?.(items)}}return ({children})}


使用 Context Hook 来实现子组件 复选组件有多种表现形式，我们先来实现 CheckLabel。主要是使用 useContext 这个 hook。
// CheckLabel.tsximport { CheckContext, Item } from './CheckContext'interface CheckLabelProps {item: Itemstyle?: StylePropcheckedStyle?: StyleProp}export default function CheckLabel({item,style,checkedStyle,}: CheckLabelProps) {const { checkedItems, setCheckedItems } = useContext(CheckContext)const checked = checkedItems?.includes(item)return (
{if (checked) {setCheckedItems(checkedItems.filter((i) => i !== item))} else {setCheckedItems([...checkedItems, item])}}}>{item.label})}

现在组合 CheckGroup 和 CheckLabel，看看效果：
React|React Native可复用 UI分离布局组件和状态组件技巧
文章图片

可见，复选功能已经实现，但我们需要的是网格布局哦。好的，现在就去写一个 GridVeiw 来实现网格布局。

使用 React 顶层 API 动态设置样式 我们的 GridView 可以通过 numOfRow 属性来指定列数，默认值是 3。
这里使用了一些 React 顶层 API，掌握它们，可以做一些有趣的事情。
// GridView.tsximport { useLayout } from '@react-native-community/hooks'import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native'interface GridViewProps {style?: StylePropnumOfRow?: numberspacing?: numberverticalSpacing?: number}export default function GridView({style,numOfRow = 3,spacing = 16,verticalSpacing = 8,children,}: PropsWithChildren) {const { onLayout, width } = useLayout()const itemWidth = (width - (numOfRow - 1) * spacing - 0.5) / numOfRowconst count = React.Children.count(children)return ({React.Children.map(children, function (child: any, index) {const style = child.props.stylereturn React.cloneElement(child, {style: [style,{width: itemWidth,marginLeft: index % numOfRow !== 0 ? spacing : 0,marginBottom:Math.floor(index / numOfRow) )}

现在组合 CheckGroup CheckLabel 和 GridView 三者，看看效果：
React|React Native可复用 UI分离布局组件和状态组件技巧
文章图片

嗯，效果很好。

复用 Context，实现其它子组件 现在来实现 CheckBox 这个最为常规的复选组件：
// CheckBox.tsximport { CheckContext, Item } from '../CheckContext'interface CheckBoxProps {item: Itemstyle?: StyleProp}export default function CheckBox({ item, style }: CheckBoxProps) {const { checkedItems, setCheckedItems } = useContext(CheckContext)const checked = checkedItems?.includes(item)return (
{if (checked) {setCheckedItems(checkedItems.filter((i) => i !== item))} else {setCheckedItems([...checkedItems, item])}}}hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>{item.label})}

组合 CheckGroup 和 CheckBox，效果如下：
React|React Native可复用 UI分离布局组件和状态组件技巧
文章图片


抽取共同状态逻辑 CheckLabel 和 CheckBox 有些共同的状态逻辑，我们可以把这些共同的状态逻辑抽取到一个自定义 Hook 中。
// CheckContext.tsexport function useCheckContext(item: Item) {const { checkedItems, setCheckedItems } = useContext(CheckContext)const checked = checkedItems?.includes(item)const onPress = () => {if (checked) {setCheckedItems(checkedItems.filter((i) => i !== item))} else {setCheckedItems([...checkedItems, item])}}return [checked, onPress] as const}

于是， CheckLabel 和 CheckBox 的代码可以简化为：
// CheckLabel.tsximport { Item, useCheckContext } from './CheckContext'interface CheckLabelProps {item: Itemstyle?: StylePropcheckedStyle?: StyleProp}export default function CheckLabel({item,style,checkedStyle,}: CheckLabelProps) {const [checked, onPress] = useCheckContext(item)return (
{item.label})}

// CheckBox.tsximport { Item, useCheckContext } from '../CheckContext'interface CheckBoxProps {item: Itemstyle?: StyleProp}export default function CheckBox({ item, style }: CheckBoxProps) {const [checked, onPress] = useCheckContext(item)return (
{item.label})}


自由组合父组件与子组件 接下来，我们可以如法炮制 Radio 相关组件，譬如 RadioGroup RadioLabel RadioButton 等等。
然后可以愉快地把它们组合在一起，本文开始页面截图的实现代码如下：
// LayoutAndState.tsxinterface Item {label: stringvalue: string}const langs = [{ label: 'JavaScript', value: 'js' },{ label: 'Java', value: 'java' },{ label: 'OBJC', value: 'Objective-C' },{ label: 'GoLang', value: 'go' },{ label: 'Python', value: 'python' },{ label: 'C#', value: 'C#' },]const platforms = [{ label: 'Android', value: 'Android' },{ label: 'iOS', value: 'iOS' },{ label: 'React Native', value: 'React Native' },{ label: 'Spring Boot', value: 'spring' },]const companies = [{ label: '上市', value: '上市' },{ label: '初创', value: '初创' },{ label: '国企', value: '国企' },{ label: '外企', value: '外企' },]const salaries = [{ label: '10 - 15k', value: '15' },{ label: '15 - 20k', value: '20' },{ label: '20 - 25k', value: '25' },{ label: '25 - 30k', value: '30' },]const edus = [{ label: '大专', value: '大专' },{ label: '本科', value: '本科' },{ label: '研究生', value: '研究生' },]function LayoutAndState() {const [checkedLangs, setCheckedLangs] = useState([])const [checkedPlatforms, setCheckedPlatforms] = useState([])const [checkedCompanies, setCheckedCompanies] = useState([])const [salary, setSalary] = useState()const [education, setEducation] = useState()return (你擅长的语言（多选）{langs.map((item) => ())}你擅长的平台（多选）{platforms.map((item) => ())}你期望的公司（多选）{companies.map((item) => ())}你期望的薪资（单选）{salaries.map((item) => ())}你的学历（单选）{edus.map((item) => ())})}export default withNavigationItem({titleItem: {title: 'Layout 和 State 分离',},})(LayoutAndState)const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'flex-start',alignItems: 'stretch',paddingLeft: 32,paddingRight: 32,},header: {color: '#222222',fontSize: 17,marginTop: 32,},grid: {marginTop: 8,},gridItem: {marginTop: 8,},row: {flexDirection: 'row',marginTop: 12,},rowItem: {marginRight: 16,},})

请留意 CheckGroup RadioGroup GridView CheckLabel RadioLabel CheckBox RadioButton 之间的组合方式。

示例 这里有一个示例，供你参考。
【React|React Native可复用 UI分离布局组件和状态组件技巧】以上就是React Native可复用 UI分离布局组件和状态组件技巧的详细内容，更多关于React Native UI分离组件的资料请关注脚本之家其它相关文章！

    推荐阅读


    上一篇：React组件实例三大属性state|React组件实例三大属性state props refs使用详解

    下一篇：投稿|互联网的最后一公里，只有卫星才能实现