今天解决了一个试了好几次都没搞定的问题
场景: 有个集中管理生成路由的功能,此处需要鉴权。用户签权用的是uesEffect
处理, 鉴权通过,则进入页面,否则去登录页。
问题: 登录后,页面一刷新就会去到 login 页面
这个问题其实挺简单,前提是知道 useMemo
。 上面这个问题就非常适合使用useMemo
。
以下引自官方文档
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
返回一个 memoized 值。
把“创建”函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。
记住,传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作,诸如副作用这类的操作属于 useEffect 的适用范畴,而不是 useMemo。
如果没有提供依赖项数组,useMemo 在每次渲染时都会计算新的值。
你可以把 useMemo 作为性能优化的手段,但不要把它当成语义上的保证。将来,React 可能会选择“遗忘”以前的一些 memoized 值,并在下次渲染时重新计算它们,比如为离屏组件释放内存。先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo,以达到优化性能的目的。
另外也可以参考下 腾讯 IMWeb 团队的这篇文章 React hooks 最佳实践
网友评论