react路由（标签属性、Hooks、路由跳转、传值、守卫、懒加载）总结大全
常用总结
一、基本的
1、BrowserRouter
表示一个路由的跟容器，将来所有跟路由相关的东西，都要包裹在其中
2、HashRouter
表示一个路由的跟容器，将来所有跟路由相关的东西，都要包裹在其中
3、Route
具有两种身份：
1.它是一个路由匹配规则；
2.它是一个占位符，表示将来匹配到的组件都放到这个位置 ( 类似 vue中 ...
干货满满-原来这才是hooks-React Hooks使用心得
序言
---最后有招聘信息哦～React是一个库，它不是一个框架。用于构建用户界面的Javascript库。这里大家需要认识这一点。react的核心在于它仅仅是考虑了如何将dom节点更快更好更合适的渲染到浏览器中。它本身提供的涉及框架的理念是不多的。class组件是如此，hooks组件也是如此。
ClassComponent
我们先回顾一下，这是一个r ...
React中的PropTypes详解
什么是prop-types？prop代表父组件传递过来的值，types代表类型。简单来说就是用来校验父组件传递过来值的类型
propTypes用来规范props必须满足的类型，如果验证不通过将会有warn提示。
React PropTypes的种类有
1 React.PropTypes.array // 队列
2
3 React.PropTypes.bool.isRequired // Boolean ...
从零开始使用 webpack5 搭建 react 项目
本文的示例项目源码可以点击 这里 获取
一、前言
webpack5 也已经发布一段时间了，其模块联邦、bundle 缓存等新特性值得在项目中进行使用。经过笔者在公司实际项目中的升级结果来看，其提升效果显著，热更新时间由原来的 8s 减少到了 2s，会极大的提升开发幸福感。除此之外，webpack5 也带来了更好的 tree shaking 算法， ...
React组件复用的方式
React组件复用的方式
现前端的工程化越发重要，虽然使用Ctrl+C与Ctrl+V同样能够完成需求，但是一旦面临修改那就是一项庞大的任务，于是减少代码的拷贝，增加封装复用能力，实现可维护、可复用的代码就变得尤为重要，在React中组件是代码复用的主要单元，基于组合的组件复用机制相当优雅，而对于更细粒度的逻辑(状态逻辑、行 ...
React-Router路由配置
React-Router
参考学习地址: https://reactrouter.com/web/guides/quick-start
// 5 的版本主要是针对 react Hook 做更好的支持
安装
npm install react-router-dom --save
路由的作用
单页面应用（SPA），路由跳转，切换显示视图
HashRouter与BrowserRouter区别
BrowserRouter：
原理是H5的history API，IE9及以 ...
react中React.createRef()的使用
react中React.createRef()的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script type='text/javascript' src="./react.development.js"></script>
<script type='text/javascript' src="./react-dom.development.js"></script>
<script type='text/ ...
基于Abp React前端的项目建立与运行——React框架分析
基于Abp React前端的项目建立与运行
目录基于Abp React前端的项目建立与运行1 Abp项目配置2 运行WebApi后端项目2.1 创建C3D数据库，并且将数据库对应链接字符串替换2.2 建立数据库进行数据迁移2.3 运行WebApi项目3 运行React前端项目3.1 利用yarn包安装工具3.2 运行React项目3.3 使用React客户端的意义4 React 前端项目架构 ...
React使用less
React使用less
Tags: React, 踩坑
日期: 2021/01/22
使用create-react-app脚手架搭建的react项目，会自带css和sass，但是没有less,如果在项目中需要使用less，需要进行下载并进行一些配置。
首先需要暴露Webpack配置文件,使用命令npm run eject命令释放,找到webpack.config.js文件
搜索Sass找到如下代码
// style files reg ...
react项目实现国际化i18n
本篇教程将从零开始实现一个支持多语言功能的demo
0x00 准备
1. 通过create-react-app 新建项目
npx create-react-app my-app
2. 安装i18n所需的库
npm install react-i18next i18next i18next-browser-languagedetector i18next-http-backend --save
其中，i18next-browser-languagedetector库用于添加语言切换功能，可 ...
React中的合成事件
React中的合成事件
React自己实现了一套高效的事件注册、存储、分发和重用逻辑，在DOM事件体系基础上做了很大改进，减少了内存消耗，简化了事件逻辑，并最大程度地解决了IE等浏览器的不兼容问题。
描述
React的合成事件SyntheticEvent实际上就是React自己在内部实现的一套事件处理机制，它是浏览器的原生事件的跨浏览器包装 ...
react-dnd 拖拽排序
开始
最近刚刚做完自定义表单的组件，分享一下拖拽排序。
效果图
react-dnd使用说明
必须是这样格式的，不然会报 找不到上下文
<DndProvider backend={HTML5Backend}>
<useDrop>
<useDrag></useDrag>
</useDrop>
</DndProvider>
准备工作
官方文档
https://react-dnd.github.io/react-dnd/about
安装react ...
React：React Testing Library（RTL）教程
> 原文链接：https://www.robinwieruch.de/react-testing-library
第一次翻译文章，可能会难以阅读，建议英文过关的都阅读原文
Kent C. Dodds的 React Testing Library (RTL) 是Airbnb的 Enzyme 的替代品。Enzyme 为测试 React 组件提供了很多实用的工具，而 React Testing Library（简称RTL）则是后退一步并提出疑问： ...
React + Sass
Sass很多公司面试都喜欢问这个，今天就写一篇简单的sass安装+使用过程技术栈很简单，就React + Sass，本文着重讨论sass不整太多东西
创建项目：create-react-app react-sass
安装依赖：npm install --save-dev node-sass
create-react-app 创建的react项目默认就是支持Sass的，
使用只要安装node-sass即可使用 ...
「译」Blazor VS React / Angular / Vue.js
原文作者: Christian Findlay
原文链接： https://christianfindlay.com/2020/06/04/blazor-vs-react-angular-vue-js/
Blazor是一项新的Microsoft技术，允许开发人员使用C＃为浏览器编写代码, 本文将Blazor与其他三个常见SPA框架进行了比较：React，Angular和Vue.js, JavaScript是当前基于浏览器的单页应用程序（SPA）最 ...
React函数式组件值之useEffect()
Effect Hook 可以让你在函数组件中执行副作用操作，这里提到副作用，什么是副作用呢，就是除了状态相关的逻辑，比如网络请求，监听事件，查找 dom。
可以这样说，在使用了useState或是useEffect这样的hooks之后，每次组件在render的时候都生成了一份本次render的state、function、effects，这些与之前或是之后的ren ...
React函数式组件值之useState()
react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他 react 特性，而不仅限于 class 组件。react hooks 的出现，标示着 react 中不会在存在无状态组件了，只有类组件和函数组件。
状态是隐藏在组件中的信息，组件可以在父组件不知道的情况下修改其状态。相比类组件，函 ...
create-react-app 基于ts项目，使用react-router-dom搭建项目
准备工作
来个react项目 create-react-app 基于TS的项目
ts项目安装后 删除node_modules，重新 yarn install， 不然jsx会报错
安装React-router-dom
yarn add react-router-dom
npm install --save react-router-dom
npm i --save-dev @types/react-router-dom
React-router-dom + React-router 功能对比
React-route ...
react增删改查
react增删改查
import React, { Component } from 'react'
import axios from 'axios'
export default class List extends Component {
constructor() {
super()
this.state = {
list: [],
username: "",
age: ""
}
}
componentDidMount() {
...
React高阶组件中使用React.forwardRef的技巧
之前使用react.forwardRef始终无法应用于react高阶组件中，最近终于捣鼓出来了，于是记录下来。关键点就是React.forwardRef的API中ref必须指向dom元素而不是React组件。
一、React.forwardRef使用示例
下面就是应用到React组件的错误示例：
const A=React.forwardRef((props,ref)=><B {...props} ref ...
