【React.js点滴知识 】
文章平均质量分 77
React学习
barnett_y
成功道路并不拥挤,因为坚持的人不多。。。
展开
-
React全家桶之整合redux-persist
React全家桶之整合redux-persist原创 2023-02-22 15:41:29 · 570 阅读 · 1 评论 -
React修改Antd组件样式的方法
React修改Antd组件样式的方法原创 2023-02-09 09:39:59 · 4011 阅读 · 2 评论 -
web项目屏幕适配的两种方案
web适配转载 2022-09-29 09:10:50 · 1224 阅读 · 2 评论 -
从0到1开发一个React组件库
从0到1开发一个React组件库转载 2022-09-18 08:33:15 · 962 阅读 · 0 评论 -
react中 keep-alive
react中如何实现 keep-alive 效果转载 2022-09-01 09:30:35 · 6652 阅读 · 1 评论 -
前端(React、Vue)多环境配置
在一个正常的迭代周期内,一般会经历开发、测试、生产3个阶段,每个阶段都需要一个独立的环境,再加上某些特殊需求需要增多几个环境(如嵌入到其他应用下、迭代有新的阶段),如果没有一个好的多环境管理方案,那么就会出现代码强耦合、切环境操作复杂等问题...转载 2022-07-23 14:05:19 · 1756 阅读 · 0 评论 -
Vue和React对比学习之组件传值(Vue2 12种、Vue3 9种、React 7种)
简介Vue和React是目前前端最火的两个框架。不管是面试还是工作可以说是前端开发者们都必须掌握的。今天我们通过对比的方式来学习Vue和React的组件传值这一部分。本文首先讲述Vue2、Vue3、React的组件传值方式,然后具体介绍了每种传值的应用场景以及具体的使用。最后对比总结了Vue和React在组件传值这部分的相同点和不同点。希望通过这种对比方式的学习能让我们学习的时候印象更深刻,希望能够帮助到大家。Vue2Vue2 组件通信共有12种props $emit /转载 2022-05-30 08:57:48 · 534 阅读 · 0 评论 -
Vue和React对比学习之Ref和Slot
简介Vue和React是目前前端最火的两个框架。不管是面试还是工作可以说是前端开发者们都必须掌握的。今天我们通过对比的方式来学习Vue和React的Ref和Slot。本文首先讲述了Vue和React各自支持的Ref和Slot以及具体的使用,然后通过对比总结了它们之间的相同点和不同点。希望通过这种对比方式的学习能让我们学习的时候印象更深刻,希望能够帮助到大家。RefRef可以帮助我们更方便的获取子组件或DOM元素。当我们使用ref拿到子组件的时候,就可以使用子组件里面的属性和方法了原创 2022-05-30 08:52:20 · 439 阅读 · 0 评论 -
React通过redux-persist持久化数据存储
在React项目中,我们经常会通过redux以及react-redux来存储和管理全局数据。但是通过redux存储全局数据时,会有这么一个问题,如果用户刷新了网页,那么我们通过redux存储的全局数据就会被全部清空,比如登录信息等。这个时候,我们就会有全局数据持久化存储的需求。首先我们想到的就是localStorage,localStorage是没有时间限制的数据存储,我们可以通过它来实现数据的持久化存储。但是在我们已经使用redux来管理和存储全局数据的基础上,再去使用localStorage来读原创 2022-05-04 09:10:11 · 1300 阅读 · 0 评论 -
react-redux 中使用useSelector、useDispatch
1. react-redux 之 Hooks apiHooks 提供了很多好用的api,甚至很多人认为Hooks的useReducer等Api已经可以取代Redux了。其实Hooks和Redux的使用场景并不冲突,而且可以互相借鉴,react-redux(7.1)也引入了Hooks风格的Api。1.1 useState 的缺点useState和useReducer是Hooks中最常用的Api,适合用来进行简单的状态管理,但也都有一些无法满足的需求useState可以用最简单的方式更新原创 2022-05-01 22:50:02 · 6997 阅读 · 0 评论 -
react hooks 和 react-redux hooks 应用场景
目前 ,Hooks 应该是 React 中最火的概念了,在阅读这篇文章之前,希望你已经了解了基本的 Hooks 是什么?下面就介绍一下简单的使用场景react hooksuseStateuseState是react自带的一个hook函数,它的作用就是用来声明状态变量。 useState这个函数接收的参数是我们的状态初始值(initial state), 它返回了一个数组,这个数组的第[0]项是当前当前的状态值, 第[1]项是可以改变状态值的方法函数。import React, { u原创 2022-05-01 22:44:26 · 1073 阅读 · 0 评论 -
React useImperativeHandle
使用函数时组件的时候,ref转发是必须要了解的概念// 实现 ref 的转发const FancyInput = React.forwardRef((props, ref) => ( <div> <input ref={ref} type="text" /> <div>我是自定义的函数式组件</div> </div>));const App = () => { const ref =原创 2022-04-04 08:39:40 · 4125 阅读 · 1 评论 -
useRef 简单易懂解析
翻译自:beta.reactjs.org/learn/refer…当你希望组件“记住”一些信息,但是你不希望这些信息触发重新 render 的时候,你可以使用 ref,它像一个秘密的“口袋”,用于在组件中存储信息。系列文章useRef 简单易懂解析(一)useRef 的使用 useRef 简单易懂解析(二)useRef 的例子 useRef 简单易懂解析(三)ref 和 state 的对比 useRef 简单易懂解析(四)useRef 的原理 useRef 简单易懂解析(五)ref 的最转载 2022-04-03 11:01:09 · 1429 阅读 · 0 评论 -
React.memo第二个参数作用
使用 React.memoReact.memo 是 React 16.6 新的一个 API,用来缓存组件的渲染,避免不必要的更新,其实也是一个高阶组件,与 PureComponent 十分类似,但不同的是, React.memo 只能用于函数组件 。基本用法import { memo } from 'react';function Button(props) { // Component code}export default memo(Button);高级用法默认情...原创 2022-03-30 15:16:31 · 1949 阅读 · 0 评论 -
使用React Hooks模拟生命周期
前言在 React 16.8 之前,函数组件只能是无状态组件,也不能访问 react 生命周期。hook 做为 react 新增特性,可以让我们在不编写 class 的情况下使用 state 以及其他的 react 特性,例如生命周期。接下来我们便举例说明如何使用 hooks 来模拟比较常见的 class 组件生命周期。constructorclass 组件class Example extends Component { constructor() { sup原创 2022-03-30 09:33:54 · 6327 阅读 · 0 评论 -
error: Property ‘setState‘ does not exist on type ‘Home‘
问题描述:我在react中用typescript时,定义一个Home组件,然后在组件里用setState时会有这样一个报错:(如图)Property 'setState' does not exist on type 'Home'分析解决: 报错说我的Home组件上不存在setState属性,但是我把文件的后缀名从‘.tsx’改成‘.jsx’就不报这个错了,推断是typescript的类型检查报的这个错,识别不了react组件就不认为这个class函数上有setState属性。安装一下re原创 2022-03-26 18:31:18 · 882 阅读 · 0 评论 -
react 判断是否登录,路由进行重定向
判断用户是否登录,从而进行路由的重定向。创建文件 “./component/AuthRoute/index.js” 导入import React, {useContext, createContext, useState} from "react";import { BrowserRouter as Router, Switch, Route, Link, //Redirect重定向组件 Redirect, useHistory,原创 2022-03-20 12:19:08 · 1799 阅读 · 0 评论 -
React进入项目,判断是否登录
1、封装一个AuthRouterimport React from 'react';import { Route, Redirect } from 'react-router-dom'; const DATA = { user: Storage.getStore('user') } const AuthRouter = (props) => { const { component: Component, needLogin } = props; if原创 2022-03-20 11:39:21 · 674 阅读 · 0 评论 -
使用cross-env添加环境变量
什么是process.env.NODE_ENVprocess.env.NODE_ENV应该是我们最熟悉的环境变量了,它经常出现在使用框架或者类库的时候,被用来区分不同的环境(开发,测试,生产等),以便我们进行相对应的项目配置,比如是否开启sourceMap,api地址切换等。那为什么process.env.NODE_ENV能用来区分环境呢?它是如何来的?先来看一下process和process.env的官方解释:processprocess 对象是一个 global (全局变量),提供有关信息原创 2022-03-06 09:13:15 · 6671 阅读 · 0 评论 -
react缓存页面
一 一切根源都从产品小姐姐无厘头需求开始最近在开发业务项目的时候,产品小姐姐突然来到我身边,然后就对着电脑一顿操作,具体场景大致是这样的。场景一:如上图所示,当在数万级别的数据中,选择一条,点击查看,跳转到当前数据的详情页,当点击按钮返回返回来,或者是浏览器前进后退等其他操作,返回到列表页的时候。要记录当前列表的位置。也就是要还原点击查看查看前的页面。但是当点击tab菜单按钮的时候,要清除页面信息。场景二:如上图所示,当我们编辑内容的时候,一些数据可能从其他页面获得,所以要求,无转载 2022-03-01 17:28:47 · 7222 阅读 · 3 评论 -
React 好用的工具库
俗话说的好 工欲善其事,必先利其器。笔者在开发 React 项目的时候,总结出一些很不错的 React 库,可以提高开发效率,满足业务需求,接下来将一一介绍它们。UI组件库 Ant Design要说 React 最受欢迎的 UI 组件库,那么我第一个想到的就是 Ant Design,Ant Design 提供了数十种常用的组件,比如 Button,Menu ,Table 等。Ant Design不仅功能强大,还配置灵活,深受广大 React 开发者的喜爱。而且在 github 上已经取得 74.原创 2022-03-01 16:59:24 · 1640 阅读 · 0 评论 -
React路由跳入新页面滚动条不在初始位置
如果旧路由页面有滚动条了,跳到新页面,其实是相当于把 div#root 里的内容替换了 而且协议页面中,数据是写死的,也就是说滚动条一直存在 如果协议数据是后端获取的,那跳转到协议页的时候,页面为空,滚动条消失,然后接口返回数据,渲染出来,滚动条就在初始位置// 解决 在新的协议页面加入componentDidMount() { window.scrollTo(0,0);}...原创 2022-02-25 15:11:09 · 1257 阅读 · 0 评论 -
React redux-persist持久化数据存储
在React项目中,我们经常会通过redux以及react-redux来存储和管理全局数据。但是通过redux存储全局数据时,会有这么一个问题,如果用户刷新了网页,那么我们通过redux存储的全局数据就会被全部清空,比如登录信息等。这个时候,我们就会有全局数据持久化存储的需求。首先我们想到的就是localStorage,localStorage是没有时间限制的数据存储,我们可以通过它来实现数据的持久化存储。但是在我们已经使用redux来管理和存储全局数据的基础上,再去使用localStorage来读原创 2022-02-24 16:07:18 · 1165 阅读 · 1 评论 -
React Hooks 避免的错误
今天来看看在使用React hooks时的一些坑,以及如何正确的使用避免这些坑。问题概览:不要改变 hooks 的调用顺序; 不要使用旧的状态; 不要创建旧的闭包; 不要忘记清理副作用; 不要在不需要重新渲染时使用useState; 不要缺少useEffect依赖。1. 不要改变 hooks 的调用顺序下面先来看一个例子:const FetchGame = ({ id }) => { if (!id) { return '请选择一个游戏'; }原创 2022-02-11 17:17:23 · 707 阅读 · 1 评论 -
在React中拥抱TypeScript
前言:嗯~~~ 毫不谦虚的说,这可能是全网最全的一篇在React中使用TypeScript的教程(ps:因为网上的资料我都有参考),全文大概1.7w字,基本上包含了你日常开发中常用的各种方法和技巧(敲重点:这是用于给有TypeScript基础但不会再项目中使用的同学快速上手的,大佬可以无视这一篇),而且基本上所有的案例代码你建一个基本的脚手架都能直接运行,方便你理解。如果对TS还不是很熟悉的话,可以先看我的另一篇文章 了不起的TypeScript另外,我主要参考的几篇文章放在了最后,有需要的可以转载 2022-02-10 19:19:03 · 2645 阅读 · 0 评论 -
Typescript+React hooks
看人家 Typescript和 React hooks耍的溜的飞起,好羡慕啊~????那来吧,这篇爽文从脑壳到jio干地教你如何使用这两大利器开始闪亮开发!✨课前预知????我觉得比较好的学习方式就是跟着所讲的内容自行实现一遍,所以先启个项目呗~npx create-react-app hook-ts-demo --template typescript复制代码在 src/App.tsx内引用我们的案例组件,在 src/example.tsx写我们的案例组件。???转载 2022-01-13 10:21:13 · 443 阅读 · 0 评论 -
掘金 2021 高赞 React 文章
「React 进阶」 React 全部 api 解读+基础实践大全(夯实基础 2 万字总结) 作者:我不是外星人 点赞 2556 收藏 3283 阅读 48506 分类 前端 长按识别二维码查看原文 https://juejin.cn/post/6950063294270930980 React 开发必须知道的 34 个技巧【近 1W 字】 作者:火狼 1 点赞 1724 收藏 2796 阅读 80144 分类 前端 长按识别二维码查看原文...转载 2022-01-11 17:31:32 · 497 阅读 · 0 评论 -
60+ 实用 React 工具库,助力你高效开发
最近看到一些实用的React工具库,总结了一下分享给大家,避免重复造轮子。希望对你有所帮助~一、基础1. React Infinite ScrollerReact Infinite Scroller 用于在React项目中无限滚动加载内容。npm地址:www.npmjs.com/package/rea…2. react-dndReact DnD是React和Redux核心作者 Dan Abramov创造的一组React 高阶组件,可以在保持组件分离的前提下帮助构建复杂的拖放接口。主要转载 2022-01-11 09:30:34 · 685 阅读 · 0 评论 -
React 性能优化
React 的工作流程是什么?我们可以在哪些阶段进行性能优化呢? 如果 React 项目中出现了卡顿,我们可以采用哪些性能优化技巧? 如何通过 React Profiler 定位性能问题?React Profiler 包含哪些阶段的信息?大纲本文分为三部分,首先介绍 React 的工作流,让读者对 React 组件更新流程有宏观的认识。然后列出笔者总结的一系列优化技巧,并为稍复杂的优化技巧准备了 CodeSandbox 源码,以便读者实操体验。最后分享笔者使用 React Profiler 的..转载 2021-12-17 16:02:32 · 675 阅读 · 0 评论 -
React性能优化
Code Splitting shouldComponentUpdate避免重复渲染 使用不可突变数据结构 组件尽可能的进行拆分、解耦 列表类组件优化 bind函数优化 不要滥用props ReactDOMServer进行服务端渲染组件Code SplittingCode Splitting 可以帮你“懒加载”代码,如果你没办法直接减少应用的体积,那么不妨尝试把应用从单个 bundle 拆分成单个 bundle + 多份动态代码的形式。webpack提供三种代码分离方法,详情见webp原创 2021-12-09 14:11:58 · 382 阅读 · 0 评论 -
60+ 实用 React 工具库,助力你高效开发
最近看到一些实用的React工具库,总结了一下分享给大家,避免重复造轮子。希望对你有所帮助~一、基础1. React Infinite ScrollerReact Infinite Scroller 用于在React项目中无限滚动加载内容。npm地址:www.npmjs.com/package/rea…2. react-dndReact DnD是React和Redux核心作者 Dan Abramov创造的一组React 高阶组件,可以在保持组件分离的前提下帮助构建复杂的拖放接口。主要转载 2021-12-08 09:46:32 · 813 阅读 · 0 评论 -
React知识点
一、简介介绍下React,说说他们都有哪些特性1.1 简介React是一个构建用户界面的 JavaScript 库,是一个UI 层面的解决方案。React遵循组件设计模式、声明式编程范式和函数式编程概念,以使前端应用程序开发更高效。同时,React使用虚拟DOM来有效地操作DOM,遵循从高阶组件到低阶组件的单向数据流。同时,React可以帮助我们将界面拆分成各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,构成一个整体页面。语法上,React 类组件使用一个名为 render() 的原创 2021-12-07 14:07:20 · 442 阅读 · 0 评论 -
项目开发中的 JS/React 规范
规范: 导入模块的顺序以有组织的方式引入 ES6 模块将节省你查找任何找不到或不需要模块的时间之前import { PageHeaderWrapper } from "@ant-design/pro-layout";import { CustomFormHOC } from "@/components/FormWidget";import { Form, Card, Button, Divider, message, Alert } from "antd";import { connec转载 2021-11-28 11:43:35 · 574 阅读 · 0 评论 -
React 中使用TypeScript
一、组件声明在React中,组件的声明方式有两种:函数组件和类组件, 来看看这两种类型的组件声明时是如何定义TS类型的。1. 类组件类组件的定义形式有两种:React.Component<P, S={}> 和 React.PureComponent<P, S={} SS={}>,它们都是泛型接口,接收两个参数,第一个是props类型的定义,第二个是state类型的定义,这两个参数都不是必须的,没有时可以省略:interface IProps { name: st原创 2021-11-28 11:10:09 · 2581 阅读 · 1 评论 -
React Hook 技巧
这里写一下一些 React Hook 的一些小技巧,看这个文章需要有一点的 React Hook 使用基础React Hook 和 TypeScriptTypeScript 的好处就不说了,这里提一下怎么在 React Hook 中使用 TypeScript,React Hook 的大部分 Hook 都使用了范型。显式声明变量类型// user 被识别成 anyconst [user, setUser] = useState(null);// idx 会被识别成 number,不过还是原创 2021-11-24 13:41:02 · 789 阅读 · 0 评论 -
React鉴权
对于一些 PC 端项目来说,有的页面不需要登录就可以访问,比如,登录页 有的页面需要登录后才能访问,比如,项目后台首页、内容管理等(除了登录页面,其他页面需要登录才能访问)因此,就需要对项目进行登录访问控制,让需要登录才能访问的页面,必须在登录后才能访问。 在没有登录时,直接跳转到登录页面,让用户进行登录。 如何实现登录访问控制呢? 分析:不管哪个页面都是通过路由来访问的,因此,需要从路由角度来进行控制 思路:创建 AuthRoute 组件,判断是否登录, 1原创 2021-11-19 20:25:32 · 2287 阅读 · 0 评论 -
react中使用axios拦截并处理不同http状态码
在react和vue都一般都会使用一个全局的request方法进行http请求在该方法中需要对200之外的状态码进行单独处理参考ant pro项目中代码 改写的axios配置状态码设置// axiosSetting.jsimport axios from 'axios'import { message } from 'antd'import { routerRedux} from 'dva/router'import { getToken } from './auth'im原创 2021-10-23 14:26:10 · 1985 阅读 · 0 评论 -
react-router-dom 中文文档
HOOKSReact Router附带了一些HOOK,可让您访问路由器的状态并从组件内部执行导航useHistory useLocation useParams useRouteMatchuseHistoryuseHistory 钩子返回 history 对象,可以使用 useHistory 进行导航import { useHistory } from "react-router-dom";function HomeButton() { let history = useH转载 2021-10-22 14:10:11 · 8894 阅读 · 0 评论 -
React 开发必须知道的 34个技巧
前言React 是前端三大框架之一,在开发中也是一项技能;本文从实际开发中总结了 React 开发的一些技巧技巧,适合 React 初学或者有一定项目经验的同学序列文章:Vue 开发必须知道的 36 个技巧【近1W字】源码地址请戳, 欢迎 star效果图1 组件通讯1.1 props子组件import React from "react";import PropTypes from "prop-types";import { Button } fro..转载 2021-05-19 16:45:03 · 1512 阅读 · 0 评论 -
React使用echarts-for-react
参考npm文档:[echarts-for-react](echarts-for-react)由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装第一步:npm安装echarts-for-reactnpm install --save echarts-for-reactnpm install echarts --save //如果有报错找不到echarts模块,需要在安装一下exharts'第二步:引入模块和组件import echarts from 'e原创 2021-04-26 11:32:44 · 2715 阅读 · 1 评论