react自动化测试
安装yarn add @testing-library/react-hooks msw -D 使用在src下面新建一个文件夹__test__(双下划线) 传统的单元测试传统的单元测试通常来测一个方法或者函数：
Read morereact一些可复用的方法
记录一下碰到的可复用的方法获取url指定pathnmae后面的参数形如http://localhost:3000/projects/1/kanban 1234567891011121314151617// 根据url后面的参数去请求， hook获取idexport const useProjectIdInUrl = () => { const { pathname } = useLocation(); const id = pathname.match(/projects\/(\d+)/)?.[1]; // ["projects/1", "1", index: 1, input: "/projects/1/kanban", groups: undefined] [1] return..
Read moreReact跨组件状态管理总结
跨组件状态管理总结小场面状态提示 / 组合组件 缓存状态react-query 客户端状态url / redux / context
Read more如何正确的写一个react页面
如何正确的写一个react页面前言react实在是太灵活，导致我学习的时候一直找不到一个最佳实践，但还是摸索出了一点自己的写法，记录一下。 流程先在screens文件夹下创建一个路由页面kanban.tsx，随便写一点东西： 12345678import React from "react";import { useDocumentTitle } from "../../utils/index";export const KanbanScreen = () => { useDocumentTitle("看板列表"); return <h1>看板</h1>;}; 接着定义一下这个页面所需要的基础类型，在types文件夹下新建一个kanban.ts： 12345export ..
Read morereact-query实现乐观更新
什么是乐观更新In an optimistic update the UI behaves as though a change was successfully completed before receiving confirmation from the server that it actually was - it is being optimistic that it will eventually get the confirmation rather than an error. This allows for a more responsive user experience. react-query实现乐观更新123456789101112131415161718192021222324..
Read more用react-query来获取、更新、缓存远程数据
react-query先上个链接react-query官方文档 这是一个适用于react hooks的请求库。 这个库将帮助你获取、同步、更新和缓存你的远程数据， 提供两个简单的 hooks，就能完成增删改查等操作 安装yarn add react-query 配置一些配置参数 staleTime 重新获取数据的时间间隔 默认0 cacheTime 数据缓存时间 默认 1000 * 60 * 5 5分钟 retry 失败重试次数 默认 3次 refetchOnWindowFocus 窗口重新获得焦点时重新获取数据 默认 false refetchOnReconnect 网络重新链接 refetchOnMount 实例重新挂载 enabled 如果为“false”的化，“useQuery”不会触发，需要使用其..
Read more
用url参数来管理项目模态框状态
useUrlQueryParam先是封装的一个hook，用于将url中携带的参数给取出来并变成对象： 12345678910111213141516171819202122232425import { useMemo } from "react";import { URLSearchParamsInit, useSearchParams } from "react-router-dom";import { cleanObject } from "./index";export const useUrlQueryParam = <K extends string>(keys: K[]) => { const [searchParam, setSearchParam] = useSearch..
Read more
react-redux
redux安装yarn add react-redux @reduxjs/toolkit yarn add @types/react-redux -D redux基本使用在src目录下新建一个stroe文件夹 store/index.tsx: 123456789101112131415import { configureStore } from "@reduxjs/toolkit";import { projectListSlice } from "../screens/project-list/project-list.slice"; // 这是一个切片export const rootReducer = { projectList: projectListSlice.reducer,};export ..
Read more
React惰性初始化和如何保存函数状态
背景今天在做一个功能的时候，需要用到useState保存一个函数，并setState去改变这个函数的状态，初始代码如下： 12345678910111213141516171819202122import "./styles.css";import React from "react";export default function App() { const [callback, setCallback] = React.useState(() => { return "init"; }); console.log(callback); return ( <div className="App"> <button onClick={() ..
Read moreuseMemo和useEffect
背景12345678910111213141516171819202122232425262728import React, {Fragment} from 'react'import { useState, useMemo } from 'react'// 产品名称列表const nameList = ['apple', 'peer', 'banana', 'lemon']const example = (props) => { // 产品名称、价格 const [price, setPrice] = useState(0) const [name, setName] = useState('apple') // 假设有一个业务函数 获取产品的名字 functio..
Read more