Diff – 梦想的港湾

猜猜这段代码会发生什么事？

{!state.isEditing ? (
  <button type="button" onClick={() => this.setState({isEditing: true})}>修改</button>
) : (
  <button form="form-1" type="submit">确定</button>
)}

{!state.isEditing ? (

<button type="button" onClick={() => this.setState({isEditing: true})}>修改</button>

) : (

)}

以为仅仅是切换下按钮？

其实是会执行下面的流程

当 isEditing 为 false 的时候，点击 button，
isEditing 变成了 true
重新 render，在 virtualDOM 进行 diff 的时候，给 button 添加了 type=submit 以及 form='form-1'
#form-1 表单被意外的 submit 了

来个 DEMO 验证下继续阅读“React Key 在非数组、队列场景下的应用”

标签：Diff

React Key 在非数组、队列场景下的应用

Github For Windows的Diff真是废