React类组件Setter/Getter调用时机及与setState联动死循环问题咨询

你代码里定义的name是ES6类语法的访问器属性，和React组件state对象下的name是两个完全独立的字段，没有默认绑定关系，我们逐个解答你的疑问：

• setter的触发时机 #

  这个setter仅在你主动给组件实例的name属性赋值时触发，比如执行this.name = "新用户名"这类操作时调用，属于JS原生语法的逻辑，和React框架的setState、生命周期逻辑无关。

• 是否会被this.setState({ name: ... })调用 #

  不会。setState的作用是修改组件实例state对象下的name字段，并不是修改组件实例自身的name访问器属性，二者作用域完全独立，不会触发你定义的setter。

• 会不会产生无限调用 #

  不会。setter内部执行的是this.setState({ name: newValue })，这个操作不会反向触发setter本身，不存在循环调用链路，不会出现无限执行的问题。如果你的setter里写的是this.name = newValue才会触发递归死循环，你当前的写法没有这个问题。

• getter会不会无限调用 #

  也不会。getter内部逻辑是读取this.state.name，也就是直接访问state对象下的字段，没有访问this.name（访问器属性本身）的操作，不会递归触发getter，不存在无限调用的问题。

本质上你写的这组get/set访问器就是封装了state中name字段的读写快捷方式：你可以直接用this.name代替this.state.name读取值，用this.name = xxx代替this.setState({name: xxx})修改值，简化写法而已。

内容的提问来源于stack exchange，提问作者SoftTimur