今天写一个比较复杂的表单的时候遇到了一个 react 组件复用带来的副作用，记录一下。
页面是这样的：
这是一个 渲染/编辑 商品价格的表单，具体逻辑比较复杂，所以我对表单进行了拆分，主要功能是这样的：
- 在上面选择商品的销售大区，选择大区就在下面生成对应的 价格 Table 。
- 上面的批量设置售价 Form 可以批量设置下面所有 价格 Table 的表单信息。
- 填写 大货价 自动计算毛利，计算样品价 。
- ...........业务逻辑过于复杂，不一一赘述。
业务场景比较复杂，所以我把 下面的 Table 抽离出去，写了一个RenderPriceTable处理里面的逻辑。
我把上面选择的大区数据 map 渲染 RenderPriceTable 组件并通过 props 传递组件所需的值，然后我按正常流程试了一遍，发现没什么问题，如下 ，我新增大区，数据都显示正常：
按顺序从后面依次删除大区，下面的 table 也会动态减少且数据渲染正常
但是，如果我不按正常顺序，从中间或者倒序更改大区，下面的 Table 渲染就出现问题了。比如我把 广东大区 和 哈尔滨大区 中间的武汉大区删掉，此时下面的Table数量是少了一个，但是里面的数据出现了错误，哈尔滨大区的 Table 渲染了刚刚删掉的 武汉大区的数据，如下：
此时我想到了 react 中的key，在 map 生成 RenderPriceTable 的时候，把 不同大区的 id 当作 RenderPriceTable 组件的 key：
这样一来，我更改上面选择的大区的时候，下面的 Table 也能正常的对应更改，渲染正确的数据。
之前一直知道 react 这个 key 的作用，但是一直没有很深刻的印象，平时也没有经常用到，这次因为 业务逻辑和页面以及相应的数据结构都比较复杂，所以我才真正意识到这样的小细节很重要。所以总结一下 react 中 key 的作用，加深印象。
为了React中的 diff 算法更好的发挥作用，React中的key 值必须保证其唯一和稳定性，React中的key属性，它是一个特殊的属性，它是出现不是给开发者用的，而是给React自己使用，有了key属性后，就可以与组件建立了一种对应关系，react利用key来识别组件，他是一种身份标识。每个key 对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建。在render函数执行的时候，新旧两个虚拟DOM会进行对比，如果两个元素有不同的key，那么在前后两次渲染中就会被认为是不同的元素，这时候旧的那个元素会被销毁，新的元素会被创建。如果提供了唯一的标识key且是相同的key，且元素类型相同， 若元素属性有所变化，则React只更新组件对应的属性，这种情况下，性能开销会相对较小。
参考 React 官网：协调 – React