![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 60
subsistent
历经磨难
展开
-
React 学习路线
React 介绍及脚手架安装_react脚手架安装-CSDN博客react组件定义及使用_react 引入组件-CSDN博客React 的 jsx 语法-CSDN博客React 中如何编写样式-CSDN博客React中的事件详解_对react事件的理解-CSDN博客React之state详解_react state定义函数-CSDN博客React列表渲染以及key的作用_react渲染一个列表时key的作用?-CSDN博客React组件通讯详解-CSDN博客组合 vs 继承 及 使用ReactDOM.cre原创 2024-03-09 14:30:00 · 346 阅读 · 0 评论 -
如果让你封装一个弹窗组件,你的思路是什么
例如,可以支持设置弹窗的宽度、高度、背景色等属性,以及自定义弹窗的内容。当然,在具体实现过程中还需要考虑兼容性、安全性、可访问性等方面的问题,以及结合具体项目的需求进行进一步优化和扩展。同时,根据用户反馈和性能测试结果,对组件进行优化,提升用户体验和性能。设计组件的结构和布局:根据功能需求,设计组件的HTML结构和CSS样式,考虑使用响应式布局,使得弹窗在不同设备上都能良好地显示。定义弹窗组件的功能和属性:首先确定弹窗组件的基本功能,例如显示、隐藏和关闭弹窗,以及设置弹窗的标题、内容、样式等属性。原创 2023-09-12 22:42:06 · 128 阅读 · 0 评论 -
React 使用 Redux Toolkit 详解
Redux Toolkit是一个官方支持的、用于简化Redux开发的工具集。它提供了一些简单易用的API和工具,可以帮助开发者更快速、更高效地编写Redux应用。总的来说,Redux Toolkit可以帮助开发者更加高效地使用Redux,减少了许多样板代码和配置工作,同时提供了一些常用的功能和工具,使得开发者可以更加专注于业务逻辑的实现configureStore函数是一个创建Redux store的快捷方式,为开发者提供了一些常用的设置和默认选项,从而加快了开发速度。原创 2023-08-19 20:47:18 · 1326 阅读 · 0 评论 -
React 之 redux 详解
状态管理是指在应用中维护数据状态的过程。随着应用不断变大,维护和同步数据状态的复杂度也会变得更高,因此状态管理是一个重要的问题。Redux 是一种 JavaScript 库,用于管理应用的全局状态。它的目的是帮助开发者管理和同步应用中的数据状态,以实现组件间的数据共享和通信。Redux 遵循了一种单向数据流的架构模式,将整个应用的状态数据存储在一个全局的状态树(即 store)中,并通过明确的操作,比如 dispatch 一个 action,来修改数据状态。原创 2023-08-19 20:32:32 · 3718 阅读 · 0 评论 -
React 之 react-router-dom
前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中,当用户点击链接或者输入URL时,服务器会接收到请求并返回相应的HTML页面。而在前端路由中,当用户点击链接或者输入URL时,浏览器会根据路由规则对URL进行解析,并使用JavaScript控制页面的展示。前端路由通常使用JavaScript库来实现,比如React Router、Vue Router等。它们允许开发者定义路由规则,并根据这些规则来显示不同的组件或页面。原创 2023-08-19 19:55:33 · 5521 阅读 · 0 评论 -
React 之 useInsertionEffect
在某些情况下, 标签需要在客户端生成或编辑,如果不小心的话,在并发渲染中会造成性能问题。CSS-in-JS (后文简称为 CIJ)在 2014 年由 Facebook 的员工 在 NationJS 会议上提出:可以借用 JS 解决许多 CSS 本身的一些“缺陷”,比如全局作用域、死代码移除、生效顺序依赖于样式加载顺序、常量共享等等问题。这个钩子与其他钩子略有不同,因为它的唯一目的是对CSS-in-JS库很重要,这些库在运行中生成新的规则并在文档中插入 标签。原创 2023-08-19 19:46:05 · 90 阅读 · 0 评论 -
React 之 useId
这样基数足够大就能够得到紧凑的 id 序列,并且我们希望基数是 2 的幂,因为每个 log2(base) 对应一个字符,也就是 log2(32) = 5 bits = 1 ,这样意味着我们可以在不影响最终结果的情况下删除末尾 5 的位。如果只考虑当前的子节点,我们使用 101 就可以了,但是要表达当前层级所有的子节点,三位就不够用。为了处理这种情况,每次我们生成一个 id 时,都会分配一个一个新的层级。每次树分叉成多个子节点时,我们都会在序列的左侧添加额外的位数,表示子节点在当前子节点层级中的位置。原创 2023-08-19 19:44:51 · 203 阅读 · 0 评论 -
React 之 useDeferredValue 和 useTransition
2、在 conCurrent mode 下,startTransition 是可以中断渲染的 ,所以它不会让页面卡顿,React 让这些任务,在浏览器空闲时间执行,所以上述输入 input 内容时,startTransition 会优先处理 input 值的更新,而之后才是列表的渲染。useDeferredValue 和useTransition这两个钩子可以让我们延迟渲染不紧急的部分,类似于防抖但没有固定的延迟时间,延迟的渲染会在紧急的部分先出现在浏览器屏幕以后才开始,并且可中断,不会阻塞用户输入。原创 2023-08-19 17:57:25 · 393 阅读 · 0 评论 -
React 之 useDebugValue 和 React Developer Tools
勾住”React开发调试工具中的自定义hook标签,让useDebugValue勾住的自定义hook可以显示额外的信息。第2个参数是可选的,是对第1个参数值的数据化格式函数。1、对于本机开发调试的项目网页,该插件图标会变成橘黄色,且图标中间有一个小虫子,表示可以进行react源码式的调试,当代码出现错误时会精准定位出错的代码位置。2、对于别人开发的项目网页,该插件图标会变成蓝色,表示该网页由react开发,当代码出现错误时不能精准定位出错的代码位置。3、对于没有使用react的网页,该插件图标会变成灰色。原创 2023-08-19 17:49:24 · 239 阅读 · 0 评论 -
React 之 useLayoutEffect
他们的不同点在于,你可以把useLayoutEffect等同于componentDidMount、componentDidUpdate,因为他们调用阶段是相同的。如果是对DOM进行一些样式调整是不会触发重新渲染的,这点和useEffect是相同的。在触发useLayoutEffect阶段时,页面全部DOM已经渲染完成,此时可以获取当前页面所有信息,包括页面显示布局等,你可以根据需求修改调整页面。也就是说,当组件所有DOM都渲染完成后,同步调用useLayoutEffect,然后再调用useEffect。原创 2023-08-19 17:42:42 · 597 阅读 · 0 评论 -
React 之 useImperativeHandle
本质上其实是子组件将自己内部的函数(方法)通过useImperativeHandle添加到父组件中useRef定义的对象中。React.forwardRef 会创建一个React组件,这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。1、这里面说的“勾住子组件内自定义函数”本质上是子组件将内部自定义的函数添加到父组件的ref.current上面。第2个参数为子组件要附加给ref的对象,该对象中的属性即子组件想要暴露给父组件的函数(方法);第1个参数为父组件定义的useRef的值;原创 2023-08-19 17:41:05 · 546 阅读 · 0 评论 -
React 之 useRef
useRef,他的作用是“勾住”某些组件挂载完成或重新渲染完成后才拥有的某些对象,并返回该对象的引用。返回的 ref 对象在组件的整个生命周期内保持不变。如果是自定义的react组件(自定义的组件必须大写字母开头),那么是无法使用useRef(当然也有一些奇淫技巧后面我们后续课程会讲😈)的。这样,当父组件想调用子组件中的 doSomting() 时,可执行 childFunRef.current.doSomting()1、useRef是针对函数组件的,如果是类组件则使用React.createRef()。原创 2023-08-19 17:39:30 · 2073 阅读 · 0 评论 -
React 之 useReducer
useReducer最终返回一个存储有当前状态值和dispatch函数的数组,该dispatch函数触发的时,会调用reducer的方法,reducer方法返回的值会更新state。众所周知,useState 常用在单个组件中进行状态管理,但是遇到状态全局管理的时候,useState 显然不能满足我们的需求,这个时候大多数的做法是利用第三方的状态管理工具,像 redux,Recoil 或者 Mobx。2、组件负责发出 action,reducer 负责更新状态的模式, 使得代码逻辑更加清晰。原创 2023-08-19 17:37:03 · 542 阅读 · 0 评论 -
React hooks 中的过期闭包问题
一个函数就是一个闭包,当它被定义在另一个函数内部,并且该内部函数可以访问到它的外部函数的变量。在React组件的render函数中,如果使用了闭包引用组件的state或props,当state或props发生变化时,闭包将不会自动更新引用的变量。因为在每次循环中,闭包引用的外部变量都会发生变化,如果没有特别处理,闭包内的代码就会捕获到过期的外部变量。在React中,过期闭包问题是指因为闭包的生命周期长于其引用的变量的生命周期而导致的问题。2、闭包可以访问外部作用域内的变量,并且可以保存这些变量的值;原创 2023-08-19 17:30:19 · 189 阅读 · 0 评论 -
React hook 模仿生命周期
useEffect(()=>{ return ()=>{ 卸载之前 componentWillUnmount } } ,[]) 挂载完成 componentDidMount。useEffect(()=>{ }) 挂载完成 componentDidMount 和 更新完成 componentDidUpdate。他的作用主要分为两个,第一 模拟生命周期,第二个监听状态的变化。useEffect(()=>{ }, []) 挂载完成 componentDidMount。原创 2023-08-19 17:27:47 · 233 阅读 · 0 评论 -
React 之 useMemo 和 useCallback
因此,如果你在组件中执行了复杂的计算,并且这些计算结果不需要频繁更新,那么可以考虑使用 useMemo 优化组件性能总的来说,useMemo 适用于需要缓存计算结果的场景,useCallback 适用于缓存回调函数的场景。原创 2023-08-19 17:10:58 · 109 阅读 · 0 评论 -
React.memo 和 React.PureComponent
因为 React.PureComponent 实现了浅层比较,所以可以避免不必要的渲染。如果你的组件需要进行深层比较,那么你需要手动实现 shouldComponentUpdate 方法。因此,如果你的组件是一个展示型组件,且不需要经常更新,那么可以考虑使用 React.PureComponent 来优化组件的性能因此,当你需要优化 React 组件的性能时,应该根据具体情况来决定使用 React.PureComponent 还是 React.memo。原创 2023-08-19 17:00:15 · 204 阅读 · 0 评论 -
React hooks 组件传值 - 父子组件之间的传值
子组件:函数组件接收一个props是一个对象,父组件传的属性名就是props对象的key,属性的值就是对应的value。一句话概括:在props上定义一个方法,调用方法的时候传入参数,达到传值的效果。一句话概括,react hook 父子组件之间通过props进行传值。父组件:在子组件标签上定义一个属性,属性值为一个方法。父组件:在子组件标签上定义属性。原创 2023-08-19 16:56:36 · 617 阅读 · 0 评论 -
React 的 Immutable Data(不可变数据)
所以如果我们以 mutable 的方式更改了 state 中的某个对象,React 会认为该对象并没有更新,那么相对应的 UI 就不会被重渲染。我们知道,在 React 中,UI 是 state 的投影,state 的变更会引发 UI 的重新渲染。Immutable 意为「不可变的」。它的理念是:在赋值时,产生一个与原对象完全一样的新对象,指向不同的内存地址,互不影响。但是在 js 中,对象都是引用类型,在按引用传递数据的场景中,会存在多个变量指向同一个内存地址的情况,这样会引发不可控的副作用。原创 2023-08-19 16:54:43 · 164 阅读 · 0 评论 -
20 个 React 性能优化技巧
在对比先前的 props 和状态与下一个 props 和状态时,浅层比较将检查它们的基元是否有相同的值(例如:1 等于 1 或真等于真),还会检查更复杂的 JavaScript 值(如对象和数组)之间的引用是否相同。比较基元和对象引用的开销比更新组件视图要低。因此,查找状态和 props 值的变化会比不必要的更新更快。super();转载 2023-08-18 17:51:21 · 517 阅读 · 0 评论 -
React 之 useEffect 详解
useEffect 可以让你在函数组件中执行副作用操作,接收两个参数,第一个参数是要执行的函数 callback,第二个参数是可选的依赖项数组 dependencies。其中依赖项是可选的,如果不指定,那么 callback 就会在每次函数组件执行完后都执行;如果指定了,那么只有依赖项中的值发生变化的时候,它才会执行。简单来说就是当我们的依赖项发生发生变化的时候,可以。注意:useEffect是在render之后执行。原创 2023-08-17 22:56:53 · 4024 阅读 · 0 评论 -
React 之 useState 详解
initialValue是初始状态。它可以是任意值。原创 2023-08-17 22:53:55 · 5963 阅读 · 0 评论 -
React hooks 介绍
但是太多的太多的生命周期难记,有些也不知道具体的场景麻烦。所有的钩子都是为函数引入外部功能,所以 React 约定,钩子一律使用use前缀命名,便于识别。然而在class组件中,我们实现一个功能,就不得不把相同业务的一些逻辑分散到各个生命周期中,就显得逻辑分散,比如我们设置一个定时器,就要考虑在合适的生命周期里面初始化定时器,以及销毁定时器等显的逻辑很分散。但这两者虽然都可以实现逻辑复用,但是并没有让组件和代码变得好用和优美起来,这二者都会存在的一个问题是,逻辑的复用会导致嵌套层级过深,形成嵌套地狱。原创 2023-08-17 22:50:49 · 74 阅读 · 0 评论 -
React 之 render props
使用 render props 的基本方法是,在一个组件中定义逻辑,然后在另一个组件中通过 render props 属性渲染这个逻辑。这个 render props 属性的值是一个函数,该函数的作用是渲染这个逻辑。同时,它也比高阶组件简单,因为它不需要创建一个新的组件,而只需要通过一个函数渲染组件。3、访问组件的状态:使用 render props 可以访问组件的状态,从而在不同的场景下呈现不同的内容。2、动态渲染内容:通过 render props,可以在不同的场景下动态渲染内容,达到更好的可定制性。原创 2023-08-17 22:49:14 · 203 阅读 · 0 评论 -
React 之高阶组件 HOC 详解
高阶组件(Higher-Order Component,HOC)是 React 中一种代码重用的模式,它是一个函数,接受一个组件作为参数,并返回一个新的组件。高阶组件的一个典型特点是在组件外层套一个新的组件,新的组件可以使用接收的组件的属性和状态,并且可以为其提供新的属性和方法。总之,高阶组件是一种代码复用的有效方法,使得我们可以在不修改组件代码的情况下,对其进行扩展和重用,并统一处理一些通用问题。路由的高阶组件,在类组件里如果想要使用路由必须要使用高阶组件,才可以拿到路由相关的方法。原创 2023-08-17 22:47:22 · 616 阅读 · 0 评论 -
React 之 ref 详解
React提供的这个ref属性,表示为对组件真正实例的引用,其实就是ReactDOM.render()返回的组件实例;需要区分一下,ReactDOM.render()渲染组件时返回的是组件实例;而渲染dom元素时,返回是具体的dom节点。原创 2023-08-17 22:44:44 · 784 阅读 · 0 评论 -
React 上下文 Context 详解
创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件,这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。只有当组件所处的树中没有匹配到 Provider 时,其 defaultValue 参数才会生效。这有助于在不使用 Provider 包装组件的情况下对组件进行测试。注意:将 undefined 传递给 Provider 的 value 时,消费组件的 defaultValue 不会生效。原创 2023-08-17 22:43:03 · 1154 阅读 · 0 评论 -
React Fiber 架构
React Fiber 是对 React 来说是一次革命,解决了 React 项目 严重依赖于手工优化 的痛点,通过系统级别的时间调度,实现划时代的性能优化。鬼才般的 Fiber 结构,为异常边界提供了退路,也为限量更新提供了下一个起点。增量渲染(把渲染任务拆分成块,均匀分布到多帧)更新时能够暂停、终止、复用渲染任务给不同类型的更新赋予优先级并发方面新的基础能力增量渲染用来解决掉帧的问题,渲染任务拆分之后,每次只做一小段,做完一段就把时间控制权交还给主线程,而不像之前长时间占用。原创 2023-08-17 22:37:54 · 155 阅读 · 0 评论 -
React 生命周期
相比装载阶段的生命周期函数,更新阶段的生命周期函数使用的相对来说要少一些。常用的是 getDerivedStateFromProps、shouldComponentUpdate,前者经常用于根据新 props 的数据去设置组件的 State,而后者则是常用于优化,避免不必要的渲染。原创 2023-08-17 22:33:33 · 57 阅读 · 0 评论 -
组合 vs 继承 及 使用ReactDOM.createPortal实现弹框
在 React 中,Portal 直接改变了组件的挂载方式,不再是挂载到上层父节点上,而是可以让用户指定一个挂载节点。把重复的代码提取出来合并成为一个个组件,组件最重要的就是复用,位于框架最底层,其他功能都依赖于组件,可供不同功能使用,独立性强。可以根据需要把它放在页面的任意部位,也可以和其他组件一起形成新的组件。它不是从基类继承属性,而是描述一个类,该类可以引用另一个类的一个或多个对象作为实例。我们有header组件、footer组件。React 中的一切都是一个组件,它遵循一个强大的基于组件的模型。原创 2023-08-17 22:21:59 · 250 阅读 · 0 评论 -
React组件通讯详解
props是组件之间通讯的纽带。props也是组件中内置的一个属性,通过父级组件传入。在类组件里,可以直接通过this.props获取。注意:props是不可变的。如果想要修改props则需要从传入props的组件修改props改变视图会重新渲染在React应用中,对应任何可变数据理应只有一个单一“数据源”。通常,状态都是首先添加在需要渲染数据的组件中。此时,如果另一个组件也需要这些数据,你可以将数据提升至离它们最近的父组件中。你应该在应用中保持 自上而下的数据流,而不是尝试在不同组件中同步状态。原创 2023-08-17 21:31:16 · 49 阅读 · 0 评论 -
React列表渲染以及key的作用
在react的diff算法中react会借助元素的key来判断该元素是最新创建的还是被移动而来的,从而减少不必要的元素渲染。key是react用来追踪哪些列表的元素被修改,被添加或者是被删除的辅助标示。在开发过程中我们需要保证某个元素的key在其同级元素中具有唯一性。当我们用index做下标的时候,点击删除列表中的每一项,下标都会发生变化,如果用下标当做key就会触发dom重新渲染。这么乍一看,好像可以正常实现功能,但是我们通过浏览器的控制台检查列表的渲染后发现,编写一个列表,点击列表中的每一项进行删除。原创 2023-08-17 21:23:28 · 212 阅读 · 0 评论 -
React之state详解
{/*使用的时候通过this找到state在找到对应要使用的属性*/}原创 2023-08-17 19:05:44 · 490 阅读 · 0 评论 -
React中的事件详解
React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同:React 事件的命名采用小驼峰式(camelCase),而不是纯小写。如点击事件onClick使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串/*** 直接在类里面定义一个方法*/hello () {console.log("哈喽我是点击事件")/*** class 中定义方法的方式有多种*/return ({/*onClick后面跟上事件对应的方法名。原创 2023-08-17 17:22:46 · 372 阅读 · 0 评论 -
React修改第三方组件的样式
以ant-design为例。原创 2023-08-17 16:05:04 · 777 阅读 · 0 评论 -
什么是语法糖(Syntactic sugar)
语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会。中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便。(Peter J. Landin)发明的一个术语,指。对语言的功能并没有影响。对语言的功能也没有影响。原创 2023-08-17 14:21:04 · 58 阅读 · 0 评论 -
React使用条件渲染模拟Vue的动态组件
使用场景:当发现点击不同的 tab 页,切换不同的内容信息(标签结构) 时,就可以使用动态组件。动态组件:动态组件就是根据数据的变化而切换不同的组件,从而展示不同的内容。原创 2023-08-16 14:12:40 · 279 阅读 · 0 评论 -
React项目中引入彩色iconfont图标
项目public目录下index.html文件中,通过script标签的src属性引入。1.在iconfont的项目中,选择Symbol。我们在开发中需要引入iconfont的彩色图标。3.可以封装成一个组件来复用。2.将生成的链接复制到。原创 2023-08-16 11:30:17 · 323 阅读 · 0 评论 -
React 中如何编写样式
{/* 使用className定义类名 */}红色原创 2023-08-16 09:52:05 · 416 阅读 · 0 评论 -
React 的 jsx 语法
设想如下变量声明;他既不是html也不是字符串,他是什么呢?它被称为 JSX,是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言,但它具有 JavaScript 的全部功能。原创 2023-08-16 09:43:21 · 53 阅读 · 0 评论