如何解决为什么需要在 Reagent 组件中返回一个函数?
来自 Reagent introduction,一个简单的计时器组件:
(defn timer-component []
(let [seconds-elapsed (r/atom 0)]
(fn []
(js/setTimeout #(swap! seconds-elapsed inc) 1000)
[:div
"Seconds Elapsed: " @seconds-elapsed])))
下面写着
前面的例子还用到了 Reagent 的另一个特性:一个组件 function 可以返回另一个函数,用于执行实际操作 渲染。这个函数的调用参数与 第一个。
这允许您对新创建的组件执行一些设置 无需求助于 React 的生命周期事件。
有人能提醒我这里的基本原则吗?为什么我们需要这个匿名函数?为什么不只是
(defn timer-component []
(let [seconds-elapsed (r/atom 0)]
(js/setTimeout #(swap! seconds-elapsed inc) 1000)
[:div
"Seconds Elapsed: " @seconds-elapsed])))
解决方法
据我所知,Reagent 每次想要渲染时都会调用 timer-component
- 可能会一遍又一遍地设置相同的状态 (seconds-elapsed
)。
通过返回那个匿名函数,它告诉 Reagent “用它来渲染 timer-component
”。通过这种方式,您的状态设置与渲染分离,就像您的 doco 引用所说,这是一种无需使用 Reacts 生命周期事件即可执行状态设置的方法。
希望有意义
,Tl;dr:返回的匿名函数是 render
方法,每个组件都必须具有该方法。如果在 Reagent 中使用 with-let
macro,则可以省略匿名函数。
React 组件不可或缺的部分是 render
function,它接受单个对象参数并返回一个 React 元素。 render
之间的区别
和组件构造函数是,虽然这两个方法在构造时都被调用,render
is called on each update。 (例如,如果有人调用组件的 setState
方法)。
在上面的例子中,内部匿名函数和外部timer-component
函数之间的区别与render
和构造函数之间的区别是相同的。请注意匿名函数 closes over 绑定在 let
子句中的变量,这允许它是有状态的。如果 timer-component
本身就是 render
函数,那么它会在每次更新时被调用,并且 seconds-elapsed
会被无限地重置为零。
请参阅名为“Creating Reagent Components”的 Reagent 存储库上的文档。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。