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如何在React中封装一个组件
在React中封装一个组件背景最近在学习React，看了许多教学视频，今天学到了一个封装组件较完善的方法，特此记录下来。 我们知道select标签经常有显示的问题，例如id和name对应不上，原因在于value属性的值： 12345678910111213141516<Select value={param.personId} onChange={(value) => setParam({ ...param, personId: value, }) } > <Select.Option value={""..
Read morereact-router
react-router安装yarn add react-router@6 react-router-dom@6 yarn add history 导入123import { Route, Routes } from "react-router";import { BrowserRouter as Router } from "react-router-dom";import { ProjectScreen } from "screens/project"; 基本使用example1123456789101112<Router> <Routes> <Route path={"/projects"} element={<ProjectLis..
Read more
TypeScript-as const应用
as const在项目中遇到了一个问题: 这个函数签名简直莫名奇妙 后来发现加上as const 变得顺眼多了 那as const究竟是啥? 看一个例子: 1const a = ["jack", 1, { id: "5" }]; a是一个元素为string或者number或者含有id对象的数组，这明显与我们的预期不符，因为我们想要一个元素为string | number | object的数组，主要原因是ts中的数组里面的类型必须一致，所以他会解析成上面那种情况。 如果我们加上as const呢? a变成了一个数组，里面第一个元素是’jack’，第二个是1，第三个是对象 as const主要用在数组中，在编写ts代码时，灵活运用as const能解决一些有趣的问题。
Read moreCss in Js-emotion
emotion的安装yarn add @emotion/react @emotion/styled emotion的基本使用12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152import styled from "@emotion/styled"; // 引入emotionimport logo from "assets/logo.svg"; // 引入图片import left from "assets/left.svg";import right from "assets/right.svg";export const UnauthenticatedApp = ()..
Read moreReact中的图片
React中图片使用方法img123import softwareLogo from 'assets/software-logo.svg'<img src={softwareLogo} alt="" /> 优点是使用方便，但不好规定样式和图片大小 svg123import { ReactComponent as SoftwareLogo } from "assets/software-logo.svg";// 将图片作为一个组件引入<SoftwareLogo width={'18rem'} color={'rgb(38, 132, 255)'}></SoftwareLogo> 轻易的就能改变样式
Read more
TypeScript如何合理处理对象
TypeScript中的object出现的错误object是个很基础也很常见的引用类型，比如我用typescript定义一个object类型的变量 1let a: object; 乍一看没什么问题，但却_暗藏玄机_ 比如我现在想定义一个函数，它能判断对象哪些属性是number类型，然后返回一个由这些属性组成的新的对象: 1234567891011const isNumber = (object: object) => { // 在一个函数里，改变传入的对象本身是不好的 const result = { ...object } Object.keys(result).forEach(key => { const value = result[key]; ..
Read moreTypeScript进阶之封装axios
TypeScript对axios的封装项目中用到了typescript和axios，对axios进行封装: request.js： 12345678// 引入axios模块 用{}引入的表示类型import axios, { AxiosInstance, // axios实例 AxiosRequestConfig, //axios请求config AxiosPromise, // axios返回的类型 AxiosResponse, // axios返回的数据} from "axios";const apiBaseUrl = process.env.REACT_APP_API_URL; 根据服务端返回的数据格式对返回数据进行约束: 12345export interface ResponseData..
Read more
TypeScript进阶之utility types
TypeScript utility types下面列举了一些项目中常用的typescript工具 1、Partial构造一个所有属性都Type设置为optional的类型。该实用程序将返回一个表示给定类型的所有子集的类型，所以所有属性都会加上一个undefined example:12345678export interface User { id: string; name: string; token: string;}let part: Partial<User> = {id: '1'}let part: Partial<User> = {id: undefined} 2、Required构造一个类型，该类型由Typeset的所有属性设置为required..
Read more