Reactjs 性能问题-仅更新显示数据的组件

我遇到了一个我不知道如何解决的性能问题。 我有一个这样的组件结构（

是父组件）：

通过

PostContext

传递的处于

post

状态的数据（见下文）

在下面的屏幕上，当我点击我的组件的“Like”按钮时，您可以看到chrome性能选项卡，它更新了

likeCount

，它只显示在

组件中

当我点击“喜欢”按钮时，我发送标准的Axios post请求，然后使用以下方法更新通过

PostContext

传递的

post

状态：

import { PostContext } from "../../../context/PostContext"
const [post, setPost] = useContext(PostContext)
[...]
setPost({ ...post, isLikedByUser: isLiked, likeCount: likeCount })

这里没什么特别的，但是，正如你在上一张截图上看到的，整个更新大约需要300毫秒（在智能手机上更糟糕…），这对用户体验非常不利

---

我该怎么做才能只更新

，而不更新

中的其他组件（例如

或

）

，因为越来越多的评论会导致类似

的帖子出现问题

我建议您将
注释
组件包装为（相当于类组件中的
shouldComponentUpdate
），如果没有更新，它将阻止不必要的重新呈现
注释

注意：
作出反应。备注
仅检查道具更改。如果封装在
React.memo
中的函数组件在其实现中有一个
useState
或
useContext
钩子，则当状态或上下文更改时，它仍将重新加载

事实上，您可以包装所有不需要不必要渲染的组件

记住下面的陈述

即使React只更新更改的DOM节点，重新渲染仍然需要一些时间。在许多情况下，这不是问题，但如果速度明显减慢，则可以通过覆盖生命周期函数
shouldComponentUpdate
（在重新渲染过程开始之前触发）来加速所有这一切

您是否将
likeCount
作为
prop
从PostDetail传递给likeCount组件？组件
Description/Comments
是否从PostDetail接收道具更新？或者所有这些组件都通过useContext？单独订阅上下文更新@PrathapReddy，我不会将likeCount作为道具传递。我在
组件中导入
PostContext
，然后声明
const[post，setPost]=useContext（PostContext）
（与
说明/注释
相同）并检索
likeCount
，例如：
post.likeCount
，因为每个组件都订阅了上下文，他们将获得所有相关更新。从反应的角度来看，这可能不是问题。现在的问题是，你什么时候会显示类似计数更新。您是否在成功响应API时显示更新的喜欢次数。用户点击和更新之间是否有延迟？这是你真正的问题吗。如果我解释错误，请更正我在进行api调用以获得更好的用户体验之前实际更新了
likeCount
（如果我收到
code！==200
，那么我将恢复更改并将likeCount设置为其以前的值），并且工作正常。问题是，随着帖子上评论数量的增加，更新需要越来越多的时间才能完成，每秒帧数下降到1，这将使整个浏览器冻结300毫秒。此外，如果必须将数据作为道具传递给所有子组件，那么为什么要使用useContext？当我实现
useContext
时，我的目标是避免将
props
传递给整个组件树，我将在明天尝试这样做，并将您的响应标记为有效的答案！当然但请记住答案中的注释点。您可以检查React Developer Tools中的Highlight Updates按钮，并查看上述代码更改前后的组件（注释）更新。
import { PostContext } from "../../../context/PostContext"
const [post, setPost] = useContext(PostContext)
[...]
setPost({ ...post, isLikedByUser: isLiked, likeCount: likeCount })