React基础
文章平均质量分 51
以实战为线索,逐步深入React开发各个环节,掌握前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力。
samllplum
有智者立长志 无志者长立志
展开
-
H5端 Tab标签滚动时吸顶&滚动至对应模块选中对应tab&开发中遇到的坑
注意:页面滚动至某一模块时,展示对应锚点。可以从下往上计算 各个模块与页面顶部的距离和Tab标签的高度来判读哪个模块当前在可视区,从而选中对应的Tab标签。解决办法:通过监听页面滚动事件,然后在滚动时移除之前聚焦元素的焦点状态来实现这个需求。当你开始滚动页面时,滚动事件处理器会将。在这个示例中,我添加了一个新的状态变量。2、页面滚动至某一模块时,展示对应锚点。1、点击Tab标签定位至对应模块。3、Tab标签滚动吸顶。,将继续监听滚动事件。原创 2024-04-28 17:18:09 · 532 阅读 · 0 评论 -
react懒加载lazy
lazy能够让你在组件第一次被渲染之前延迟加载组件的代码。原创 2023-10-24 12:24:20 · 499 阅读 · 0 评论 -
Antd List组件增加gutter属性后出现横向滚动,如何解决
第一次使用ant design的List列表组件,设置gutter间隔属性后,页面出现了横向滚动条,查阅文档发现是由于加间隔后导致容器宽度被撑开,ant design官方默认给外层容器加了margin-left和margin-right。原创 2023-07-12 19:06:35 · 1635 阅读 · 0 评论 -
React-antd-RangePicker日期组件清空内容
做项目中遇到了一个需求,需要清空日历控件,查了api文档,并没有发现好的解决方法。经查阅一些文档,总结两种方法1、若使用form表单,可采用清空表单的方式清空日历组件,this.props.form.resetFields();2、若是单独写的日历组件,则可以通过设置一个key,然后在点击重置时修改key的值(看了网上一些博客都是这样写的),原理是给rangePicker控件添加key属性,点击重置时,修改key的值,如new Date(),相当于重新渲染控件,达到让控件重置的功能th原创 2021-09-02 11:05:31 · 4840 阅读 · 5 评论 -
React中echarts 单个/多个图表自适应
项目中涉及到多个图表,需要宽度自适应屏幕的尺寸,因此想到了监听windows resize方法// 监听 window 窗口大小变化的事件window.onresize = function() { // 调用 echarts 实例对象的 resize 方法 this.myCharts.resize()}但是几经操作后发现,只有最后一个图表的尺寸会重新resize,会覆盖前几个图表的自适应,原因是this的指向不对let that=thisthis.lineChart.set原创 2021-09-10 14:27:16 · 1003 阅读 · 0 评论 -
useCallback 与 useMemo 的区别 & 作用
一些文章长篇大论解释,其实直接看 typescript 声明就知道作用了,泛型 T 在 useCallback 中是一个钩子函数,在 useMemo 中是一个返回值。一个简单计数器 demo 解释全部作用:点击按钮 count 加 1,同时显示这个数是奇数还是偶数不用 hook 的代码使用 hook 后的代码看起来没有什么区别,甚至使用 hook 后代码还变复杂了。原创 2023-03-11 15:53:04 · 550 阅读 · 0 评论 -
React使用pubsub-js订阅发布和取消订阅
PubSub.subsribe( )是用于订阅消息,在componentDidMount( )中使用。在componentWillUnmount中取消订阅原创 2022-07-09 10:32:15 · 1480 阅读 · 0 评论 -
React面试习题
目录1.React中什么是受控组件和非控组件2.React中refs的作用是什么?有哪些应用场景?3. React组件的构造函数有什么作用?它是必须的吗?4. React.forwardRef是什么?它有什么作用?5. 类组件与函数组件有什么异同?(1)受控组件 在使用表单来收集用户输入时,例如等元素都要绑定一个change事件,当表单的状态发生变化,就会触发onChange事件,更新组件的state。这种组件在React中被称为受控组件,在受控组件中,组件渲染出的状态与它的value或checked属性相原创 2022-07-06 22:32:05 · 289 阅读 · 0 评论 -
hooks 的定义
在 react@16.x 之前,当我们谈论 hooks 时,我们可能谈论的是“组件的生命周期”。但是现在,以 react 为例,hooks 是:一系列以 “use” 作为开头的方法,它们提供了让你可以完全避开 class式写法,在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。...原创 2022-07-02 09:33:38 · 3799 阅读 · 0 评论 -
Too many re-renders. React limits the number of renders to prevent an infinite loop
一:报错原因及如何修复在函数组件使用useState更新state数据时页面出现如下报错:意思是:太多的被重新呈现。React限制呈现的数量,以防止无限循环。原因是代码<a onClick={ setVisible(false)}中,花括号{}方法体会被直接触发,在react呈现中调用setVisible函数,setVisible函数触发后,数据更新导致页面重新渲染,会继续触发onClick事件,回调中触发了重新呈现,最常见的是setState触发,这将再次调用事件回调,并导致Reac原创 2022-03-17 19:21:04 · 1002 阅读 · 0 评论 -
antd-react-input 去除输入内容 记忆功能
ant-design Input 组件取消自动显示输入历史Form默认开启 aotuComplete 功能,当submit 时会记录输入历史,取消自动补充功能,只需在Form 上加autoComplete=“off”即可关闭自动提示输入历史 (这里的Complete的C需要大写)如果是原生 js 的 input 框则增加属性: autocomplete=“off” (这里的complete的C不需要大写)...原创 2021-09-27 15:40:57 · 2121 阅读 · 0 评论 -
React 之antd Checkbox.Group 组,onchange事件及赋值
每个人的需求不一样,因此功能也会不一样,在此记录了项目中的Checkbox.Group组,新增了清空所有组的复选框,通过阅读文档,可以修改对应的value值达到清空的效果onChange变化时需要把更新value的值,来对应匹配勾选中的复选框;清空时也需要将value值置空,空数组及可{Object.keys(filterConfig).map((key) => { return ( <div key={key}>原创 2021-02-03 16:37:26 · 8493 阅读 · 0 评论 -
react项目组件封装反思
最近在做项目的迭代,需要改原来代码的逻辑,从中发现了一些问题,首先react开发就是要封装一个又一个的小组件,引入,并使用,当然自己在开发的过程中也遵循封装组件的方式,相比之前vue开发,自认为react封装的相对多一些,但是在迭代开发的过程中发现,自己只是对相对独立的小模块,小功能进行封装,像有的小功能点并没有很好的封装,并且也重复复制了很多功能在代码中,并没有达到封装组件的要求,导致回过头来看自己的代码时发现一堆重复的代码。往往功能做完再去封装组件,抽离出来,就比较费时费力了,还得思考一遍原来的逻辑。原创 2021-02-02 10:39:46 · 372 阅读 · 1 评论 -
React 生命周期总结
1、挂载卸载过程constructor() componentWillMount() conponentDidMount() componentWAillUnmount()2、更新过程componentWillReceiveProps(nextProps) shouldComponentUpdate(nextProps,nextState) componentWillUpdate(nextProps,nextState) componentDidUpdate(nextProps,nex原创 2021-01-19 16:04:31 · 230 阅读 · 0 评论 -
PWA组成技术
Service Worker Promise fetch cacha API Notification API1、Service Worker有三个生命周期,install、activate、fetch、2、Promise3、fetch4、cacha API5、Notification API原创 2021-01-07 19:11:33 · 272 阅读 · 0 评论 -
react之代理方式的高阶组件(一)
高阶组件(Higher Order Component, HOC)并不是React提供的某种API,而是使用React的一种模式,用于增强现有组件的功能。简单来说,一个高阶组件就是一个函数,这个函数接受一个组件作为输入,然后返回一个新的组件作为结果,而且,返回的新组件拥有了输入组件所不具有的功能。这里提到的组件指的并不是组件实例,而是一个组件类,也可以是一个无状态组件的函数。提示:在有的文献中,认为上面提到的函数返回的结果才应该叫“高阶组件”,而这个函数本身应该叫做“高阶组件工厂函数”,这样的定原创 2021-01-06 14:36:52 · 274 阅读 · 0 评论 -
Hooks常见问题
一、生命周期函数如何映射到hooks?函数组件还没办法完全取代类组件,componentDidCatch和 componentDidCatch和getSnapshotBeforeUpdate函数还不能被代替React16新的生命周期弃用了componentWillMount、componentWillReceivePorps,componentWillUpdate 新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子..原创 2021-01-05 19:48:19 · 775 阅读 · 0 评论 -
React-Hooks useContext用法
如果需要在组件之间共享状态,可以使用useContext()。使用 React Context API,在组件外部建立一个 Context。 CountContext.Provider提供了一个 Context 对象,这个对象可以被子组件共享。 useContext()钩子函数用来引入 Context 对象,从中获取count属性import React,{Component, useState,createContext,useContext} from 'react'import './A原创 2021-01-05 15:53:27 · 1196 阅读 · 0 评论 -
React-Hooks useState,useEffect用法
useState通过在函数组件里调用它来给组件添加一些内部 state。useState 会返回一对值:当前状态和一个让你更新它的函数,你可以在事件处理函数中或其他一些地方调用这个函数。useState 唯一的参数就是初始 state。这个初始 state 参数只有在第一次渲染的时候会被用到。使用useState可以声明多个state变量useEffectuseEffect (副作用函数)是一个 Effect Hook,给函数组件增加了操作副作用(在 React 组件中进行数据获取、订阅或者原创 2021-01-05 15:30:07 · 1809 阅读 · 0 评论 -
React组件的性能优化
react组件的渲染性能优化单个组件的性能优化 多个组件的性能优化 利用reselect提高数据选取的性能 动画效果 代码打包 ...1、React利用Virtual DOM来提高渲染性能,虽然每一次页面更新都是对组件的重新渲染,但是并不是将之前渲染的内容全部抛弃重来,借助Virtual DOM, React能够计算出对DOM树的最少修改,这就是React默认情况下渲染都很迅捷的秘诀。不过,虽然Virtual DOM能够将每次DOM操作量减少到最小,计算和比较Virtual DOM依然是一个原创 2020-12-30 20:30:29 · 388 阅读 · 0 评论 -
react 新特性 Context
Context优点:变量不用层层传递,省去无谓的传递props缺点:使用全局变量的方法,会让组件失去独立性,复用起来更困难Context实例对象,派生出两个组件,Provider组件携带一个变量值,会向后代组件统一提供这个变量值,后代组件不能直接获取到这个对象,因为没有途径,因此派生出一个consumer组件(Provider组件的后代元素)...原创 2020-12-30 17:43:37 · 507 阅读 · 0 评论 -
2020-12-30 Hooks了解
Hooks 于18年年底被发布,19年2月份被定型的新特性Hooksconstructor this.setState componentDidMount renderPWA技术优化语法1、Es2015(Es6)Destructuring 解构 Spread 展开 Rest 参数 Arrow Function 箭头函数语法2、JSX 并非react发明 classname语法3、CSS Flex弹性布局...原创 2020-12-30 16:09:58 · 146 阅读 · 0 评论 -
React 之antd Tree树形组件反显
近期做项目遇到一个需求:树形组件后端返回的数据包含父节点和子节点,但在子节点不全被选中的时候,不能把父节点给勾选上,否则会出现父节点被勾选,里边未被选中的子节点也全部被选中。经过网上搜索,遇到一个很好的解决方案1、const test = []; // 定义test 存放所有子节点的数组2、循环遍历出最深层子节点(包含所有的子节点及没有子节点的父节点),存放在一个数组中requestList = (data) => { data.map((item) => {原创 2020-11-26 20:02:22 · 3106 阅读 · 2 评论 -
React之封装Clock组件(学习篇一)
class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() {.原创 2020-07-26 10:07:06 · 438 阅读 · 0 评论