两个奇怪的React写法，你还遇到哪些奇怪的React写法呢？

大家好，我卡颂。

创新互联主要从事网站设计、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务溧阳,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

虽然React官网用大量篇幅介绍最佳实践，但因JSX语法的灵活性，所以总是会出现奇奇怪怪的React写法。

本文介绍2种奇怪（但在某些场景下有意义）的React写法。

ref的奇怪用法

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

function App() {
  const [dom, setDOM] = useState(null);
 
  return 
;
}

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

首先，ref有两种形式（曾经有3种）：

1. 形如{current: T}的数据结构
2. 回调函数形式，会在ref更新、销毁时触发

例子中的setDOM是useState的dispatch方法，也有两种调用形式：

1. 直接传递更新后的值，比如setDOM(xxx)。
2. 传递更新状态的方法，比如setDOM(oldDOM => return /* 一些处理逻辑 */)。

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

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

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

useMemo的奇怪用法

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

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

• 所有传给子组件的props的引用都不变（比如通过useMemo）。
• 子组件使用React.memo。

类似这样：

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

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

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

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

function Todo({data}) {
  return 
{data}
;
}

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

总结

除了这两种奇怪的写法外，你还遇到哪些奇怪的React写法呢？

分享题目：两个奇怪的React写法，你还遇到哪些奇怪的React写法呢？
浏览地址：http://www.csdahua.cn/qtweb/news47/542047.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网