React类组件通过类方法返回JSX触发状态更新警告的疑问

你遇到的警告和「将JSX抽离到类方法中返回」的写法本身没有关联，问题出在onClick事件的回调绑定逻辑错误：
你当前的代码中写的是onClick={this.handleChangeStep('step2')}，这里的this.handleChangeStep('step2')会在组件渲染执行step1方法时直接调用，而不是等到点击事件触发时执行。此时组件正处于渲染流程中，调用setState会触发新一轮状态更新，和正在进行的渲染流程冲突，就会抛出你看到的警告。

只需要修改onClick的绑定方式，避免渲染时直接触发状态更新即可，常用两种写法：

• 用箭头函数包裹执行逻辑，仅在点击事件触发时调用handleChangeStep：

// step1方法内的节点修改
<div onClick={() => this.handleChangeStep('step2')}>Next Step</div>
// step2方法内的节点修改
<div onClick={() => this.handleChangeStep('step1')}>Previous Step</div>

• 用bind预先绑定参数：

// step1方法内的节点修改
<div onClick={this.handleChangeStep.bind(this, 'step2')}>Next Step</div>
// step2方法内的节点修改
<div onClick={this.handleChangeStep.bind(this, 'step1')}>Previous Step</div>

如果希望避免每次渲染生成新的匿名函数，也可以提前将handleChangeStep定义为类箭头函数属性，解决this指向问题的同时简化调用：

handleChangeStep = (step) => {
  this.setState({ step })
}

React本身完全支持在类方法中返回JSX来简化render方法的逻辑，这种写法没有任何限制，也完全符合官方规范。官方文档中提到的抽离为单独<Step1 />组件的写法只是另一种拆分逻辑的方案，和你当前的写法并不冲突，你可以根据业务复杂度自由选择拆分粒度，不需要为了符合示例强行创建额外的小组件。

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