react写法实例代码分析

发布时间:2023-03-16 14:49:33 作者:iii
来源:亿速云 阅读:124

这篇文章主要介绍“react写法实例代码分析”,在日常操作中,相信很多人在react写法实例代码分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”react写法实例代码分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

ref的奇怪用法

这是一段初看让人很困惑的代码:

function App() {
  const [dom, setDOM] = useState(null);
 
  return <div ref={setDOM}></div>;
}

让我们来分析下它的作用。

首先,ref有两种形式(曾经有3种):

例子中的setDOMuseStatedispatch方法,也有两种调用形式:

在例子中,虽然反常,但ref的第二种形式和dispatch的第二种形式确实是契合的。

也就是说,在例子中传递给refsetDOM方法,会在div对应DOM更新、销毁时执行,那么dom状态中保存的就是div对应DOM的最新值。

这么做一定程度上实现了感知DOM的实时变化,这是单纯使用ref无法具有的能力。

useMemo的奇怪用法

通常我们认为useMemo用来缓存变量propsuseCallback用来缓存函数props

但在实际项目中,如果想通过缓存props的方式达到子组件性能优化的目的,需要同时保证:

类似这样:

function App({todos, tab}) {
    const visibleTodos = useMemo(
      () => filterTodos(todos, tab),
    [todos, tab]);
    
    return <Todo data={visibleTodos}/>;
}

// 为了达到Todo性能优化的目的
const Todo = React.memo(({data}) => {
  // ...省略逻辑
})

既然useMemo可以缓存变量,为什么不直接缓存组件的返回值呢?类似这样:

function App({todos, tab}) {
  const visibleTodos = useMemo(
      () => filterTodos(todos, tab),
  [todos, tab]);
  
  return useMemo(() => <Todo data={visibleTodos}/>, [visibleTodos])
}

function Todo({data}) {
  return <p>{data}</p>;
}

如此,需要性能优化的子组件不再需要手动包裹React.memo,只有当useMemo依赖变化后子组件才会重新render

到此,关于“react写法实例代码分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. react避免重复点击的方法
  2. react和vue的区别有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

react

上一篇:Vue怎么使用pdfobject实现预览pdf

下一篇:Vue3需要避免的错误有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》