我刚刚看到一个React代码,我不确定这是否是一个好方法。这是该代码的示例实现。
class App extends React.Component {
renderMessage = () => {
function getMessage() {
return "Hello"
}
function getName() {
return "Vijay"
}
return (
<h1>{getMessage()} {getName()} !!!</h1>
)
}
render() {
return (
<div>
{this.renderMessage()}
</div>
)
}
}
这里我们在render内部调用一个函数renderMessage
。在renderMessage
中有两个内部函数,它们只能在renderMessage
内部调用。我现在的问题是:
- 这是一个好的做法吗?它不会在每次调用
render
时重新声明方法getName
和getMessage
吗? - 如果我创建
getName
和getMessage
类方法并在renderMessage
内部调用它们,这会是一个改进吗?
Thanks:)
3条答案
按热度按时间k0pti3hp1#
这是一个好的做法吗?它不会在每次渲染调用时重新声明方法getName和getMessage吗
绝对不是一个好方法,因为JavaScript要么有函数范围,要么有块范围,要么有全局范围。
无论您在此作用域中定义什么,都将仅是此作用域的一部分。在本例中,函数
getMessage
和getName
将是函数范围renderMessage
的一部分。在每次调用时,都会定义新的函数,而不是重用以前定义的函数。
如果我创建getName和getMessage类方法并在renderMessage中调用它们,这会是一个改进吗?
看情况
如果这个函数需要访问任何组件属性或方法,那么你应该把它放在组件内部,或者如果这是唯一的实用程序函数,那么把它放在一个独立于组件的助手库中。当然,这会有所不同。
wko9yo5t2#
这是一个好的做法吗?它不会在每次渲染调用时重新声明方法getName和getMessage吗?
它将在每次渲染调用时重新decleare functions
getName
和getMessage
。不是很好,但也不可怕。这种方法减少了重新呈现的错误-函数声明是呈现结果的一部分。尽管在你的具体情况下这并不重要,因为函数总是返回相同的结果,并且它不依赖于状态(尽管在这种情况下,只内联字符串会更可读)如果我创建
getName
和getMessage
类方法并在renderMessage中调用它们,这会是一个改进吗?这将使垃圾收集器的虚拟生活更容易。很可能,一旦你开始依赖全局状态,这将开始出错,例如:
(Note该名称作为参数传递给
App
)当你第一次渲染时,你可能会期望,在点击文本后,你会看到一个“Hello Vijay”的警告。大多数时候都是这样但是,如果在单击文本之后,您重新呈现了
name
的不同值,比如Heisenberg,而someHttpAction promise仍然没有解决,会发生什么呢?你可能希望看到你的名字- Vijay,但实际上你会看到新的值,“你好海森堡”。通过内联声明函数(根据您的示例),函数的作用域被 * 锁定 *,您将获得预期的结果“Hello Vijay”。想象一个更复杂的场景,你在多个用户配置文件之间切换,异步消息开始显示在错误的用户身上。
虽然我们可以将
name
作为参数传递给getName
,但实际上,人们认为“这次很好”或忘记了,这就是引入bug的方式。在内联函数中犯同样的错误要容易得多。除非这成为瓶颈,否则请坚持使用不太容易出错的方法。另外,我建议浏览How Are Function Components Different from Classes?
y1aodyip3#
这是可能的,但它根本不是一个好的解决方案。
是的,它在每次重新渲染时都会创建新的函数,但如果你不把它们作为 prop 传递,那就不是一种情况了。
问题是,在不久的将来,你可能会得到一个巨大的怪物组件,它的职责非常模糊。
甚至更多。就性能而言它很差。组件越大,重新渲染所需的时间就越长。每一个最小的变化都将重新呈现整个组件,而不仅仅是它的一部分。
为了可读性和可伸缩性,您应该将
renderMessage
方法移动到新组件中。