Zustand selector 发生 infinate loops的原因以及解决

Zustand selector 发生 infinate loops

做zustand tutorial project的时候,使用选择器方法引入store,出现Maximum update depth exceeded,也就是组件一直重新渲染,改成直接使用store就没有不会出现这个问题。如下:

js 复制代码
  // const [xIsNext, setXIsNext] = useGameStore((state) => [
  //   state.xIsNext,
  //   state.setXIsNext,
  // ]);
  
  const { history, setHistory, xIsNext, setXIsNext } = useGameStore()

目前看到有关这个问题的博客很少,特此记录一下。

感谢一下我的mentor们,如此认真地教我,给我充足的时间学习

问题产生原因

官方文档的解释如下:

文档链接

也就是说,这是因为Zustand v5的改动,当selector返回一个新的引用,可能导致无限循环

细究了一下,问题产生原因如下:

  1. react的默认比较为引用比较,在zustandV5中沿用了这种方式。
  2. 每次重新渲染,useStore都会再执行一次,selector每次都返回的是一个新的引用
  3. zustand使用浅比较判断状态变化,触发重新渲染,以此往复

比如像下面这样使用selector

js 复制代码
  const { history, setHistory} = useGameStore(((state) => ({
    history: state.history,
    setHistory: state.setHistory,
  })));
  const [searchValue, setSearchValue] = useStore((state) 
          => [  state.searchValue,  state.setSearchValue,])

以上两种方法selector分别返回一个对象和一个数组,每次重新渲染,其引用都会发生变化,也就触发了infinate loops

解决方法

  1. 避免在selector中返回对象
    这是我认为最直接的办法:
js 复制代码
const history = useGameStore((state) => state.history);
const setHistory = useGameStore((state) => state.setHistory);
//不要像下面这样
//  const { history, setHistory} = useGameStore(((state) => ({
//    history: state.history,
//    setHistory: state.setHistory,
//  })));
  1. 采用文档中介绍的使用useShllow解决:
    但是useShllow比较对象只会比较最浅层的值,要注意可能产生的副作用
js 复制代码
  const { history, setHistory, xIsNext, setXIsNext } = useGameStore(useShallow((state) => ({
    history: state.history,
    setHistory: state.setHistory,
    xIsNext: state.xIsNext,
    setXIsNext: state.setXIsNext,
  })));

附: zustand实现原理

zustand源代码中useShallow实现部分如下(也就是比较值而非比较引用):

js 复制代码
import React from 'react'
import { shallow } from '../vanilla/shallow.ts'

export function useShallow<S, U>(selector: (state: S) => U): (state: S) => U {
  const prev = React.useRef<U>(undefined)
  return (state) => {
    const next = selector(state)
    return shallow(prev.current, next)
      ? (prev.current as U)
      : (prev.current = next)
  }
}
相关推荐
Mintopia8 分钟前
🌐 实时翻译 + AIGC:Web跨语言内容生成的技术闭环
前端·javascript·aigc
前端开发爱好者8 分钟前
Vite+ 获得 1250万美元的 A 轮融资,生态加速!
前端·javascript
Larcher8 分钟前
JS 变量声明避坑指南:彻底搞懂 var/let/const 的 3 大核心区别与最佳实践
前端·javascript·node.js
拖拉斯旋风15 分钟前
0基础学习Openai之:通过Prompt生成你心中的那幅画🎨
javascript·openai
boboj116 分钟前
Vue过渡至React的基础理解
前端·react.js
梵得儿SHI1 小时前
Vue 数据绑定深入浅出:从 v-bind 到 v-model 的实战指南
前端·javascript·vue.js·双向绑定·vue 数据绑定机制·单向绑定·v-bind v-model
Moment1 小时前
Electron 发布 39 版本 ,这更新速度也变态了吧❓︎❓︎❓︎
前端·javascript·node.js
自由日记1 小时前
前端学习:选择器的类别
前端·javascript·学习
江城开朗的豌豆1 小时前
Webpack打包:从“庞然大物”到“精致小可爱”
前端·javascript