redux 在React中在函数内部声明函数

ruarlubt  于 2023-06-06  发布在  React
关注(0)|答案(3)|浏览(144)

我刚刚看到一个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时重新声明方法getNamegetMessage吗?
  • 如果我创建getNamegetMessage类方法并在renderMessage内部调用它们,这会是一个改进吗?

Thanks:)

k0pti3hp

k0pti3hp1#

这是一个好的做法吗?它不会在每次渲染调用时重新声明方法getName和getMessage吗
绝对不是一个好方法,因为JavaScript要么有函数范围,要么有块范围,要么有全局范围。
无论您在此作用域中定义什么,都将仅是此作用域的一部分。在本例中,函数getMessagegetName将是函数范围renderMessage的一部分。
在每次调用时,都会定义新的函数,而不是重用以前定义的函数。
如果我创建getName和getMessage类方法并在renderMessage中调用它们,这会是一个改进吗?
看情况
如果这个函数需要访问任何组件属性或方法,那么你应该把它放在组件内部,或者如果这是唯一的实用程序函数,那么把它放在一个独立于组件的助手库中。当然,这会有所不同。

wko9yo5t

wko9yo5t2#

这是一个好的做法吗?它不会在每次渲染调用时重新声明方法getName和getMessage吗?
它将在每次渲染调用时重新decleare functionsgetNamegetMessage。不是很好,但也不可怕。这种方法减少了重新呈现的错误-函数声明是呈现结果的一部分。尽管在你的具体情况下这并不重要,因为函数总是返回相同的结果,并且它不依赖于状态(尽管在这种情况下,只内联字符串会更可读)
如果我创建getNamegetMessage类方法并在renderMessage中调用它们,这会是一个改进吗?
这将使垃圾收集器的虚拟生活更容易。很可能,一旦你开始依赖全局状态,这将开始出错,例如:

class App extends React.Component {
  getMessage => () {
      return "Hello"
    } 
  getName => () {
    return this.props.name
  }

  renderMessage = () => {
    someHttpAction().then(() => {
        alert(getMessage() + ' ' + getName());
    })
  }
  render() {
    return (
      <div onclick={this.renderMessage}>Say my name! (Hint, its {this.props.name})</div>
    )
  }
}

(Note该名称作为参数传递给App
当你第一次渲染时,你可能会期望,在点击文本后,你会看到一个“Hello Vijay”的警告。大多数时候都是这样但是,如果在单击文本之后,您重新呈现了name的不同值,比如Heisenberg,而someHttpAction promise仍然没有解决,会发生什么呢?你可能希望看到你的名字- Vijay,但实际上你会看到新的值,“你好海森堡”。通过内联声明函数(根据您的示例),函数的作用域被 * 锁定 *,您将获得预期的结果“Hello Vijay”。
想象一个更复杂的场景,你在多个用户配置文件之间切换,异步消息开始显示在错误的用户身上。
虽然我们可以将name作为参数传递给getName,但实际上,人们认为“这次很好”或忘记了,这就是引入bug的方式。在内联函数中犯同样的错误要容易得多。除非这成为瓶颈,否则请坚持使用不太容易出错的方法。
另外,我建议浏览How Are Function Components Different from Classes?

y1aodyip

y1aodyip3#

这是可能的,但它根本不是一个好的解决方案。
是的,它在每次重新渲染时都会创建新的函数,但如果你不把它们作为 prop 传递,那就不是一种情况了。
问题是,在不久的将来,你可能会得到一个巨大的怪物组件,它的职责非常模糊。
甚至更多。就性能而言它很差。组件越大,重新渲染所需的时间就越长。每一个最小的变化都将重新呈现整个组件,而不仅仅是它的一部分。
为了可读性和可伸缩性,您应该将renderMessage方法移动到新组件中。

class App extends React.Component {
  render() {
    return (
      <div>
        <Message/>
      </div>
    )
  }
}

class Message extends React.Component {
    getMessage() {
      return "Hello"
    } 
    
    getName() {
      return "Vijay"
    }
    
    render() {
      return (
        <h1>{this.getMessage()} {this.getName()} !!!</h1>
      )
    }
}

相关问题