react
文章平均质量分 53
大路宽宽
这个作者很懒,什么都没留下…
展开
-
使用React.memo()来优化函数组件的性能
原文链接:Improving Performance in React Functional Component using React.memo原文作者:Chidume Nnamdi译者:大路宽宽的博客_CSDN博客-react,幽默,分享领域博主推荐理由: 本文讲述了开发React应用时如何使用shouldComponentUpdate生命周期函数以及PureComponent去避免类组件进行无用的重渲染,以及如何使用最新的React.memo API去优化函数组件的性能。React核心...原创 2021-12-22 17:40:16 · 271 阅读 · 0 评论 -
怎么使用好useCallback,来达到减少render次数的效果
react优化方式减少render次数 减少计算量下面的代码,当handleClick1时间触发时,PageB组件也会重新渲染import React, { memo, useCallback, useState } from 'react'function PageA (props) { const { onClick, children } = props console.log(111, props) return <div onClick={onClick}>原创 2021-12-22 17:34:39 · 282 阅读 · 0 评论 -
拖拽插件SortableJS的简单使用
在项目中,经常会遇到一些涉及到拖拽的需求,github上面有一个开源的SortableJS的插件,支持Vue,React,Angular等多种框架,实现效果很好,基本可以满足大部分的需求,下面就第一次在jquery中的使用做个简单的demo记录。引入文件Sortable.min.js 指定包裹容器的id 根据api开始创建使用即可<!DOCTYPE html><html> <head> <meta charset="utf-8"..原创 2021-12-22 17:31:09 · 3215 阅读 · 0 评论 -
Suspense
这个是为了 懒加载 React Suspense让我们轻松定义延迟加载的组件。为什么会出现这种情况呢? ---》 因为在路由中使用的懒加载路由方式 所以说 难免会有点慢 如果没有这个处理 那么就会出现一段时间的白屏 用户体验较差const OtherComponent = React.lazy(() => import('./OtherComponent'));function MyComponent() { return ( <div> <Su原创 2021-12-22 17:26:01 · 450 阅读 · 0 评论 -
react 中的 Fragment <></>
React Fragment介绍与使用在向 DOM 树批量添加元素时,一个好的实践是创建一个document.createDocumentFragment,先将元素批量添加到DocumentFragment 上,再把 DocumentFragment 添加到 DOM 树,减少了 DOM操作次数的同时也不会创建一个新元素。和 DocumentFragment 类似,React 也存在 Fragment 的概念,用途很类似。在 React 16之前,Fragment 的创建是通过扩展包 react-原创 2021-12-22 17:22:44 · 427 阅读 · 0 评论 -
react-redux shallowEqual useDispatch useSelector 使用方式
因为现在很多人都在用hooks来进行react开发 所以的如果想使用react-redux需要useDispatch获取store中的数据需要 useSelector先看一下代码创建storeimport { createStore, applyMiddleware, compose } from "redux";import thunk from 'redux-thunk'import cRducer from "./reducer";// redux-devtoolsco...原创 2021-12-22 17:20:38 · 2109 阅读 · 0 评论 -
react中的compose()
首先来看reduce方法()这是一个数组的方法。arr.reduce(callback[, initialValue])callback执行数组中每个值的函数,包含四个参数:accumulator(累加器) currentValue(当前值) currentIndex可选(当前索引) array可选(数组) initialValue可选(初始值)直接看代码吧var sum = [0, 1, 2, 3].reduce(function (a, b) { return a原创 2021-12-22 11:03:42 · 666 阅读 · 0 评论 -
react redux-immutable
Immutable.jsimmutable出现的背景在我们的日常开发中,我相信大家都遇到过一种困扰,那就是如何将后端返回的数据,深拷贝一份,再供我们自己使用呢?如果用过React框架开发过项目的小伙伴,也一定记得Redux中的reducer是基于纯函数设计的,要求返回的状态数据(对象或数组),需要先深拷贝一份(目的是:防止影响老状态),再根据自己的开发需求对其拷贝后的值操作?这是使用redux、reducer中修改数据的代码:let list = [ { name: 'house'原创 2021-12-22 10:40:46 · 540 阅读 · 0 评论 -
react 配合 react-draggable 进行拖拽
npm 地址react-draggable - npm (npmjs.com)https://www.npmjs.com/package/react-draggable 这里呢是 配合antd中的Modal 模态框实现的 下面看代码:<Draggable> <Modal centered footer={null} title={ <div style={{ .原创 2021-12-21 14:45:04 · 3475 阅读 · 0 评论 -
react 中使用 styled-components 样式
官网地址 styled-components最大的特点就是既可以写组件的样式,也可以作为一个react组件来使用,同样写一些小栗子来了解一下。首先安装:npm install styled-components 或cnpm install styled-components 或yarn add styled-components引入:import styled from "styled-components"创建在 js 文件中 定义样式标签组件 最后导出: ...原创 2021-12-21 14:34:29 · 954 阅读 · 0 评论 -
react 配置 @ 为根目录
react 配置 @ 为根目录 两种方式原创 2021-12-16 16:21:56 · 882 阅读 · 0 评论