React
aminwangaa
终究是走上了勤能补拙的路~~~
展开
-
react-router v6 轻使用
路由使用App.tsximport { BrowserRouter as Router } from "react-router-dom";import { Suspense } from 'react'; // 配合动态加载的路由const App = () => { return ( <Router> <Suspense fallback={<div>222</div>}> {/* 自定义的路原创 2022-01-20 17:36:53 · 431 阅读 · 0 评论 -
react项目使用husky配合commitlint、prettier、eslint、stylelint
husky官网地址初始化huskynpx husky-init && npm install # npmnpx husky-init && yarn # Yarn 1yarn dlx husky-init --yarn2 && yarn # Yarn 2它将设置husky,修改package.json并创建一个可以编辑的pre-commit钩子。默认情况下,当您提交时,它将运行npm test。要添加另一个钩原创 2021-12-16 16:11:20 · 939 阅读 · 1 评论 -
Recoil初探
第一步 引入Recoil// 在App.tsx文件中 使用RecoilRoot包裹页面内容import { RecoilRoot } from 'recoil'<RecoilRoot> <Provider {...stores}> <Layout> <Suspense fallback={<Loading></Loading>}> <Router> <原创 2021-10-12 15:23:35 · 393 阅读 · 0 评论 -
debounce useDebounce throttle useThrottle练习
健忘 健忘 健忘useDebounceconst useDebounce = <T>(value: T, interval: number = 200) => { const [debounceValue, setDebounceValue] = useState<T>(value) useEffect(() => { const timer = setTimeout(() => { setDebounceValue(() => va原创 2021-01-05 11:16:04 · 215 阅读 · 0 评论 -
Hooks再学习
memo作为子组件时 用memo包上组件,该组件依赖的props没有发生改变时,该组件不会重新渲染如果不用memo,父组件每一次重新渲染的时候都会让这个子组件跟着渲染一遍import React, { useState, useMemo, useEffect, useCallback, memo } from "react"const Counter = memo((props) => { const {count, onClick, name} = props console.log原创 2020-12-22 18:08:10 · 129 阅读 · 0 评论 -
debounce、throttle、useDebounce、useThrottle
debounceconst debounce = (fn: Function, interval: number) => { let timer = null if (typeof fn != 'function') { throw new TypeError(FUNC_ERROR_TEXT); } return function(...args) { if (timer) { clearTimeout(time原创 2020-12-17 13:53:03 · 1567 阅读 · 0 评论 -
React Context
为什么想用Context在不使用Context之前,数据通过props传递,如果层级多,需要层层传递到最终层,数据处理上比较繁琐import React from 'react';class Parent extends React.Component{ constructor(props) { super(props); this.state ...原创 2019-10-23 17:56:53 · 172 阅读 · 0 评论