V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
fstar
V2EX  ›  React

如何快速知道哪个 useSelector 导致了 React 组件重渲染?

  •  1
     
  •   fstar · 2022-07-28 15:26:38 +08:00 · 2668 次点击
    这是一个创建于 878 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一堆 useSelector 。

    试着用 ahooks 的 useWhyDidYouUpdate ,一个个传入 useSelector ,但没发现问题。

    https://ahooks.js.org/zh-CN/hooks/use-why-did-you-update/

    发现还有些自定义钩子。。我也怀疑有些封装为对象的没有用 shallowEqual 。

    感觉可以封装一下 useSelector ,比较函数返回 false 时,debugger 一下,但又很麻烦。。。

    14 条回复    2022-08-01 14:58:02 +08:00
    sweetcola
        1
    sweetcola  
       2022-07-28 16:25:07 +08:00
    https://github.com/reduxjs/redux-devtools

    可以试试这个浏览器扩展看能不能解决
    swirling
        2
    swirling  
       2022-07-28 16:33:20 +08:00
    我一般删一半代码 直接二分法找...
    Mark24
        3
    Mark24  
       2022-07-28 16:34:35 +08:00
    不用 Hooks ✅

    这就是 hooks 的问题
    fstar
        4
    fstar  
    OP
       2022-07-28 16:43:12 +08:00
    不用 Hooks ✅
    kyuuseiryuu
        5
    kyuuseiryuu  
       2022-07-28 18:32:03 +08:00 via iPhone
    为什么这么在意渲染了几次
    用 jquery 页面就只会渲染一次
    kwrush
        6
    kwrush  
       2022-07-28 22:06:09 +08:00 via iPhone
    你得先确认是 useSelector 输出变了导致 rerender 不是其他原因,建议用 redux devtool 检查是哪个数据变了。另外严格模式下会渲染两次。另外重渲染和用不用 hook 有什么关系…
    kwrush
        7
    kwrush  
       2022-07-28 22:12:24 +08:00 via iPhone
    @kwrush 还有 react devtool 的 profiler 可以查看组件重渲染的原因
    AyaseEri
        8
    AyaseEri  
       2022-07-29 09:28:38 +08:00
    React DevTool Profile 一下。不过都用 React 了不应该是大胆的让它重渲染么。
    iseki
        9
    iseki  
       2022-07-29 10:27:25 +08:00 via Android
    为什么要关注重渲染的问题,出现性能问题了吗
    qfdk
        10
    qfdk  
       2022-07-29 13:03:37 +08:00 via iPhone
    你需要用 whyDidYouRender 这个库. update 的那个也推荐换 render. React 重新渲染是因为 state 改变了 或者 props 改变了. 我感觉你应该从这个原理下手
    qfdk
        11
    qfdk  
       2022-07-29 13:10:06 +08:00 via iPhone
    看了下文档 上面有提到 你的 useSelect ,网址贴给你 https://github.com/welldone-software/why-did-you-render
    qdxb
        12
    qdxb  
       2022-07-29 16:21:12 +08:00
    大伙有没有讲解 React 渲染相关的文章推荐?配合 props 、useState 、useMemo 、useEffect 、useRef 这些属性的。
    magicdawn
        13
    magicdawn  
       2022-07-30 11:17:11 +08:00 via iPad
    ragnaroks
        14
    ragnaroks  
       2022-08-01 14:58:02 +08:00
    除了楼上提及的包以外,在绝大部分情况下一定是有数据变更导致了重新渲染,两个对象的内容看起来一样不一定是同一个对象
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2625 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 10:43 · PVG 18:43 · LAX 02:43 · JFK 05:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.