为什么普通setState仅渲染一次，函数式setState每次点击都触发渲染？

• React对同一个合成事件回调内的多次setState调用会默认执行批量更新，所有更新请求会被合并后仅执行一次渲染，不会每调用一次setState就立刻触发重渲染。
• 你使用普通值传参的setVal(a + 1)写法中，a是固定值3，因此三次setVal调用传入的新值都是固定的4：
  1. 第一次点击时，当前val为0，新值4和旧值不相等，React会执行一次渲染，val更新为4，控制台打印4。
  2. 后续点击时，三次setVal传入的新值仍然是4，和当前已有的val值完全相等。React内部对state做浅比较后判定无更新，直接跳过渲染流程，因此没有新的日志输出，也不会触发重渲染。
• 函数式setState表现不同的原因：函数式setState的回调参数会拿到上一轮更新后的最新state值，单轮点击内的三次调用会依次在上一次计算结果的基础上加1，单轮点击总共加3，每次点击后的最终结果（4、7、10……）都和之前的state值不同，因此每次点击都会正常触发渲染。

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