如何防止依赖于 memoized 父组件的子组件发生不必要的重新渲染 state
[英]How to prevent unecessary rerenders in child components dependent on memoized parent component state
问题描述
App有 state，从中计算出一个记忆值，该值作为道具传递给Option s。 当 state 由于传递给Option的回调而改变时， App被重新渲染，导致
- 所有
Option的重新呈现 -
SomeComponent的重新渲染，它甚至不需要任何道具
我正在寻找一种使用 React 钩子和 state 管理的模式，它只允许重新呈现Option中的 2 个 - 一个被取消选择，因为它的isSelected属性从 true 变为 false，另一个被选中，因为它的isSelected属性从 false 变为 true。 我不明白为什么其他子组件，尤其是SomeComponent需要重新渲染，而它们的道具没有改变。
1 个解决方案
解决方案1
0 已采纳 2022-03-30 17:19:09
这通常是通过 React.memo 完成的，以使渲染的组件仅依赖于它们的道具，除非它们的道具发生变化，否则不会重新渲染。
React hook如何在父级重新渲染时避免执行子组件
[英]React hook how to avoid executing child components when parent rerenders
如何让父组件在React中管理子组件的状态？
[英]How to let a parent component manage the state of child components in React?
通过父组件过滤子组件时如何维护子组件的state？
[英]How to maintain state of child components when they are filtered through the parent component?
防止在父组件状态更改后重置子状态也可以获取所有子组件的值：ReactJS + Typescript
[英]Prevent child's state from reset after parent component state changes also get the values of all child components:ReactJS+ Typescript
如何在 React.js 功能组件中将子组件 state 传递给父组件 state？
[英]How to pass child component state to parent component state in React.js functional components?
当子组件触发对父组件的状态更改时如何防止父组件重新渲染
[英]How to prevent parent component re-render when child component triggers a state change to parent
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.