问题描述
我刚刚遇到了一个 React 代码,我不确定它是否是一个好方法.这是该代码的示例实现.
class App 扩展 React.Component {renderMessage = () =>{函数 getMessage() {回复你好"}函数 getName() {返回维杰"}返回 (<h1>{getMessage()} {getName()} !!!</h1>)}使成为() {返回 (<div>{this.renderMessage()}
我刚刚遇到了一个 React 代码,我不确定它是否是一个好方法.这是该代码的示例实现.
class App 扩展 React.Component {renderMessage = () =>{函数 getMessage() {回复你好"}函数 getName() {返回维杰"}返回 (<h1>{getMessage()} {getName()} !!!</h1>)}使成为() {返回 (<div>{this.renderMessage()}
)}}
这里我们在render中调用一个函数renderMessage
.在 renderMessage
中有两个内部函数,它们只在 renderMessage
内部调用.我现在的问题是:-
render
调用时重新声明方法 getName
和 getMessage
.getName
和 getMessage
类方法并在 renderMessage
中调用它们,这会是一种改进吗?谢谢:)
绝对不是一个好方法.因为 JavaScript 要么具有功能性,要么具有块或全局作用域.您在此范围内定义的任何内容都将仅是此范围的一部分.在您的情况下,这些函数 getMessage
和 getName
将成为 renderMessage
的一部分是功能范围.
每次调用时,都会定义新函数,而不是重用以前定义的函数.
如果我创建 getName 和 getMessage 类方法并在 renderMessage 中调用它们会有所改进吗?
视情况而定.如果此函数需要访问任何组件属性或方法,则应将其放置在组件中,或者如果这只是实用程序函数,则将其放置在与组件分开的辅助库中.当然,这会有所作为.
I just came across a React code and I'm not sure whether it's is a good way to do it or not. This is a sample implementation of that code.
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>
)
}
}
Here we are calling a function renderMessage
inside render. In renderMessage
there are two inner functions which are called inside renderMessage
only. My question now are:-
getName
and getMessage
at every render
call.getName
and getMessage
class methods and call them inside renderMessage
would it be an improvment?Thanks :)
Definitely not a good approach. As JavaScript is either having functional or block or global scope.Whatever you defining at this scope will be part of this scope only.In your case, these function getMessage
and getName
will be part of renderMessage
which is functional scope.
At every call, new functions are getting defined instead reusing previously defined.
Depend.If this function need an access to any component properties or method then you should place it inside the component or If this is only utility function then place it inside helper library separate from component.Surely, this will make difference.
这篇关于在 React 中的函数内部声明函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!