babel 插件问题，配置babel插件式这个包的使用前提么？

[Ray-56]

配置babel插件式这个包的使用前提么？
如果不配置，则无法使用？

[CJY0208]

很简单的场景下不需要配置 babel 也可用，但绝大多数需要使用 babel 插件，不然无法保证缓存的稳定性

[Ray-56]

好的，明白了

[CJY0208]

() => (
  {show1 && <div />}  {/* 1 */}
  {show2 && <KeepAlive />} {/* 2 */}
  {show3 && <KeepAlive />} {/* 3 */}
)

如上，如果不做任何处理的情况下， show1 为 false 后会导致位置 2 的 KeepAlive 渲染到原先的位置 1，位置 3 渲染到位置 2，会造成 KeepAlive 识别对应缓存时的错误

具体原因与 React 声明尽可能在列表中使用 key 属性类似，但如果不增加 key 的话 React 可以暴力全渲染一次来掩盖问题，只造成性能上的损耗，而对于 KeepAlive 这类精细化的识别行为来说，必须有类似 key 的值存在

实际上，可以由用户手动写上 id 值来直接修复，参考 react-keep-alive，但对于用户来说存在额外的成本，并且明显没有实际收益，所以我做了 babel 组件自动化了这个过程

[vimcaw]

@CJY0208 是不是手动在这种情形下加上 key 值就不用 babel 插件了？比如上面的情形，只要改成：

() => (
  {show1 && <div key={1} />}  {/* 1 */}
  {show2 && <KeepAlive key={2} />} {/* 2 */}
  {show3 && <KeepAlive key={3} />} {/* 3 */}
)

就可以不用 babel 插件了吗？我现在的项目用的是 Vite 来进行构建，不太方便用 Babel。

[CJY0208]

@vimcaw 不只有这一种情况，如果不使用 babel 的话不能保证 KeepAlive 效果是稳定的，最好给每个 KeepAlive 都加上 id 属性

[vimcaw]

好的👌谢谢，我的使用情况很简单，先试一下。