草庐IT

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

卡颂 2023-03-28 原文

大家好，我卡颂。

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

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

ref的奇怪用法

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

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

return <div ref={setDOM}></div>;
}
让我们来分析下它的作用。

首先，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 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写法呢？

写法Reactspanstylecolor开发前端$ReactJSX语法

有关两个奇怪的React写法，你还遇到哪些奇怪的React写法呢？的更多相关文章

  1. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  2. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  3. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  4. ruby - 这两个 Ruby 类初始化定义有什么区别？ - 2

    我正在阅读一本关于Ruby的书，作者在编写类初始化定义时使用的形式与他在本书前几节中使用的形式略有不同。它看起来像这样:classTicketattr_accessor:venue,:datedefinitialize(venue,date)self.venue=venueself.date=dateendend在本书的前几节中，它的定义如下:classTicketattr_accessor:venue,:datedefinitialize(venue,date)@venue=venue@date=dateendend在第一个示例中使用setter方法与在第二个示例中使用实例变量之间是

  5. ruby - 具有两个参数的 block - 2

    我从用户Hirolau那里找到了这段代码:defsum_to_n?(a,n)a.combination(2).find{|x,y|x+y==n}enda=[1,2,3,4,5]sum_to_n?(a,9)#=>[4,5]sum_to_n?(a,11)#=>nil我如何知道何时可以将两个参数发送到预定义方法(如find)？我不清楚，因为有时它不起作用。这是重新定义的东西吗？ 最佳答案 如果您查看Enumerable#find的文档，您会发现它只接受一个block参数。您可以将它发送两次的原因是因为Ruby可以方便地让您根据它的“并行赋

  6. ruby-on-rails - 您希望看到哪些 Rails 插件？ - 2

    您认为可以作为插件很好地存在于您的Rails应用程序中必须实现的哪些行为？您过去曾搜索过哪些插件功能但找不到？哪些现有的Rails插件可以改进或扩展，如何改进或扩展？ 最佳答案 我希望在管理界面中看到一个引擎插件，它提供了应用程序中所有模型的仪表板摘要，以及可配置的事件图表。 关于ruby-on-rails-您希望看到哪些Rails插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questio

  7. ruby-on-rails - 浮点乘法的 Ruby 奇怪问题 - 2

    有没有人用ruby​​解决这个问题:假设我们有:a=8.1999999我们想将它四舍五入为2位小数，即8.20，然后乘以1,000,000得到8,200,000我们是这样做的；(a.round(2)*1000000).to_i但是我们得到的是8199999，为什么？奇怪的是，如果我们乘以1000、100000或10000000而不是1000000，我们会得到正确的结果。有人知道为什么吗？我们正在使用ruby​​1.9.2并尝试使用1.9.3。谢谢! 最佳答案 每当你在计算中得到时髦的数字时使用bigdecimalrequire'bi

  8. arrays - 如何在下面的示例中将两个值数组分组为 n 个值数组？ - 2

    我已经有很多两个值数组，例如下面的例子ary=[[1,2],[2,3],[1,3],[4,5],[5,6],[4,7],[7,8],[4,8]]我想把它们分组到[1,2,3],[4,5],[5,6],[4,7,8]因为意思是1和2有关系，2和3有关系，1和3有关系，所以1,2,3都有关系我如何通过ruby​​库或任何算法来做到这一点？ 最佳答案 这是基本Bron–Kerboschalgorithm的Ruby实现:classGraphdefinitialize(edges)@edges=edgesenddeffind_maximum_

  9. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  10. ruby - 实现k最近邻需要哪些数据？ - 2

    我目前有一个reddit克隆类型的网站。我正在尝试根据我的用户之前喜欢的帖子推荐帖子。看起来K最近邻或k均值是执行此操作的最佳方法。我似乎无法理解如何实际实现它。我看过一些数学公式(例如k表示维基百科页面)，但它们对我来说并没有真正意义。有人可以推荐一些伪代码，或者可以查看的地方，以便我更好地了解如何执行此操作吗？ 最佳答案 K最近邻(又名KNN)是一种分类算法。基本上，您采用包含N个项目的训练组并对它们进行分类。如何对它们进行分类完全取决于您的数据，以及您认为该数据的重要分类特征是什么。在您的示例中，这可能是帖子类别、谁发布了该项

随机推荐