在渲染中调用方法或使用 getter

Question

当渲染方法应该 return 一个计算值时，使用 class 方法是否更合适

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

或 getter:

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

它们似乎都有效，但我不清楚在 render 方法中调用函数是否是好的做法，我很好奇是否一个比另一个更受欢迎，为什么。

Answer 1

When a render method should return a calculated value, is it more appropriate to use a class method?

这里真的没有对错之分。这只是个人喜好和编码风格以及您喜欢对象上的哪种界面类型的问题。

如果您希望它的行为在调用者看来像是属性，则使用 getter 以便调用者可以像属性 [=10= 一样访问它].

如果你想让它的行为在调用者看来像是对象必须计算的东西，return，那么使用方法 (console.log(user.getFullName()) `.

在这种特殊情况下，两者都可以。由于没有 setter，我个人可能会自己使用 user.getFullName()，所以调用者很清楚这是只能检索的东西，不能设置并且可能是计算的属性，不是直接存储的东西。

They both seem to work, but I'm unclear if calling a function within a render method is good practice or not and am curious if one is preferred over the other and why.

在 render() 中调用函数完全没有问题。太好了。

在渲染中调用方法或使用 getter

Call method within render or use getter

javascript

getter

reactjs

es6-class