![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 53
weixin_43844392
这个作者很懒,什么都没留下…
展开
-
typescript对与axios的封装
import { Modal, message } from 'antd'import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'import AdminConfig from '@/common/config'import { getToken } from './cookie'interface ResponseData<T extends any> { data: T err原创 2021-06-16 13:06:59 · 501 阅读 · 0 评论 -
21个React性能优化技巧
React 为高性能应用设计提供了许多优化方案,本文列举了其中的一些最佳实践。在以下场景中,父组件和子组件通常会重新渲染:在同一组件或父组件中调用 setState 时。从父级收到的“props”的值发生变化。调用组件中的 forceUpdate。下面是提升 React 应用性能的 21 个技巧。使用纯组件如果 React 组件为相同的状态和 props 渲染相同的输出,则可以将其视为纯组件。对于像 this 的类组件来说,React 提供了 PureComponent 基类。扩展 Re转载 2020-10-09 10:59:36 · 4124 阅读 · 2 评论 -
React 性能优化,你需要知道的几个点
写了一段时间的react之后,渐渐的喜欢上了使用react来写应用。我们知道,Facebook在推出react时打出的旗号之一就是高性能。今天我们还一起来聊一聊react的性能优化,思考还能通过哪些手段来提升React的性能,使我们的react更快,性能更好。一,react组件的性能优化(渲染角度优化)1,react性能查看工具再讲性能优化之前,我们需要先来了解一下如何查看react加载组件时所耗费的时间的工具,在react 16版本之前我们可以使用React Perf来查看。大转载 2020-09-30 18:00:06 · 287 阅读 · 0 评论 -
真的!!!两行css代码实现瀑布流,html,css最简单的瀑布流实现方式且没有缺点!
两行css如下:<style scoped> .waterfall-container { /*分几列*/ column-count: 2; } .waterfall-item { /*不留白,不知道什么意思可以取消这个样式试试*/ break-inside: avoid; }</style>/*列间距,可有可无,默认30px*//*column-gap: 0;*/效果图说明:不存在一边列表过长问题,很均匀,没有缺转载 2020-07-01 10:02:35 · 115 阅读 · 0 评论 -
React Hook的用法: State + Effect(一)
React Hook简述React Hook 是React 16.8 这个版本新增的一个特性。在此之前我们编写React组件一般大多数都是用 class组件,而非函数组件,因为函数组件不具有class组件的状态,生命周期这些概念,这就使得在使用函数组件的时候有很多掣肘。而class组件与函数组件相比明显略笨重,很多不必要冗余的模板代码,而且还有this的问题,要么使用箭头函数,要么每次需要bind一下this。但是如果使用了Hook那就可以很好的规避了这些问题。下面就简单介绍一下Hook的用法Sta转载 2020-06-30 17:15:56 · 163 阅读 · 0 评论 -
React Hook的用法: Ref + useMemo + 自定义Hook(三)
React Hook的用法Ref Hook这个Hook的作用是可以通过他来获取到Dom元素节点,使用起来非常方便。关键代码如下:const xxxEle = useRef(initialValue);1useRef返回一个ref变量,并接受一个初始值 initialValue 这个传入的初始值会复制给useRef返回变量的 .current 属性上(这里就是 xxxEle.current)。如果没有需要传入的初始值的话,一般直接传入 null 即可,然后就可以将返回的Ref变量附加在具体的do原创 2020-06-30 16:55:47 · 626 阅读 · 0 评论 -
React Router DOM
大家可以在https://reacttraining.com/react-router/web/api/StaticRouter/basename-string看相关例子<BrowserRouter><BrowserRouter> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。import { BrowserRouter } from 'reac..转载 2020-06-09 10:18:41 · 118 阅读 · 0 评论 -
memo、useMemo及useCallback解析
memo、useMemo及useCallback解析前言在hooks诞生之前,如果组件包含内部state,我们都是基于class的形式来创建组件。在react中,性能优化的点在于:调用setState,就会触发组件的重新渲染,无论前后state是否相同 父组件更新,子组件也会自动更新基于上面的两点,我们通常的解决方案是:使用immutable进行比较,在不相等的时候调用setState, 在shouldComponentUpdate中判断前后的props和st...转载 2020-06-08 09:41:16 · 1043 阅读 · 0 评论 -
useMemo和useCallback的使用
useMemoconst memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);把“创建”函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。也就是说useMemo可以让函数在某个依赖项改变的时候才运行,这可以避免很多不必要的开销。举个例子:不使用useMemofunction Exam.转载 2020-06-06 19:25:55 · 486 阅读 · 0 评论 -
useCallback和memo
React.memo作用React.memo的作用主要是用于缓存组件,使得组件可以按照业务的需求决定是否来更新的效果,比如业务场景中常见的一个场景,在页面的底部有一个版权说明,一般这是各个模块页面所公用的一个组件,但这个组件基本就是一个静态的文案描述,如果父组件数据变化更新的时候这个抽象出来的版权组件也无需更新,这样可以达到减少页面性能开销的目的。在线示例下面设计了一组三个不同效果的Demo做对比,父组件中有两个变量 age 和account传递给子组件,并且在父组件中可以更新这两个值。比较达到的.转载 2020-06-06 19:10:26 · 627 阅读 · 0 评论 -
react hook之React.lazy()
也不怕大家笑话,看到react.lazy()我第一个想到的居然是vue 中的一个vue-lazy 用户懒加载的插件。但是这两个差别还是有点大的。好了我们言归正传,开始来看看我们的react.lazy()其实看见lazy()大家见名知意,就知道是来做懒加载的,但是这个是来做组件的懒加载。为什么需要react.lazy()我们所知道的是,webpack 打包时我们如果没有分模块打包的话,就会把所以的文件都打入一个包中,这样的话加载就会很慢,我们怎末解决这个问题呢,在vue 中我们主要用的方式时动态导入懒原创 2020-06-06 18:10:07 · 1288 阅读 · 0 评论 -
react hook 学习之React.memo()
react memo 可以来解决 函数组在传入的props不变是会重新弄渲染的问题,相当与class组件中的PureComponent和shouldComponentUpdate,它可以帮助我们重新渲染页面const ToBeBetterComponent = React.memo(function MyComponent(props) { // only renders if props have changed})它是主要来渲染函数组件的,而不是来渲染类组件的import React f原创 2020-06-06 17:25:54 · 582 阅读 · 0 评论 -
react 16.8 新特性总结(二)掌握useref和ref
在react 中主要时操作数据进行操作,但是会有许多情况下我们还是需要获取dom,所以我们会用到refrefref的作用Ref属性用来获取DOM 元素的节点和获取子组件的实例我们先来看在class 组件中的refrefs时使用React.create()创建的,并通过ref属性附加到React 元素中,在构建组件时,通常将Refs 分配给属性实例,以便在整个组件中华引用它们当ref被传递给render中的元素时,改节点可以在ref的current属性中被访问React 会在组件挂载时给cur转载 2020-06-05 20:21:30 · 2319 阅读 · 0 评论 -
react 16.8 新特性总结(二)掌握useEffect.md
useEffect是什么useEffect 是一个专门react hook的一部分内容主要是为函数组件服务。一般情况下我们可以看作componentDidMount, componentDidUpdate,componentWillUnmount 三个生命周期的结合体。会在每次 render 的时候必定执行一次。如果返回了函数,那么在下一次 render 之前或组件 unmount 之前必定会运行一次返回函数的代码。如果指定了依赖数组,且不为空,则当数组里的每个元素发生变化时,都会重新运行一次。原创 2020-06-05 19:22:13 · 425 阅读 · 0 评论 -
events.js:183 throw er; // Unhandled 'error' event 相关问题解决办法
在启动项目的时候可能会出现以下问题出现原因出现这个问题的主要原因是因为端口被占用了解决办法查询端口号是否被占用netstat -aon|findstr "8000"找到对应程序tasklist|findstr "9060"再任务管理器中删掉相关程序再执行代码成功!...原创 2020-04-16 18:37:15 · 744 阅读 · 0 评论