美文网首页
react hooks of useMemo

react hooks of useMemo

作者: 想溜了的蜗牛 | 来源:发表于2020-12-24 15:26 被阅读0次

今天解决了一个试了好几次都没搞定的问题

场景: 有个集中管理生成路由的功能,此处需要鉴权。用户签权用的是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 最佳实践

相关文章

  • react hooks of useMemo

    今天解决了一个试了好几次都没搞定的问题 场景: 有个集中管理生成路由的功能,此处需要鉴权。用户签权用的是uesEf...

  • [React Hooks] useMemo 学习

    官网文档:https://reactjs.org/docs/hooks-reference.html#usemem...

  • react hooks 之 useMemo

    useMemo 接受两个参数,第一个参数是一个函数,返回值用于产生保存值。 第二个参数是一个数组,作为 dep 依...

  • useMemo

    useMemo:根据名字翻译为"备忘录",他在react的hooks中发挥什么样的作用呢?先根据查找到的资料,发现...

  • React hooks中memo,usememo,useCall

    memomemo类似于PureCompoent 作用是优化组件性能,防止组件触发重渲染memo针对 一个组件的渲染...

  • React Hooks

    React Hooks Hooks其实就是有状态的函数式组件。 React Hooks让React的成本降低了很多...

  • Hooks - useMemo & useCallBack &

    useMemo & useCallBack 在 React 中,当父组件发生变化的时候,子组件会重新渲染一遍,但是...

  • react-hooks

    前置 学习面试视频 总结react hooks react-hooks react-hooks为函数组件提供了一些...

  • React Hooks

    前言 React Conf 2018 上 React 提出了关于 React Hooks 的提案,Hooks 作为...

  • 5分钟简单了解React-Hooks

    首先附上官网正文?:React Hooks Hooks are a new addition in React 1...

网友评论

      本文标题:react hooks of useMemo

      本文链接:https://www.haomeiwen.com/subject/ekymnktx.html