hooks 疑问:use-url-state里的targetQuery, setState为什么不是缓存的值?

ru9i0ody  于 2022-11-06  发布在  其他
关注(0)|答案(1)|浏览(106)

源代码中

const targetQuery = {
    ...initialStateRef.current,
    ...queryFromUrl,
  } as state; 

  const setState = (s: React.SetStateAction<state>, options?: Options) => {
    const newQuery = typeof s === 'function' ? (s as Function)(targetQuery) : s;
    const navigateMode = options?.navigateMode ?? 'push';

    // 1. 如果 setState 后,search 没变化,就需要 update 来触发一次更新。比如 demo1 直接点击 clear,就需要 update 来触发更新。
    // 2. update 和 history 的更新会合并,不会造成多次更新
    update((v) => !v);
    history[navigateMode]({
      hash: location.hash,
      search: stringify({ ...queryFromUrl, ...newQuery }, parseConfig) || '?',
    });
  };

这部分在每次重渲染时就是新值,从而造成的影响就是

每次重渲染,这两个值就变化,导致触发其他useEffect(重复触发,且无意义)

但是预期实际是

  • targetQuery 只有query变化时才是新值
  • setState 永远都是固定引用
zlwx9yxi

zlwx9yxi1#

还有
源代码中

const queryFromUrl = useMemo(getQueryFromUrl, [location.search]);

history[navigateMode]({
      hash: location.hash,
      search: stringify({ ...queryFromUrl, ...newQuery }, parseConfig) || '?',
    });

会造成一种情况,如果用户同时调用多个setQuery,就会导致其中某个的值是旧的

因为 queryFromUrl 是useMemo而不是每次直接从query中获取

相关问题