React点击事件首次点击无响应？Pro React 16示例代码问题咨询

问题原因 #

代码的问题出在SimpleButton组件handleClick方法的执行时序上：
React中setState是异步批量执行的，你在调用setState后立刻执行了props.callback()，而回调内部直接调用ReactDOM.render重渲染整个应用根节点，打断了当前的状态更新流程，第一次点击设置的counter和hasButtonBeenClicked状态还没来得及生效，应用就被触发了重渲染，因此看起来第一次点击没有任何反应。第二次点击时之前的更新流程已经走完，才能正常触发状态更新和行排序逻辑。

修复方法 #

把props.callback()放到setState的第二个回调参数中，等组件自身状态更新完成后再执行回调即可，修改后的handleClick代码如下：

handleClick = () => {
  this.setState({
    counter: this.state.counter + 1,
    hasButtonBeenClicked: true
  }, () => {
    // 等待状态更新完成后再执行父级回调
    this.props.callback();
  });
}

额外优化建议 #

这个示例是书籍为了演示特定知识点，才使用了全局变量存储数据+手动调用ReactDOM.render强制重渲染的写法，实际项目开发中不推荐这种做法。更合理的实现是将names数组放到App组件的内部状态中，通过setState更新数组，React会自动处理重渲染逻辑，不会出现这类时序冲突问题。

内容的提问来源于stack exchange，提问作者N. Kaufman