前端hook项目pc总结笔记-hook中memo包裹子组件

于 2023-03-07 19:23:33 发布
阅读量131 收藏
点赞数
文章标签： 学习 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41632427/article/details/129261681
版权

export default memo(PersonList);

memo 包裹子组件 当父子之间的属性没发生变化时候 不用重新渲染组件

前端歌谣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
高阶组件memo
m0_71902265的博客
12-20 285
函数自组建不受父组件 render 的影响
使用 useMemo,useCallback，Reat.memo() 处理不必要的子组件渲染，以及它的实现原理
冲锋
06-24 990
场景1- 演示一个子组件更新 父组件中一个输入框， 输入值，父组件更新， 同时引入子组件，但子组件也会跟着更新 import React, { useState } from "react"; import ReactDOM from "react-dom"; // 子组件 function Bpp() { console.log("%c Bpp render", "color:green"); return ( <> <div&g
React memo使用解决高频组件渲染问题
qq_25757181的博客
09-26 791
新增一个名字为New Cat的Cat，添加到数组之后，即使memo包囊的子组件PureCat，子组件依然被重复渲染了。因为cats发生变化，state重新计算，导致父组件重新渲染，导致edit重新生成了新的方法，子组件props中edit发生了变化，导致子组件重新被渲染了。解决思路：子组件用 React.memo() 包裹，如果组件在相同 props 的情况下渲染相同的结果，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。期望：子组件不要频繁的渲染，只渲染新增或发生变化数据的子组件。
React下memo, useMemo, useCallback的使用区别解析
赵花花的博客
03-06 988
本文通过对 React 中 memo，useMemo，useCallback的目的，使用场景，案例等帮助开发者了解具体使用技巧。
memo 的使用
我的博客
10-17 1111
memo的作用？ memo用于性能优化， 如果当前组件中的数据没有发生变化，那么memo方法就会阻止本次组件的更新，它的功能类似于pureComponent和shouldComponentUpdate memo的使用方法 import React, {useState, memo} from "react"; function My_Memo1 (){ const [count, setCount] = useState(0) return ( <div&gt
pc-vx-hook-http-api-36018.zip
12-29
标题“pc-vx-hook-http-api-36018.zip”和描述“pc-vx-hook-http-api-36018”暗示了这是一个与计算机软件相关的压缩文件，可能包含一个或多个程序或库，用于在PC（个人电脑）上钩取（hook）HTTP API。在IT领域，...
PCHOOK例子（pc3.9.10.19）
最新发布
06-20
hook版本3.9.10.19 仅供学习研究交流使用 禁止用于商业或者非法或用 hook版本3.9.10.19 仅供学习研究交流使用 禁止用于商业或者非法或用 hook版本3.9.10.19 仅供学习研究交流使用 禁止用于商业或者非法或用 hook...
emqx-lua-hook：EMQ X钩钩
02-03
EMQ X钩钩，即emqx-lua-hook，是一个基于EMQ X Broker的扩展插件，主要用于在MQTT消息发布、订阅等过程中插入自定义逻辑。EMQ X是一款开源的 MQTT 消息代理，它支持大规模分布式部署，适用于物联网(IoT)场景。而...
use-force-update-hook:React挂钩，允许在功能组件中使用forceUpdate（）
03-21
安装npm i --save-dev use-force-update-hook用法该软件包导出2个钩子： useForceUpdate和useForceUpdateWithCallback 。通常，您应该使用useForceUpdate钩子： import React from 'react'import ReactDOM from '...
react-hook-layout:React中的布局管理
05-01
import { defineSlots , useLayout } from "react-hook-layout" ; const Page = ( ) => { const { Content , Footer , Header , SidebarLeft , SidebarRight } = defineSlots ( "Content" , "Footer" , "Header...
【1024用代码改变世界】useMemo 和 useCallback｜React.memo使用场景
Coding and studying
10-22 3400
useMemo / useCallback都是React内置的用于性能优化的hook，它们常常被开发人员用来包裹（缓存memory），但是真的是所有的数据、函数、变量都需要使用useMemo / useCallback去缓存吗？可直接看结论。
React中Memo实现指定组件进行渲染
陈开心的博客
01-16 1225
memo可以解决react渲染时的效率问题，react可以将数据渲染在视图中，如果数据没有变化，视图还是重新渲染 import React, { Component } from 'react'; // , PureComponent, memo, useState, useMemo, useCallback class Foo extends Component { render() { ...
React 中性能优化、 memo、 PureComponent、shouldComponentUpdate 的使用
zh0623的博客
10-08 397
场景 React是一个用于构建用户界面的JavaScript库，主要负责将数据转换为视图，要保证数据和视图的统一，react通过 重新render来保证数据和视图的统一，但当数据没有变化时，视图重新渲染，就会造成不必要的性能浪费 看下面这个例子， import React from 'react' class Children extends React.Component { render () { console.log(' Children ren...
React进阶用法和hooks的个人使用见解(Typescript版本) - 3.useCallback+useMemo+memo性能优化
mackJun的博客
08-17 6556
3.useCallback+useMemo+memo性能优化场景使用 当父组件引入子组件的情况下，往往会造成组件之间的一些不必要的浪费，下面我们通过例子来了解一下场景 3.1创建一个test.tsx文件，我们拷贝上篇博客的useState的案例 import React, { useState } from 'react'; function Test() { const [count, ...
React中memo()，useMemo()，useCallback()的使用(区别，解决了什么问题)
你是我修复不了的bug，但我会用一生去维护
05-09 950
React中memo()，useMemo()，useCallback()的使用 前言：React框架中，当组件的props或state发生变化时，会重新渲染组件，实际开发中会遇到不必要的重新渲染场景。这里的memo()，useMemo()，useCallback()都是应用在函数组件中。调理不够清楚，希望你能够一步一步看。 React.memo() React.memo()和类组件中React.PureComponent()很相似，它可以帮助我们控制什么时候重新渲染组件，它适用于函数组件，但不适用于 cla
React 【一】Memo是用来干什么的
二三的博客
07-16 1854
React.Memo是React16.6新的一个API,用来缓存组件的渲染，避免不必要的更新，也是一个高阶组件，与类组件的十分类似，不同点在于，React.Memo只能用于函数组件。在react中，组件渲染是最常有的事情。但是，有部分的组件渲染时不必要的，是可以避免的。在react的一般规则中，只有父组件的某一个状态改变，父组件下面所有的子组件不论是否使用了该状态，都会进行重新渲染，这可以称之为无效渲染。...
react | memo与useMemo的作用以及区别
weixin_62395055的博客
08-04 2681
React.memo 是一个高阶组件.如果你的组件在给定相同的 props 的情况下呈现相同的结果，你可以将其包装在对 React.memo 的调用中，以便在某些情况下通过记住结果来提高性能。这意味着 React 将跳过渲染组件，并重用上次渲染的结果。React.memo 只检查 prop 的变化。如果你用 React.memo 包装的函数组件在其实现中有 useState、useReducer 或 useContext Hook，那么当状态或上下文发生变化时，它仍然会重新呈现。默认情况下，它只会浅浅地比较
react函数组件特性和memo及useCallback的使用
Suk__的博客
08-03 456
每次状态更新组件都会重新渲染 每次组件更新就像是在给组件拍照,每次更新就是一张照片,记录了组件在某个时刻的状态 组件每次更新都有自己独立的state/props/事件处理程序等 每次拍照的照片在代码层面来讲都是通过函数的闭包机制实现的 ...
react组件放在数组中_为什么要在函数组件中使用React.memo？
weixin_30696229的博客
01-24 197
这里提一下，如果大家看到这个标题有所疑惑的话，可以花点时间看一下本篇文章。反之呢如果是看到标题第一时间就反映出结论的话，就可以去get其他文章的知识点了那么接下来就不废话了，直接长刀直入，进入正题！初探memo首先让我们用一个例子走进React.memo的世界呆呆的函数组件 - 没有使用memo对于一个函数组件来说，如果没有使用React.memo就好比是一个人没有脑子，就笨笨的呆呆的不信我们就来...
React hook子组件事件代码中调用父组件方法
12-02
可以通过使用React的forwardRef和useImperativeHandle来实现子组件事件代码中调用父组件方法的功能。具体步骤如下： 1.在父组件中创建一个React ref，并将其传递给子组件： ```jsx import React, { useRef } from 'react';import ChildComponent from './ChildComponent'; function ParentComponent() { const childRef = useRef(null); function parentMethod() { console.log('This is a method in the parent component.'); } return ( <div> <ChildComponent ref={childRef} parentMethod={parentMethod} /> </div> ); } export default ParentComponent; ``` 2.在子组件中使用forwardRef来承接父组件传入的ref节点，并将其以参数的形式传给子节点： ```jsx import React, { forwardRef } from 'react'; const ChildComponent = forwardRef((props, ref) => { // 子组件的方法 function childMethod() { console.log('This is a method in the child component.'); } // 将子组件的方法和父组件的方法绑定到ref上 useImperativeHandle(ref, () => ({ childMethod: childMethod, parentMethod: props.parentMethod })); return ( <div> <button onClick={props.parentMethod}>Call Parent Method</button> </div> ); }); export default ChildComponent; ``` 3.在子组件中使用useImperativeHandle来绑定子组件的方法和父组件的方法到ref上，这样就可以在子组件中通过ref调用父组件的方法了。 ```jsx import React, { forwardRef, useImperativeHandle } from 'react'; const ChildComponent = forwardRef((props, ref) => { // 子组件的方法 function childMethod() { console.log('This is a method in the child component.'); } // 将子组件的方法和父组件的方法绑定到ref上 useImperativeHandle(ref, () => ({ childMethod: childMethod, parentMethod: props.parentMethod })); return ( <div> <button onClick={props.parentMethod}>Call Parent Method</button> </div> ); }); export default ChildComponent; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值