在render中调用方法或使用getter

时间:2017-12-27 22:27:45

标签: javascript reactjs getter es6-class

当渲染方法应返回计算值时,使用类方法

更合适
class User extends Component {
  getFullName () {
    const { fname, lname } = this.props
    return `${lname}, ${fname}`
  }
  render () {
    return <div>FULLNAME: {this.getFullName()}</div>
  }
}

或吸气剂:

class User extends Component {
  get fullName () {
    const { fname, lname } = this.props
    return `${lname}, ${fname}`
  }
  render () {
    return <div>FULLNAME: {this.fullName}</div>
  }
}

它们似乎都有效,但我不清楚在渲染方法中调用函数是否是一种良好的实践,如果一个优先于另一个以及为什么会感到好奇。

1 个答案:

答案 0 :(得分:1)

  

当render方法返回计算值时,使用类方法更合适吗?

这里真的没有对错。这只是个人偏好和编码风格以及您喜欢的对象的界面类型。

如果你希望它表现得好,并且看起来像是一个属性,那么使用一个getter,这样调用者就可以像属性console.log(user.fullName)那样访问它。

如果你希望它的行为和调用者看起来像对象必须计算和返回的东西,那么使用一个方法(console.log(user.getFullName())`。

在这种特殊情况下,要么就好了。由于没有setter,我个人可能自己使用user.getFullName()因此调用者很清楚这是只能检索,不能设置的东西,可能是计算属性,而不是直接存储的东西。 / p>

  

它们似乎都有效,但是我不清楚在渲染方法中调用函数是否是好的做法,如果一个人比另一个人更受欢迎并且为什么这样做,我很好奇。

调用render()内的函数完全没有问题。那很好。