为什么要重新呈现(memoized)子组件？
在React中，重新呈现（memoized）子组件是为了优化性能。当父组件重新渲染时，React会比较父组件的新旧props和state，如果发现子组件的props没有发生变化，React会跳过子组件的重新渲染，从而节省了不必要的计算和渲染时间。
重新呈现子组件的优势包括：
- 提高性能：通过避免不必要的重新渲染，可以减少组件树中的计算和渲染操作，从而提高应用的性能和响应速度。
- 减少资源消耗：重新渲染子组件需要消耗CPU和内存等资源，通过避免不必要的重新渲染，可以减少资源的消耗，提高应用的效率。
- 避免副作用：某些组件可能会有副作用，例如发送网络请求或订阅事件。通过避免不必要的重新渲染，可以减少副作用的触发次数，避免不必要的网络请求或事件订阅。
重新呈现子组件适用于以下场景：
- 纯展示组件：对于只依赖于props的纯展示组件，如果父组件的props没有发生变化，可以使用memo或React.memo进行包裹，以避免不必要的重新渲染。
- 高开销组件：对于计算密集型或渲染开销较大的组件，如果父组件的props没有发生变化，可以使用memo或React.memo进行包裹，以减少不必要的计算和渲染操作。
- 避免副作用：对于有副作用的组件，如果副作用的触发条件依赖于props的变化，可以使用memo或React.memo进行包裹，以减少副作用的触发次数。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：提供可扩展的云服务器实例，满足不同规模和需求的应用场景。详情请参考：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版：提供高性能、可扩展的云数据库服务，支持MySQL数据库。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：提供高度可扩展的容器化应用管理平台，简化容器部署和管理。详情请参考：https://cloud.tencent.com/product/tke
- 人工智能机器学习平台（AI Lab）：提供丰富的人工智能开发工具和资源，支持机器学习、深度学习等应用场景。详情请参考：https://cloud.tencent.com/product/ailab
请注意，以上链接仅为示例，实际使用时应根据具体需求选择适合的腾讯云产品。
相关·内容
1回答
我有两个React功能组件：C1和C2。问题所在 我知道组件在不同的情况下会被重新渲染。其中之一是当父级重新渲染时。 这就是为什么我在C2周围使用了一个memoized组件。为什么？
浏览 9提问于2021-09-23得票数 0
回答已采纳
1回答
我试图避免太多的子组件重新渲染，但不知道如何优化下面的代码：{ 7:{
1:{<Day>都会被重新呈现。不仅如此，每当日历内部状态的任何部分更新时，两个<Day>都会重新呈现。，当我更新一天时，只有一个<Day>被重新渲染，如果我更新日历组件的内部状态，没有<Day>被重新</
浏览 8提问于2019-07-17得票数 0
回答已采纳
我正在使用react-redux，并且我有一个组件连接到它。我的组件有自己的属性(变量和函数)，也有一些来自store的状态映射，使用mapStateToProps。管理这个组件何时应该重新呈现对我们来说非常重要，为此，我们使用propsAreEqual作为React.memo的第二个参数。 ...mapStateToProps, dispatchProps)(React.memo(MyFunction, propsAreEqual)); 我的问题是，在这种情况下，在state.user.name更改后，
浏览 22提问于2020-09-14得票数 1
回答已采纳
每次状态改变时，我的孩子的状态都会被重新渲染。有什么方法可以摆脱它吗？如何防止我的子组件不受这种类型的重新渲染的影响。请帮帮忙。
浏览 3提问于2020-06-12得票数 1
我列出了每个元素的图像url和otehr参数，因为我在每个元素"isFavorite“(true/false)中添加了更多参数，默认设置为"false”。 现在我点击图片调用收藏/不收藏的api和成功的API，更新列表，如isFavorite: true，如果为true，则将特定元素设置为false。 所以，现在的问题是，一旦我设置了最喜欢/最不喜欢的标志，并使用setState()更新我的列表，图像将浮动或闪烁。 收听图像url未更改。 我还检查了"KeyExtracter“键对于所有元素都是唯一的，并且列表更新后键不会改变。 我还设置了图像属性的源和default
浏览 14提问于2021-07-06得票数 0
2回答
我知道React会在状态或道具更改时执行重呈现(或者当我们强制组件重新呈现时)。我也知道当组件被重新呈现时，反应会重新呈现组件的子元素。我注意到，即使它的道具(子道具)没有改变，也会重新呈现子组件，所以当父组件传递与以前相同的道具时。
为什么会这样呢？是否有反应重新<
浏览 8提问于2020-04-30得票数 7
回答已采纳
我得到了一个React memoized回调，它使用了redux存储中的值： const filterValue = useSelector(state => state.filterValue);item.description.toLowerCase(), filterValue.toLowerCase()),
[filterValue]); 我的问题是，是否只有当filterValue发生变化时才会重新呈现memoized回调，或者我是否必须将filterValue设置为组件状态，而不是来自r
浏览 17提问于2020-04-26得票数 0
1回答
我试图从JSON文件导入数据，并将其作为道具发送到todos组件文件，但我没有在Todos文件中使用它作为道具，但当我在应用程序组件中使用add按钮更新文件时，它会更新todo列表。我不明白它为什么要这么做。如果有人能解释一下发生了什么，那将是一个很大的帮助。
浏览 0提问于2021-06-15得票数 1
然后，当父道具发生更改时，为什么子组件会更改。2)如果虚拟DOM每次只呈现尚未呈现的组件，那么当父道具发生更改时，为什么要重新呈现子组件
浏览 3提问于2017-10-22得票数 3
回答已采纳
子组件的值不重呈现。那么子组件就会重新呈现，但这是因为整个父组件都在重新呈现。一旦附加到DOM，子组件将监视他的title属性，因此它应该意识到分配给它的值发生了变化并重新呈现。
我不明白为什么我必须重新呈现整个父母让孩子重新呈现。使用开发人员控制台并访问DOM中的组
浏览 4提问于2020-02-27得票数 4
回答已采纳
3回答
dispatch(fetchSelectedItemsSuccess(response.data))为什么useDispatch要重新呈现父组件？我尝试了useCallback，就像在Redux文档中一样，但是是为了防止子组件重新呈现，而不是父组件。
浏览 3提问于2020-03-04得票数 5
我使用第三方组件来呈现树表，这是一个正常的流程，父组件通过传递所需的道具调用子组件。支持: 1.树(包含要呈现为树的实际数据) 2. sortOrderimport TreeDataTable from什么工作: 1.父组件2中的状态更改。父组件重新呈现3。用更新的道具调用子<
浏览 1提问于2018-11-02得票数 0
当根组件的状态发生变化时，React.js假设重新呈现所有子组件(子组件)？请看下面的示例：
在上面的示例中，只有Search子组件在Dashboard组件的状态发生变化时才重新呈现.但其他子组件-区段、图表和Widget不重新呈现., children: [Section({title: "S&qu
浏览 7提问于2014-05-22得票数 1
回答已采纳
我有这样一个组件 return <Fragment>或者react本身理解没有必要重新构建组件Gurdingo。
浏览 5提问于2019-07-08得票数 1
回答已采纳
我理解所有代码，但无法理解为什么在web控制台中出现错误：基本上，我有一个工作的 JSX文件，并在asp.net mvc视图中呈现它。@Html.React("myClass",{ data = "Martin" })
@Ht
浏览 5提问于2016-10-15得票数 1
回答已采纳
我有这个应用程序，我在页面加载时拉取大量数据，然后使用react-tables呈现一个表。每一行都有一个遵从性列，其中包含某些内容是否符合的状态标签。该表需要很长时间才能呈现，当它大约有1400行时，这是预期的。但是我不明白为什么在调用addQueuedChange函数时它会重新呈现？
浏览 25提问于2020-09-02得票数 0
回答已采纳
在反应中，如果父组件"A“重新呈现并改变其子组件"B”的位置，但是B的道具和状态没有改变，那么"B“会被重新呈现吗？如果会的话，为甚麽要这样做呢？
浏览 0提问于2019-03-14得票数 2
回答已采纳
我试图在React.memo()中包装一个子组件("Box")，以避免在父组件从状态更改重新呈现时不必要的重呈现。但这并不适用于props.children属性。但是为什么呢？如果没有使用props.children，那么如何使用组合和memo属性来实现这一点呢？(1)传递组件示例(已工作)：<Box title="i am a box" />
(2)传递组件示例(无效)：
浏览 6提问于2022-05-27得票数 1
1回答
在将类组件转换为带有钩子的函数组件期间，我遇到了一个场景，我将尝试用一个简单的示例重新创建该场景：
// inside render method
ren
浏览 4提问于2020-09-08得票数 1
回答已采纳
1回答
legalStep x]
main = putStrLn $ show $ length $ iteractStep (boardX + boardY) memoized_fib :: Int -> Integer fib 1 = 1
浏览 0提问于2017-02-08得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
