随笔分类 - React
tsconfig.json jsx为react-jsx React中提示xxxx不能用作JSX组件
摘要:tsconfig.json jsx为react-jsx React中提示xxxx不能用作JSX组件 产生原因:TypeScript 与 @types/react 版本不适配 版本对照表 https://www.npmjs.com/package/@types/react?activeTab=vers
TS 踩坑笔记: 箭头函数添加泛型报错(Error: JSX element ‘T’ has no corresponding closing tag.ts(17008))
摘要:前言 今天给大家分享一个在 React 项目中使用 TypeScript 遇到的错误 项目背景 React + TS 的项目配置,项目中关于 React 组件的使用 .tsx 后缀,其他单纯的文件使用 .ts 后缀 问题描述 在 React 组件附近定义泛型的箭头函数时产生 TS 报错警告,原本以为
React-router v6 路由总结
摘要:React-router v6 路由总结 组件 BrowserRouter:整个前端路由以 history 模式开始,包裹根组件 HashRouter:整个前端路由以 hash 模式开始,包裹根组件 Routes:类似于 v5 版本的 Switch,主要是提供一个上下文环境 Route:在 Rout
深入认识setState
摘要:深入认识React类组建修改状态-setState setState,它对状态的改变,可能是异步的; 如果改变状态的代码处于HTML元素事件中,则其是异步的,否则是同步 如果遇到某个事件中,需要同步调用多次,需要使用的函数方式得到最新状态。 最佳实践 把所有的setState当作是异步的。 永远不要
Mobx
摘要:Mobx解决的问题 React的数据管理,除了redux之外,一个新的状态管理方案mobx 传统React使用的数据管理库为Redux。Redux要解决的问题是统一数据流,数据流完全可控并可追踪。要实现该目标,便需要进行相关的约束。Redux由此引出了dispatch action reducer等
React项目中使用装饰器报错
摘要:在初次使用React 的装饰器时,第一次在项目中使用 @会报错,原因是react默认是不支持装饰器的,所以才会报错,所以是需要做一些配置来支持装饰器。 安装插件 yarn add -D react-app-rewired customize-cra yarn add -D @babel/core @
redux-thunk与redux-promise
摘要:redux-thunk与redux-promise redux-thunk与redux-promise都是一个中间件,目的:用来处理redux中的复杂逻辑,比如异步请求; redux-thunk 用法: store里面提供了applyMiddleware方法来在初始化store的时候加载中间件 //
React团队开发-样式冲突
摘要:Css module 在React多人开发中 css中的类肯定会发生冲突 如果每个页面的样式文件加上.module(文件名.module.scss)那么就会避免冲突(原理是将模块的类和id后面会随机生成一些字符串 防止避免冲突) 我们如何获取到那个随机的类呢 例如A页面 目录结构 a -> a.mo
ReactRouter-路由拦截
摘要:路由拦截 应用场景:鉴权,当用户进入到需要授权的组件时,这时候进行拦截,判断用户是否授权,如果授权则放行,正常跳转,如果非授权则重定向授权页面。 举个栗子 import React from 'react' import { BrowserRouter, HashRouter, Redirect,
ReactRouter-参数传递与获取参数
摘要:参数传递与获取参数 1. 动态路由传参 * 前提配置路由,留好占位 // 1.配置占位 <HashRouter> <Switch> <Route path="/xxx/:id"></Route> //留好占位 </Switch> </HashRouter> // 2.参数传递 import useH
ReactRouter-路由模式
摘要:路由模式 BrowserRouter与HashRouter BrowserRouter 没有#的路径 HashRouter 有#路径 举个栗子 import React from 'react' import { BrowserRouter, HashRouter, Redirect, Route,
React反向代理-跨域
摘要:反向代理 目的:解决跨域问题 在src目录下新建一个setupProxy.js const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use(
useReducer+useContext
摘要:useReducer+useContext = 全局状态管理 类似于vuex, 这样的意义是将所有组件的状态都挂载到外部,即组件内是无状态的。 举个栗子useReducer import React, { useReducer } from 'react' // 1. 引入useReducer //
useContext(减少组件层级)
摘要:useContext 应用场景:非父子组件通信,使用 const GlobalContext = React.createContext() // 创建供应商 供应商提供数据 // App组件提供数据 <GlobalContext value={{ test: "这是一个测试数据" }}></Glo
React useRef
摘要:useRef 应用场景:绑在DOM上,绑在组件上,保存临时变量永远不丢失 举个栗子 import React, { useState,useRef } from 'react' export default function App() { const [count, setCount] = use
useCallback记忆函数与useMemo记忆组件
摘要:useCallback记忆函数 目的:缓存函数,优化代码 防止因为组件重新渲染,导致方法被重新创建,起到缓存作用,只有第二个参数变化了,才重新声明一次。 举个栗子 var handleClick = useCallback(()=> { console.log(name) }, [name]) //
Reack hooks useEffect 总结
摘要:useEffect 总结 特性 参数必须是一个回调函数与一个数组 组件首次加载会执行一次useEffect的回调,之后依赖的值更新则会执行useEffect中的回调。 如果第二个参数是一个空数组则意味着=>空数组不依赖任何东西,所以只会执行一次类似类组件中的componentDidMounted 可
React中性能优化的方案
摘要:shouldComponentUpdate 控制组件自身或子组件是否需要更新,尤其在子组件非常多的情况下,需要进行优化。 PureComponent PureComponent会帮你 比较新Props跟旧的Props,新的State和就的State(值相等,或者对象含有相同的属性、且属性值相等等),
React类组件的生命周期
摘要:初始化阶段的生命周期只会执行一次钩子函数,运行中的阶段会随着状态的改变或父组件变更了属性而执行钩子函数,销毁阶段会随着组件在DOM数上被移除而触发的钩子。 具体看文件中的代码:https://gitee.com/manongquan02/react_test.git 新的生命周期 getDerive
React 组件通信总结
摘要:React 组件通信总结 父子通信 传递数据(父传子)与传递方法(子传父) /* * @Author: HuangBingQuan bingquan111@qq.com * @Date: 2022-11-21 16:02:17 * @LastEditors: HuangBingQuan bingqu