Day 20 - React.memo

如果有错误,欢迎留言指教~ Q_Q 没写完啦

子元件通常会接收父元件的 state 或 event,如果父元件的状态改变了,即使 props 的结果没有变,子元件依然会 re-render

在需要减少渲染的元件外面再包一层 React.memo ,就可以让 React 帮我们记住原本的 props。

但是!React.memo 只会自动检查 Props,不会管 State!

React.memo 可以接收第二个 CallBack 函式,只要回传 false 就会 Render,true 就不会,和之前的 shouldComponentUpdate 相反,然後它只能取到 Props 来判断,没有 State。

用 shallowly compare 的方法确认 props 的值是否一样, shallowly compare 在 props 是 Number 或 String 比较的是数值,当 props 是 Object 时,比较的是记忆体位置 (reference)。

因此,当父元件重新渲染时,在父元件宣告的 Object 都会被重新分配记忆体位址!


<<:  [Day 30] Bug修好了 & 30天感想

>>:  Day20 React 回圈渲染多个元件

【Day 23】为美好的 Windows 献上 ETW - Event Tracing for Windows

环境 Windows 10 21H1 ETW 介绍 历史 ETW (Event Tracing fo...

Day 24 - PVE 修复 Loading initial ramdisk

今天笔者遇到一个问题,系统在开机时卡在 “Loading initial ramdisk”,用了一些...

入侵检测系统( intrusion detection system :IDS)

一个基於主机的IDS可以监视并通过安装加密的网络通信中分析活性剂在端点上。一个基於网络的IDS,依靠...

威胁建模作业

如果顾问对客户说:「尊敬的贵宾,您说的都对...(後略○○字),但我们需要聚焦在关键○○○...(後...

D20/ 怎麽在 compose 与 non-compoe 间传资料 - Compose Side-Effect part 2

今天大概会聊到的范围 rememberUpdateState 上一篇聊到,SideEffect 周...