es6 扩展运算符 (...) 的日常使用

设置默认值,传递参数

解决问题

  1. 默认值设置
  2. 多余参数传递

代码

/* Bottom.component.js */ 
// ViewSheets 组件包装了 BottomSheets组件
exports const ViewSheets = ({ visible = false, items = [], onPress = () => null, ...props }) => {
    return (
        <BottomSheets visible={visible} {...props}>
            {items.map((actionName, i) => {
                return (
                    <ActionItem activeOpacity={1} onPress={() => onPress(i)} key={i}>
                        <ActionName>{actionName}</ActionName>
                    </ActionItem>
                )
            })}
        </BottomSheets>
    )
}

/* index.js */
<ViewSheets 
    visible={true} 
    items={[1,2,3]}
    onPress={() => {console.log('我在 ViewSheets 中触发')}}
    onCancelPress={() => {'我在 BottomSheets 中触发'}}
   />

组件注入式请求,与外部触发加载

解决问题

  1. 一个组件请求接口不同,返回数据相同,展现相同
  2. 组件外部,状态改变,组件需要初始化
  3. 通用逻辑与展现,统一管理。

代码

/* Goods.component.js */ 
const initialState = {
    goodsList: [],
    pageNum: 1,
    pageSize: 12,
    lastPage: false, // 最后一页
    empty: false, // 空数据
    reachBottom: false // 下拉加载
}

const reducer = (state, action) => {
    switch (action.type) {
        case 'update': {
            return { ...state, ...action.payload }
        }
        default:
            return state
    }
}

export const Goods = ({fetch, stickyHeaderComponent = null, ...arg}) => {
    const [goods, dispatch_goods] = useReducer(reducer, initialState) // useReducer 为函数提供Redux的功能
    const {goodsList, pageNum, pageSize} = goods // 解构对象,方便使用 
    const isLoading = useRef(null) // 防多次调用
    
    useEffect(() => {
      if(fetch){
         isLoading.current = true
         
         // 数据初始化
         dispatch_goods({
           type: 'update',
           payload: {
             pageNum: 1,
             lastPage: false, 
             empty: false, 
             reachBottom: false 
           }
         })
         getGoods({pageNum: 1})  
      }
    },[fetch])
    
    const getGoods = params => {
      fetch({...params, pageSize})
         .then(json => {
            const { hasNext, data } = json

            dispatch_goods({
                type: 'update',
                payload: {
                    goodsList: params.pageNum === 1 ? data : goodsList.concat(data),
                    lastPage: !hasNext,
                    empty: params.pageNum === 1 && data.length === 0,
                    reachBottom: false
                }
            })
         })
         .finally(() => {
             isLoading.current = false
         })
    }
    
    // 下拉加载
    const handleEndReached = () => {
        if (lastPage || isLoading.current) {
            return
        }

        isLoading.current = true
        dispatch_goods({
            type: 'update',
            payload: {
                reachBottom: true,
                pageNum: pageNum + 1
            }
        })
        getGoods({ pageNum: pageNum + 1 })
    }
    
    return (
       <FlatList ...arg />
    )
}


/* index.js */
import { goodsQuery, goodsByShop } from '../service;

export const SearchGoodsScreen = ({navigation}) => {
   const supplierId = navigation.getParam('supplierId', '')
   // 初始化
   const [searchGoods, dispatch_searchGoods] = useReducer(reducer, {
        filterData: {
            areaId: areaId,
            supplierId: supplierId,
            parentCategoryId: parentCategoryId,
            longCode: parentCategoryId,
            vagueSearch: searchValue,
            startTime: '',
            endTime: '',
            sort: 'spu.CREATED desc'
        }
    })
   const { filterData } = searchGoods
    
   const goodsFetch = useCallback(
        params => {
            if (supplierId) {
                // 查询店铺里面商品
                return goodsByShop({ ...filterData, ...params })
            } else {
                // 查询全部商品
                return goodsQuery({ ...filterData, ...params })
            }
        },
        [searchGoods]
   )
   
   // 查询触发goods加载
   const handleSearchSubmit = text => {
        dispatch_searchGoods({
            type: 'update',
            payload: {
                filterData: { ...filterData, vagueSearch: text }
            }
        })
   }
   
   return (
       <Goods
          fetch={goodsFetch}
          onEndReachedThreshold={0.2}  // FlatList 参数
       />
   )
}

笔记与心得
记录自己在前端开发中碰到的事物。

英语不擅长的前端工作者

620 声望
20 粉丝
0 条评论
推荐阅读
给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.5k

封面图
你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.6k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图
大前端必备书籍
为了方便前端开发者系统学习前端知识,搜集了前端系列电子书,帮助开发者系统梳理知识体系,深入理解前端技术。更多书单请关注Github[链接] 。CSS权威指南(第四版)上册百度云CSS权威指南(第四版)下册百度云CSS揭...

码出世界13阅读 1.4k

【WebRTC 跨端通信】React + React Native 双端视频聊天、屏幕共享
之前介绍过 WebRTC,简单来说它是一个点对点的实时通讯技术,主要基于浏览器来实现音视频通信。这项技术目前已经被广泛应用于实时视频通话,多人会议等场景。

杨成功12阅读 1.6k评论 1

封面图
前端性能优化到底该怎么做(上)— 开门见山
前端性能优化 又是个听起来很高大上的词,确实是的,因为它需要 高在性能,大在范围,所幸很多大佬都已经输出了很多高质量的内容供大家参考,作者最近也在学习和了解这方面的内容,对如下文中的一些理解若有不当...

熊的猫10阅读 2.1k

封面图
如何使用 React 和 Monaco Editor 实现 Web 版 VSCode?
本项目是 React 基于 Monaco Editor 实现的 Web VSCode Demo,它的主要功能是允许在浏览器中编写 TypeScript/JavaScript 并直接运行,除此之外,它还包含如下功能:

破晓L6阅读 1.6k

英语不擅长的前端工作者

620 声望
20 粉丝
宣传栏