![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
每天吃饭的羊
学不完,根本学不完
展开
-
react面试题
React 面试题: 不一定最全但绝对值得收藏!!(11 ~ 20)(万字总结) - 掘金原创 2023-12-04 11:11:47 · 46 阅读 · 0 评论 -
react官网
正版盗版。原创 2023-10-31 17:19:32 · 414 阅读 · 0 评论 -
React秘诀
https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg3OTYzMDkzMg==&action=getalbum&album_id=2150429217522614274&scene=173&from_msgid=2247499054&from_itemidx=1&count=3&nolastread=1#wechat_redirect原创 2023-10-26 18:02:06 · 122 阅读 · 0 评论 -
react,Chart,echarts
同一个窗口打开官网地址能获取到的人家的Json数据的。控制台可见:右击 Copy object就复制了。解决办法2:在示例代码中添加如下代码。2.然后实现下这个案例。原创 2024-04-24 18:12:27 · 419 阅读 · 0 评论 -
react的闭包陷阱
React 的闭包陷阱是指在使用 React Hooks 时,由于闭包特性导致在某些函数或异步操作中无法正确访问到更新后状态或 prop 的值,而仍旧使用了旧值。原创 2024-04-09 01:25:41 · 825 阅读 · 0 评论 -
Redux Toolkit
Redux Toolkit(RTK) – 李立超 | lilichao.comRedux | Redux 中文文档原创 2024-03-27 14:06:25 · 128 阅读 · 0 评论 -
react19
React 19 发布在即,抢先学习新特性原创 2024-02-27 16:46:38 · 119 阅读 · 0 评论 -
forwardRef
当你使用第三方UI库的组件时,可能想要直接访问这些组件内部的DOM元素或方法,而不是通过props进行传递。通过使用forwardRef,你可以将ref传递给封装的第三方组件,以便直接操作其内部的DOM或方法。:有时,父组件需要访问子组件的实例或其内部的DOM元素。通过使用forwardRef,你可以在子组件中封装并暴露ref,使得父组件能够直接引用子组件实例或DOM元素。通过使用forwardRef,你可以方便地访问子组件内部的DOM元素或实例,并实现更灵活和可复用的组件逻辑。可以通过将ref传递给。原创 2024-02-27 16:36:10 · 836 阅读 · 0 评论 -
fiber学习
React原理:通俗易懂的 Fiber - 掘金原创 2024-01-30 11:42:43 · 90 阅读 · 0 评论 -
Fiber
在Fiber架构下,React不再是单一连续的操作流,而是将渲染任务拆分为多个细粒度的单元(Fiber节点),这些节点可以被逐个处理,也可以根据需要被挂起、恢复和重新排序,从而实现异步渲染和优先级调度。这样就可以确保动画不卡顿,用户体验更好。如果在Fiber中遇到一个可能耗时较长的任务,Fiber调度器会在遍历过程中检查剩余时间,并在时间不足的情况下主动放弃当前任务的执行,转而去处理更高优先级的任务或者暂时把控制权交还给浏览器,等待下一个合适的时机(如空闲回调或下一帧动画帧)再继续未完成的更新。原创 2024-01-29 12:50:59 · 975 阅读 · 0 评论 -
useReducer
【代码】useReducer。原创 2023-12-22 13:59:27 · 22 阅读 · 0 评论 -
子组件调用父组件的方法
当子组件需要调用父组件的方法时,可以将这个方法作为props从父组件传递给子组件。然后,在子组件内部,通过调用这个props就可以实现与父组件的通信。实际应用中,请根据你的具体需求选择合适的方式进行组件间的通信。这种方法并不常用,因为它破坏了组件之间的封装性,通常只在特殊情况下使用,例如处理DOM操作或者获取组件实例。创建一个引用,并将其作为属性传递给子组件。这样,你就可以通过这个引用访问到子组件的方法。然后,在父组件中,你需要使用。是父组件的一个方法,它被传递给了子组件作为。然后,在子组件中,我们通过。原创 2023-12-14 02:14:58 · 1692 阅读 · 1 评论 -
组件的二次封装
组件,我们想要创建一个更复杂的自定义按钮组件,该组件除了具有基础按钮的所有功能外,还具有一些额外的功能,如显示模态框等。在这种情况下,我们可以使用扩展运算符将所有传递给我们的props传递给基础按钮组件。)来传递props的作用是将一个对象的所有可枚举属性(包括自身的和继承的)复制到新创建的对象中。当我们在二次封装组件时使用它,可以方便地将所有传递给我们的props传递给基础组件。的组件,它接受任意数量和类型的props。将具有与基础按钮组件完全相同的API,但还可以添加更多的功能或样式。原创 2023-12-14 02:07:06 · 608 阅读 · 0 评论 -
useMemo和useCallback
是React中的两个优化性能的钩子(Hooks)。它们都可以用来缓存计算结果,避免在每次渲染时都重新执行耗时的操作。然而,它们的主要区别在于缓存的内容和使用场景。如果依赖数组中的值没有变化,则直接返回之前缓存的结果。当你有一个需要频繁创建的函数,并且该函数作为props传递给子组件时,你可以使用。它接收两个参数:一个回调函数和一个依赖数组。当依赖数组中的任何一个值发生变化时,同时使用这两个Hook可以提高React应用的性能,减少不必要的计算和组件更新。来确保只有当依赖项改变时才创建新的函数引用。原创 2023-12-11 22:17:53 · 404 阅读 · 0 评论 -
react的函数式编程分页的时候还有查询条件,当翻页或者有查询条件的时候去调用接口,查询条件是个对象,如何实现,具体的代码
【代码】react的函数式编程分页的时候还有查询条件,当翻页或者有查询条件的时候去调用接口,查询条件是个对象,如何实现,具体的代码。原创 2023-12-05 18:06:57 · 471 阅读 · 0 评论 -
react传值
在React中,父组件向子组件传递数据是通过props实现的,而子组件向父组件传递数据则需要通过回调函数的方式。对于爷孙组件之间的通信,可以通过在中间组件上设置props和回调函数来传递数据。兄弟组件之间的通信则需要通过共享状态或者通过父组件来进行中转。原创 2023-12-04 10:41:55 · 760 阅读 · 0 评论 -
react里的条件渲染
原创 2023-12-01 09:34:22 · 21 阅读 · 0 评论 -
useDispatch和store.dispatch
是 Redux 的底层 API,更适用于那些需要直接与 Redux store 交互的场景,比如在异步操作、Redux 中间件中,或者在类组件中。是 Redux 中的一个方法。它们的作用是触发 Redux 中的 action,从而更新状态。是为了更好地与 React 集成,提供了在函数组件中使用 dispatch 的便捷方式。是 React Redux 提供的一个 hook,而。在 React 中,原创 2023-11-30 18:22:32 · 515 阅读 · 0 评论 -
useEffect和useMemo
useEffect会执行吗?只有数组里传了count才会执行,没有的话不会执行(但页面中的state还是响应式的,只是不会执行useEffect里面的内容)。useMemo的侧重点在缓存昂贵的计算,这点很像computed用法,如果不指定依赖,就不会执行。useEffect里所执行的大多都是副作用方法,操作dom,监听事件,请求数据等。每次点击=》状态发生改变会执行Example()函数,原创 2023-11-30 02:19:05 · 477 阅读 · 0 评论 -
react中的state
没想到hooks中也有state这一说法。1、无state变化不会执行父子函数。2、有state更改执行父子函数。原创 2023-11-23 19:02:04 · 190 阅读 · 0 评论 -
hooks实现的高阶组件demo
【代码】hooks实现的高阶组件demo。原创 2023-11-17 01:28:03 · 31 阅读 · 0 评论 -
通过高阶函数理解高阶组件
最外层的函数在没有return之前是接收不到里层函数的值的。好多高阶组件都是这样的一种结构。它这里的传参是一层一层的,原创 2023-11-16 09:28:38 · 30 阅读 · 0 评论 -
高阶组件?????我不理解
【代码】高阶组件?????我不理解。原创 2023-11-08 17:42:49 · 37 阅读 · 0 评论 -
useEffect和useLayoutEffect的区别
看下面的代码,即使调换useLayoutEffect和useEffect的位置依旧是useLayoutEffect先输出。从下面代码可以看出useLayoutEffect有绝对的优先级。原创 2023-11-07 16:51:44 · 119 阅读 · 0 评论 -
useContext本身并不能直接向下传递方法,
是从 context 中获取的,并且被传递到子组件中。当你点击 "Call myFunction" 按钮时,就会调用。本身并不能直接向下传递方法,但可以通过将其包装在自定义 hook 中来实现。例如,假设你有一个 context 叫做。,其中包含一个函数叫做。原创 2023-11-07 00:16:24 · 102 阅读 · 0 评论 -
小菜React
3、组件名要大写:Father.tsx, export default Father, const Father:FC,........import {Father} from '@/components/setup.tsx' 错误。import Father from '@/components/setup.tsx' 正确。export default useStore默认导出的钩子,组件引入的时候不要用{}包裹。对于函数就写.ts,有dom元素就写.tsx。原创 2023-11-06 15:37:08 · 251 阅读 · 0 评论 -
setState到底是同步还是异步
setTimeout,setInterval等原生事件都不会进入调度流程(同步)18之后使用creatRoot创建应用,所有的事件都会进行批量处理(异步)同步造成性能的浪费,调用三次setState后只需要渲染最后一次就好。18 之前只要是进入调度流程就是异步,没有就是同步。如果使用render,还是和18之前的机制一样。官方的合成事件都会进入调度流程(异步)异步处理就是批量处理。原创 2023-11-06 09:55:11 · 65 阅读 · 0 评论 -
学不会的HOC
38-react之高阶组件_哔哩哔哩_bilibili原创 2023-11-01 15:24:12 · 38 阅读 · 0 评论 -
HOC示例
2. withRouter: 一个用于将路由信息注入到组件中的高阶组件,它将路由的match、location和history对象作为props传递给包装组件,使得包装组件可以在不是路由组件的情况下访问和修改路由信息。3. connect: 一个用于连接组件和Redux store的高阶组件,它通过将store中的state和dispatch函数作为props传递给包装组件,使得包装组件可以访问和修改store中的数据。2. withRouter:将路由参数注入组件,使组件可以直接获取到路由的相关信息。原创 2023-10-25 00:21:22 · 116 阅读 · 0 评论 -
创建一个react项目 create-next-app
项目结构很奇怪啊,没找到.html文件,只在src/app/layout.tsx中找到了个html标签,也没找到page.tsx和layout.tsx的依赖关系,而且在page.tsx中有个main标签。之前是用的creact-react-app来创建的:npx create-react-app my-app。但现在却使用了creact-next-app:npx create-next-app。这里的css使用了tailwind。npm run dev如下。我们把他所有的选项都选上。原创 2023-10-13 15:41:23 · 351 阅读 · 0 评论 -
chalk
今天在看antd-design,发现一个叫chalk的东西。原创 2023-09-28 14:38:53 · 51 阅读 · 0 评论 -
react import爆红
输入Reload window, 如上的第一个,选中后回车,标红就没了,非常好用。解决办法:在vscode内部SHift+Ctrl+P。原创 2023-09-27 16:33:49 · 441 阅读 · 1 评论 -
HOC的运用
HOC原创 2023-09-25 09:45:04 · 65 阅读 · 0 评论 -
useContext
6、Prop Drilling就是一种传值方式,具体表现为父->子->孙,子组件不会使用的到,只在孙组件使用,代码冗余,不好维护。3、Mobx,Redux,Saga,DVA, ZuStand是比较常见的,也有redux-saga,react-redux等。2、在众多react状态管理工具中,MobX和Redux-Saga提供了异步方法。1、在大厂已经使用useContext来代替Redux等状态管理工具。如果是大项目,大团队协作开发推荐使用。中,异步操作需要借助第三方库。原创 2023-09-18 15:22:29 · 343 阅读 · 0 评论 -
使用ref如何获取到input标签中的值
要使用 ref 获取到 input 标签中的值,首先需要创建一个 ref 对象并将其绑定到 input 标签上。然后,可以通过访问 ref 对象的 value 属性来获取标签中的值。,并将其绑定到 input 标签上。然后,在表单的 onSubmit 事件处理函数中,我们可以通过访问。在这个示例中,我们创建了一个 ref 对象。原创 2023-09-10 12:45:57 · 921 阅读 · 0 评论