一枚努力学习前端的程序媛，之前都在自己的博客： Study Of Toast (breadfruit.github.io)(国内站点上打卡，现在是到了第17期了，每周阅读刷刷

Tips

为什么react-query好？

近期有个需求是需要进行无限双向链表进行查询。

这次我们就只讨论useInfiniteQuery() Hook。

可以看到官方对于useInfiniteQuery() Hook导出的对象：

 const {
   fetchNextPage,
   fetchPreviousPage,
   hasNextPage,
   hasPreviousPage,
   isFetchingNextPage,
   isFetchingPreviousPage,
   ...result
 } = useInfiniteQuery(queryKey, ({ pageParam = 1 }) => fetchPage(pageParam), {
   ...options,
   getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
   getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
 })

那么这些导出的对象好在哪里？

我们不需要手动去维护一些服务端的状态。

Before：

week17.1.png

After：

随后我们可以通过：

isFetching: 判断是否在加载

isLoading: 判断是否在请求

isFetchingNextPage：判断是否在请求上一页的数据。

<div>{isFetching && !isFetchingNextPage ? Loading : null}</div>

2.对于分页的数据如何处理和拼接？

  const list = useMemo(() => {

    return (

      data?.pages.reduce((*pre*, *cur*: getCycleChatRecordGetProps) => {

        return pre.concat(cur.data)

      }, [] as getCycleChatRecordGetProps['data'][]) ?? []

    )

  }, [data])

对于多次触发下拉刷新，上拉加载怎么办？

钩子中有个isFetchingNextPage和 isFetchingPreviousPage可以对当前请求分页数据进行监听，我们可以通过判断当前的状态进行请求。

isFetchingNextPage ： boolean true则为请求中;false反之。

js之赋值会怎么样？

let obj = {name: 'ds', age: 23}; 
obj = {name: 'hahah'}; 
console.log(obj.name, obj.age);
// hahah undefined

Apifox

这是一个API 文档、API 调试、API Mock、API 自动化测试的工具。

本地 mock 服务与云端 mock 服务的区别：

当你在运行 Apifox 客户端软件时，可以使用本地 mock 服务（只有本地电脑可以访问）

当你在运行 Apifox web 端时，可以使用云端 mock 服务。（大家都可以访问到的url）

对于前端开发开发者来说，mock数据是必备的。

其中对于这个工具，具体可以参考官网文档进行学习。

这次我就简单的介绍一下

mock数据的一些亮点：

Apifox 内置智能 Mock 功能。如：名称包含字符串image的string类型字段，自动 mock 出一个图片地址 URL
除了内置 mock 规则，用户还可以自定义规则库，满足各种个性化需求。支持使用 正则表达式、通配符 来匹配字段名自定义 mock 规则。

其中的语法：

@city @cname..

使用脚本

Apifox 脚本语法100%兼容 Postman脚本语法，Postman 脚本可以无缝迁移到 Apifox。

这次我简单的使用脚本实现mock分页数据

首先我们要明确的分页需要：

请求参数：

参数名	类型	位置
page	Number	Query
page_size	Number	Query

返回响应

{
    "data": {
        "page": 2,
        "pageSize": 4,
        "total": 100,
        "totalPage": 26,
        "list": [
            {
                "id": "110000200807212568",
                "name": "蔡娜",
                "number": "P202203@number",
                "email": "c.pchrk@hratrvve.hn",
                "city": "克孜勒苏柯尔克孜自治州"
            }...
        ]
    },
    "page": 2,
    "total": 120
}

脚本(此处脚本仅用于 高级mock 的 Mock 自定义脚本，不能用于前后置脚本中。)

官网

// 利用智能mock库的api
var MockJs = require('mockjs');
let originList = []
const count = 100
for (let i = 0; i < count; i++) {
    originList.push({
        id: MockJs.mock('@id'),
        name: MockJs.mock('@cname'),
        number: 'P202203' + MockJs.mock('@number'),
        email: MockJs.mock('@email'),
        city: MockJs.mock('@city'),
    })
}

let pageSize = parseInt(fox.mockRequest.getParam('page_size'))
let page = parseInt(fox.mockRequest.getParam('page'))
let total = originList.length
let len = total / pageSize
const totalPage = Number.isInteger(len) ? len + 1 : len
const list = originList.slice((page - 1) * pageSize, page * pageSize)

const data = {
    page,
    pageSize,
    total,
    totalPage,
    list
}

// 获取智能 Mock 功能自动 Mock 出来的数据
var responseJson = fox.mockResponse.json();

responseJson.data = data;

// 修改 responseJson 里的分页数据
// 将 page 设置为请求参数的 page
responseJson.page = page;
// 将 total 设置 120
responseJson.total = 120;

// 将修改后的 json 写入 fox.mockResponse
fox.mockResponse.setBody(responseJson);

React-Render

使用 useCallback 要小心 dep 更新导致返回的函数更新。

useCallback(() => {
  setCount(count+1)
}, [count])

此时 count 更新会导致 useCallback 返回新的匿名函数.

useCallback((preCount) => {
  setCount(preCount+1)
}, [])

跟我一起每周打卡[17期]：TTTT计划